Keyboard accessory (sticky) view for your React Native app. Supports interactive dismiss on iOS, respects safe area and works in both portrait and landscape, on both iOS and Android.
This library depends on react-native-safe-area-context
. If you use React Navigation you probably already have it in your dependencies, so you're good to go. If not, please follow the instructions here to install it. Then run:
yarn add @flyerhq/react-native-keyboard-accessory-view
import {
KeyboardAccessoryView,
usePanResponder,
} from '@flyerhq/react-native-keyboard-accessory-view'
// ...
const { panHandlers, positionY } = usePanResponder()
const [contentBottomInset, setContentBottomInset] = useState(0)
// ...
return (
<>
// Can be anything scrollable
<ScrollView
contentContainerStyle={{
paddingBottom: contentBottomInset,
}}
keyboardDismissMode='interactive'
scrollIndicatorInsets={{ bottom: contentBottomInset }}
{...panHandlers}
/>
<KeyboardAccessoryView
onContentBottomInsetUpdate={setContentBottomInset}
panResponderPositionY={positionY}
>
// Your accessory view
</KeyboardAccessoryView>
</>
)
Let's break it down.
usePanResponder
is used to track a finger position on a screen and to adjust KeyboardAccessoryView
bottom position to go with a keyboard interactive dismiss. Under the hood, it creates PanResponder which tracks the Y position. It returns this position and panHandlers
which should be spread under anything scrollable (e.g. ScrollView
, FlatList
). On Android, an empty object is returned in panHandlers
since we don't have interactive dismiss and don't want to add unnecessary responders.
KeyboardAccessoryView
optionally accepts panResponderPositionY
returned from the usePanResponder
hook. If you don't provide this value, the accessory view will not stick to the keyboard during interactive dismiss, but it will still work correctly on keyboard show/hide events. If you don't need interactive dismiss support you don't need to provide panResponderPositionY
and use usePanResponder
hook.
Additionally, KeyboardAccessoryView
provides a onContentBottomInsetUpdate
callback which can be used to position scrollable content above the keyboard.
-
style
(optional) - accepts View Style Props. Used to style the view which includes both content container and safe area insets. A common use case will be settingbackgroundColor
so the content container and safe area insets are of the matching color. -
contentContainerStyle
(optional) - accepts View Style Props. Used to style the content container, but not the safe area insets. -
onContentBottomInsetUpdate
(optional) - accepts a function with a number parameter. See the description above. -
panResponderPositionY
(optional) - accepts a number. See the description above.