Home

Awesome

react-native-keyboard-accessory

npm version npm total downloads npm weekly downloads

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

IOS View Example IOS Navigation Example

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

PropTypeDefaultDescription
styleobjectnullStyle object or StyleSheet reference which will be applied to Accessory View
animateOnenum:string'ios'Enables show/hide animation on given platform. Values: ['ios', 'android', 'all', 'none'].
animationConfigfunction or objectnullFor 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.
alwaysVisiblebooleanfalseWhen set to true Accessory View will be always visible at the bottom of the screen. Good for sticky TextInput's
bumperHeightnumber15Bumper height to prevent visual glitches if animation couldn't keep up with the keyboard animation.
visibleOpacitynumber1Opacity of the Accessory when it is visible. Note: Opacity is used for hiding the accessory to prevent render delays.
heightPropertyenum:stringheightControl 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']
hiddenOpacitynumber0Opacity of the Accessory when it is hidden.
hideBorderbooleanfalseSet true if you want to hide top border of the Accessory
inSafeAreaViewbooleanfalseSet true if you want to adapt SafeAreaView on iPhone X
androidAdjustResizebooleanfalseSet true in ejected apps to adjust resize
avoidKeyboardbooleanfalseSet 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.

PropTypeDefaultDescription
doneButtonTitlestring'Done'Title text to show on the right Button of Navigation View
tintColorstring'#007AFF'Tint color for the arrows and done button
doneButtonnodenullReplace default Done Button. Non-Touchable node should be provided.
nextButtonnodenullReplace default Next Button. Non-Touchable node should be provided.
previousButtonnodenullReplace default Previous Button. Non-Touchable node should be provided.
doneDisabledbooleanfalseDisables Done Button
nextDisabledbooleanfalseDisables Next Button
previousDisabledbooleanfalseDisables Previous Button
doneHiddenbooleanfalseHides Done Button
nextHiddenbooleanfalseHides Next Button
previousHiddenbooleanfalseHides Previous Button
accessoryStyleobjectnullStyle object or StyleSheet reference which will be applied to Navigation Accessory View.
doneButtonStyleobjectnullStyle object or StyleSheet reference which will be applied to Done Button View
doneButtonTitleStyleobjectnullStyle object or StyleSheet reference which will be applied to Done Button Text
doneButtonHitslopInsets{ left: 0, top: 0, right: 0, bottom: 0 }This defines how far your touch can start away from the doneButton
previousButtonStyleobject0Style object or StyleSheet reference which will be applied to Previous Button View
nextButtonStyleobject0Style object or StyleSheet reference which will be applied to Next Button View
nextButtonDirectionenum:string'down'Arrow direction for the Next Button. Values: ['down', 'up', 'right', 'left'].
nextButtonHitslopInsets{ left: 0, top: 0, right: 0, bottom: 0 }This defines how far your touch can start away from the nextButton
previousButtonDirectionenum:string'up'Arrow direction for the Previous Button. Values: ['down', 'up', 'right', 'left'].
previousButtonHitslopInsets{ left: 0, top: 0, right: 0, bottom: 0 }This defines how far your touch can start away from the previousButton
onDonefunctionnullTriggered on Done Button press
onNextfunctionnullTriggered on Next Button press
onPreviousfunctionnullTriggered on Previous Button press

KeyboardAwareTabBarComponent

PropTypeDefaultDescription
TabBarComponentnode, functionProvide TabBarComponent to render. Usually from react-navigation

Known Issues