react-native-sticky-keyboard-accessory

Motivation

This library was initially built for my following projects.

• just4fun/react-native-smart-emoji-picker
• just4fun/stuhome

Preview

Installation

npm install --save react-native-sticky-keyboard-accessory

or

yarn add react-native-sticky-keyboard-accessory

Usage

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 bottom to the height of keyboard when keyboard show
• Reset bottom to 0 once 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.

License

The MIT License