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

| Prop | Type | Default | Description | |----------|----------|-------------|-----------------| | style | object | null | Style object or StyleSheet reference which will be applied to Accessory View | | animateOn | enum:string | 'ios' | Enables show/hide animation on given platform. Values: ['ios', 'android', 'all', 'none']. | | animationConfig | function or object | null | For passing custom animations to show/hide. If given prop is function, duration and easing parameters from Keyboard event will be passed to the function, function should return LayoutAnimation compatible animation config. Or you can directly pass animation config object. | | alwaysVisible | boolean | false | When set to true Accessory View will be always visible at the bottom of the screen. Good for sticky TextInput's | | bumperHeight | number | 15 | Bumper height to prevent visual glitches if animation couldn't keep up with the keyboard animation. | | visibleOpacity | number | 1 | Opacity of the Accessory when it is visible. Note: Opacity is used for hiding the accessory to prevent render delays. | | heightProperty | enum:string | height | Control how the component manages its height. The component listens for children changes and automatically adjusts its height, so height is usually sufficient. For use with a multiline, autogrowing TextInput, minHeight is recommended. Values: ['height', 'minHeight'] | | hiddenOpacity | number | 0 | Opacity of the Accessory when it is hidden. | | hideBorder | boolean | false | Set true if you want to hide top border of the Accessory | | inSafeAreaView | boolean | false | Set true if you want to adapt SafeAreaView on iPhone X | | androidAdjustResize | boolean | false | Set true in ejected apps to adjust resize | | avoidKeyboard | boolean | false | Set true if you want accessory to maintain KeyboardAvoidingView behavior. You shouldn't use any other Keyboard Avoiding library when you set this to true |

KeyboardAccessoryNavigation

All the KeyboardAccessoryView props will be passed.

| Prop | Type | Default | Description | |----------|----------|-------------|-----------------| | doneButtonTitle | string | 'Done' | Title text to show on the right Button of Navigation View | | tintColor | string | '#007AFF' | Tint color for the arrows and done button | | doneButton | node | null | Replace default Done Button. Non-Touchable node should be provided. | | nextButton | node | null | Replace default Next Button. Non-Touchable node should be provided. | | previousButton | node | null | Replace default Previous Button. Non-Touchable node should be provided. | | doneDisabled | boolean | false | Disables Done Button | | nextDisabled | boolean | false | Disables Next Button | | previousDisabled | boolean | false | Disables Previous Button | | doneHidden | boolean | false | Hides Done Button | | nextHidden | boolean | false | Hides Next Button | | previousHidden | boolean | false | Hides Previous Button | | accessoryStyle | object | null | Style object or StyleSheet reference which will be applied to Navigation Accessory View. | | doneButtonStyle | object | null | Style object or StyleSheet reference which will be applied to Done Button View | | doneButtonTitleStyle | object | null | Style object or StyleSheet reference which will be applied to Done Button Text | | doneButtonHitslop | Insets | { left: 0, top: 0, right: 0, bottom: 0 } | This defines how far your touch can start away from the doneButton | | previousButtonStyle | object | 0 | Style object or StyleSheet reference which will be applied to Previous Button View | | nextButtonStyle | object | 0 | Style object or StyleSheet reference which will be applied to Next Button View | | nextButtonDirection | enum:string | 'down' | Arrow direction for the Next Button. Values: ['down', 'up', 'right', 'left']. | | nextButtonHitslop | Insets | { left: 0, top: 0, right: 0, bottom: 0 } | This defines how far your touch can start away from the nextButton | | previousButtonDirection | enum:string | 'up' | Arrow direction for the Previous Button. Values: ['down', 'up', 'right', 'left']. | | previousButtonHitslop | Insets | { left: 0, top: 0, right: 0, bottom: 0 } | This defines how far your touch can start away from the previousButton | | onDone | function | null | Triggered on Done Button press | | onNext | function | null | Triggered on Next Button press | | onPrevious | function | null | Triggered on Previous Button press |

KeyboardAwareTabBarComponent

| Prop | Type | Default | Description | |----------|----------|-------------|-----------------| | TabBarComponent | node, function | | Provide TabBarComponent to render. Usually from react-navigation |

Known Issues

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