react-native-sticky-keyboard-accessory
Motivation
This library was initially built for my following projects.
Preview
Installation
npm install --save react-native-sticky-keyboard-accessoryor
yarn add react-native-sticky-keyboard-accessoryUsage
import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
<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.dismiss()} />
</View>
</KeyboardAccessory>How it works
- Update
bottomto the height of keyboard when keyboard show - Reset
bottomto0once keyboard hide
import { isIphoneX, getBottomSpace } from 'react-native-iphone-x-helper';
componentDidMount() {
this.keyboardShowListener = Keyboard.addListener(keyboardShowEvent, (e) => this.keyboardShow(e));
this.keyboardHideListener = Keyboard.addListener(keyboardHideEvent, (e) => this.keyboardHide(e));
}
keyboardShow(e) {
this.setState({
bottom: isIphoneX() ? (e.endCoordinates.height - getBottomSpace()) : e.endCoordinates.height
});
}
keyboardHide(e) {
this.setState({
bottom: 0
});
}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.