rn-keyboard-form - Open Source Package
Overview
@saulzayn/rn-keyboard-form is an open source React Native library for forms that behave properly with the on-screen keyboard. The focused field always scrolls above the keyboard, a footer such as a Save button rides on top of it, and a toolbar moves between fields, on phones and tablets, in portrait and landscape.
The Challenge
Keyboard handling is one of the most repeated pain points in React Native apps. Fields get hidden behind the keyboard, footers jump or disappear, and the usual fixes break inside iOS modal sheets, bottom sheets, on iPad form sheets or with the rounded keyboard on newer iOS versions.
The Solution
Built on react-native-keyboard-controller and Reanimated, the package wraps the app once and provides form, footer and toolbar components that handle scrolling and positioning for you. It covers iOS modal and page sheets, bottom sheets with several fields, device rotation with the keyboard open, and is themeable with light, dark or custom colours, spacing and labels.
Screens
Outcome
Published to npm with an example app that exercises every scenario, and documented with screenshots on iPhone, iPad and Android phones and tablets. Works with Expo SDK 56 to 58, tested on a Pixel 7 Pro, an Android tablet, iPhone and iPad.
Key Results
Tech Stack