react-native-keyboard-accessory v0.1.16

react-native-keyboard-accessory

A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

Expo Snack Playground

https://snack.expo.io/@ardaogulcan/react-native-keyboard-accessory-playground

Installation

Via npm:

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

Via Yarn:

yarn add react-native-keyboard-accessory

Usage

You can use the KeyboardAccessoryView or the KeyboardAccessoryNavigation components.

Keyboard Accessory View

Import react-native-keyboard-accessory

import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'

Use it inside your render() function:

<KeyboardAccessoryView>
  <View>
    <TextInput />
  </View>
</KeyboardAccessoryView>

Important: KeyboardAccessoryView should be positioned inside the Root Element which is covering the screen, mostly the top most view styled as { flex: 1 }.

Render Prop

Alternatively, you can also pass a function as the children prop of the component. This allows you to access an isKeyboardVisible prop which is useful to render things conditionally based on the visibility of the keyboard:

<KeyboardAccessoryView>
  {({ isKeyboardVisible }) => {
    return (
      <>
        <Text>Always visible</Text>
        {!isKeyboardVisible ? (
          <Text>Hidden when keyboard is visible</Text>
        ) : null}
      </>
    );
  }}
</KeyboardAccessoryView>

Keyboard Accessory Navigation

Import react-native-keyboard-accessory

import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory'

And use it inside your render() function:

<KeyboardAccessoryNavigation />

Important: KeyboardAccessoryNavigation should be positioned inside the Root Element which is covering the screen, mostly the top most view styled as { flex: 1 }.

For Ejected Apps

For Android, make sure you have set android:windowSoftInputMode to adjustResize in android/app/src/main/AndroidManifest.xml

And set androidAdjustResize to true. For example,

<KeyboardAccessoryView androidAdjustResize />
// or
<KeyboardAccessoryNavigation androidAdjustResize />

To maintain KeyboardAvoidingView behavior

<KeyboardAccessoryNavigation avoidKeyboard />

API

KeyboardAccessoryView

KeyboardAccessoryNavigation

All the KeyboardAccessoryView props will be passed.

KeyboardAwareTabBarComponent

Known Issues

• Accessory doesn't follow keyboard when closed with drag gesture.