React Native ScrollView extension that prevents inputs from being covered by the keyboard.

$ npm install react-native-keyboard-avoiding-scroll-view --save

Import KeyboardAvoidingScrollView, KeyboardAvoidingFlatList, or KeyboardAvoidingSectionList and use them like the regular ScrollView, FlatList or SectionList components from React Native core. Internally, these components are wrapped in another custom component called KeyboardAvoidingContainer, which is also exported for advanced use cases.

import {KeyboardAvoidingScrollView} from 'react-native-keyboard-avoiding-scroll-view';

function MyComponent() {
  return (
    <KeyboardAvoidingScrollView stickyFooter={<Button />}>
      <TextInput />
      <TextInput />
      <TextInput />
    </KeyboardAvoidingScrollView>
  )
}

• Inherited ScrollView props...

  • or inherited FlatList props...
  • or inherited SectionList props...

• stickyFooter

• containerStyle

Used to display a fixed view under the scrollable content. Sticky footer is always shown above the keyboard, which could, for example, be the desired behaviour for a submit button.

Used to style the container component.

MIT License © Alka, Inc