react-native-keyboard-aware-next

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

Supported versions

• v0.0.1 requires RN>=0.62.0-rc.0

Installation

Installation can be done through npm or yarn:

npm i react-native-keyboard-aware-next --save

yarn add react-native-keyboard-aware-next

Usage

You can use the KeyboardAwareScrollView, KeyboardAwareSectionList or the KeyboardAwareFlatList components. They accept ScrollView, SectionList and FlatList default props respectively and implement handle keyboard appearance.

Import react-native-keyboard-aware-next and wrap your content inside it:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-next'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Auto-scroll in TextInput fields

As of v0.1.0, the component auto scrolls to the focused TextInput 😎

Programatically scroll to any position

There's another built-in function that lets you programatically scroll to any position of the scroll view:

this.scroll.props.scrollToPosition(0, 0)

Register to keyboard events

You can register to ScrollViewResponder events onKeyboardWillShow and onKeyboardWillHide:

<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Android Support

First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml. Check here.

But if you want to use feature like extraHeight, you need to enable Android Support with the following steps:

• Make sure you are using react-native 0.46 or above.
• Set windowSoftInputMode to adjustPan in AndroidManifest.xml.
• Set enableOnAndroid property to true.

Android Support is not perfect, here is the supported list:

| Prop | Android Support | | --------------------------- | ------------------- | | viewIsInsideTabBar | Yes | | resetScrollToCoords | Yes | | enableAutomaticScroll | Yes | | extraHeight | Yes | | extraScrollHeight | Yes | | enableResetScrollToCoords | Yes | | keyboardOpeningTime | No |

API

Props

All the ScrollView/FlatList props will be passed.

| Prop | Type | Description | | --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- | | innerRef | Function | Catch the reference of the component. | | viewIsInsideTabBar | boolean | Adds an extra offset that represents the TabBarIOS height. | | resetScrollToCoords | Object: {x: number, y: number} | Coordinates that will be used to reset the scroll when the keyboard hides. | | enableAutomaticScroll | boolean | When focus in TextInput will scroll the position, default is enabled. | | extraHeight | number | Adds an extra offset when focusing the TextInputs. | | extraScrollHeight | number | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | | enableResetScrollToCoords | boolean | Lets the user enable or disable automatic resetScrollToCoords. | | keyboardOpeningTime | number | Sets the delay time before scrolling to new position, default is 250 | | enableOnAndroid | boolean | Enable Android Support |

Methods

Use innerRef to get the component reference and use this.scrollRef.props to access these methods.

| Method | Parameter | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | | getScrollResponder | void | Get ScrollResponder | | scrollToPosition | x: number, y: number, animated: bool = true | Scroll to specific position with or without animation. | | scrollToEnd | animated?: bool = true | Scroll to end with or without animation. | | scrollIntoView | element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } } | Scrolls an element inside a KeyboardAwareScrollView into view. |

The available config options are(set in props):

{
  enableOnAndroid: boolean,
  contentContainerStyle: ?Object,
  enableAutomaticScroll: boolean,
  extraHeight: number,
  extraScrollHeight: number,
  enableResetScrollToCoords: boolean,
  keyboardOpeningTime: number,
  viewIsInsideTabBar: boolean,
  refPropName: string,
  extractNativeRef: Function
}

License

MIT.

Author

Built with 💛 by killserver.