A React component for iOS that keeps your bottom-positioned elements fixed and safely visible, automatically adjusting their positions when viewport changes (e.g., virtual keyboard appearance).
npm install react-bottom-fixed
!License
!Size
!NPM Downloads

> A smart React component that keeps your bottom buttons visible even when the iOS keyboard appears
Before
After


If you've ever built mobile web apps, you've probably experienced this frustration:
- Buttons disappear behind the keyboard on iPhone 😭
- CSS position: fixed doesn't work properly on iOS Safari/Chrome
- Important action buttons get hidden every time users start typing
This library solves exactly that problem! While Android fixed this issue back in 2019, iOS still hasn't caught up.
It automatically adjusts your button position in real-time whenever the keyboard appears:
- Uses the visualViewport API to calculate exact keyboard height
- Smoothly moves buttons up using transform (no reflow!)
- Fades buttons slightly during scrolling to avoid blocking content
``bash`
npm install react-bottom-fixed
Super simple! Just wrap your bottom button with BottomFixed and you're done:
`tsx
import { BottomFixed } from 'react-bottom-fixed';
function MyApp() {
return (
{/ Button that stays visible above keyboard /}
$3
`tsx
`API Reference 📚
$3
| Property | Type | Required | Description |
| ---------------- | -------------------------------- | -------- | --------------------------------------------------------- |
|
children | ReactNode | ✅ | Component to be fixed at bottom |
| className | string | ❌ | Additional CSS class name |
| scrollBehavior | 'fade-out' \| 'close-keyboard' | ❌ | Controls behavior when user scrolls during keyboard input |$3
-
'fade-out' (default): Button fades out when user scrolls to avoid blocking content
- 'close-keyboard': Automatically closes the keyboard when user starts scrollingBrowser Support 🌐
- ✅ iOS Safari (main target!)
- ✅ iOS Chrome
- ✅ Android browsers (works great already, but compatibility guaranteed)
- ✅ Desktop (works as regular container)
On non-iOS environments, it automatically behaves like a normal container with zero performance overhead.
Try the Demo 👀
🌐 Live Demo - Try it right now!
Or clone and run locally:
`bash
git clone https://github.com/almond-bongbong/react-bottom-fixed.git
cd react-bottom-fixed/example
npm install
npm run dev
`Test it on iPhone or Chrome DevTools mobile mode – you'll see the difference immediately!
Important Notes ⚠️
- iOS-only optimization: No extra logic runs on non-iOS devices
- Requires
visualViewport`: Gracefully falls back to regular container on older browsersFound a bug or have ideas for improvement? We'd love to hear from you!
- 🐛 Report bugs
- 💡 Request features
MIT License - feel free to use it however you like!
See the CHANGELOG.md file for details.
---