react-native-sticky-keyboard-accessory
Motivation
This library was initially built for my following projects.
Preview
Installation
npm install --save react-native-sticky-keyboard-accessory
or
yarn add react-native-sticky-keyboard-accessory
Usage
; <KeyboardAccessory> <View style= flexDirection: 'row' height: 40 > <TextInput style= flex: 1 height: 30 borderWidth: 1 placeholder='Click me!' /> <Icon style= marginLeft: 10 name='smile-o' size=30 /> <Icon style= marginLeft: 10 name='angle-down' size=30 onPress= Keyboard /> </View></KeyboardAccessory>
How it works
- Update
bottom
to the height of keyboard when keyboard show - Reset
bottom
to0
once keyboard hide
; { thiskeyboardShowListener = Keyboard; thiskeyboardHideListener = Keyboard;} { this;} { this;}
iPhone X (iPhone XR, iPhone XS, iPhone XS Max)
For new iPhones, if you just wrap <KeyboardAccessory>
into <SafeAreaView>
, the UI doesn't look good.
<SafeAreaView style= flex: 1 > <KeyboardAccessory> ... </KeyboardAccessory></SafeAreaView>
In this way, your <KeyboardAccessory>
will actually occupy bottom safe area.
You should wrap one more <View>
for <KeyboardAccessory>
.
<SafeAreaView style= flex: 1 > <View style= flex: 1 > <KeyboardAccessory> ... </KeyboardAccessory> </View></SafeAreaView>
You can try it out with example project.
Props
backgroundColor
(string) - Color of keyboard accessory's background, defaults to#f6f6f6
.verticalOffset
(number) - Adds a vertical offset, default is 0.