react-native-keyboard-avoiding-scrollview

The modern React Native ScrollView extension that prevents inputs from being covered by the keyboard. Forked from react-native-keyboard-avoiding-scroll-view (that's right - with the hyphen) because it hasn't been maintained in over 6 years.

You should consider using react-native-keyboard-controller, which is actively maintained and has similar functionality. But it requires adopting react-native-reanimated, which has a variety of app-hanging and app-freezing issues, so this current package exists for folks who don't want the risk.

Getting started

$ yarn add @fivecar/react-native-keyboard-avoiding-scrollview OR $ npm install @fivecar/react-native-keyboard-avoiding-scrollview --save

Usage

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

import {KeyboardAvoidingScrollView} from '@fivecar/react-native-keyboard-avoiding-scrollview';

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

Props

• Inherited ScrollView props...

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

• stickyFooter

• containerStyle

---

Reference

Props

stickyFooter

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 behavior for a submit button.

Type	Required
React.ReactNode	No

---

containerStyle

Used to style the container component.

Type	Required
StyleProp<ViewStyle>	No

License

MIT License