If you've ever built a mobile-friendly web app, you've probably noticed that iOS Safari and Chrome handle the on-screen keyboard differently than Android. When the keyboard pops up, any element that's fixed to the bottom of the viewport disappears behind it.
I ran into this while building a form. Users couldn't see the "Submit" button once they focused an input field, because the keyboard covered it. CSS position: fixed just wasn't enough.
To solve this, I wrote a small React component that listens to the visualViewport API to detect the keyboard height and adjust the element's position in real time. It fades out when the user scrolls so it doesn’t get in the way, and falls back to normal behaviour on non-iOS devices.
The component is open source; feel free to use it or contribute. You can install it from npm:
npm install react-bottom-fixed
Then wrap your button:
import { BottomFixed } from 'react-bottom-fixed';
export default function MyForm() {
return (
<>
{/* your page content here */}
<BottomFixed>
<button onClick={() => alert('Done!')}>Submit</button>
</BottomFixed>
</>
);
}
On iOS, the button will stay just above the keyboard; on other platforms it will act as a regular container.
I'm sharing this in case anyone else has been frustrated by this issue. The source code and live demo are available on GitHub: https://github.com/almond-bongbong/react-bottom-fixed. Feedback and contributions are welcome!
Top comments (1)
Nice posting, Thank you
Could you share your email address to discuss the collaboration?