rn-keyboard-aware-scrollview

A React Native ScrollView component that automatically scrolls to keep focused TextInput fields visible when the keyboard appears. Supports iOS and Android.

Why

Dealing with keyboards in React Native can be a hassle. When a keyboard appears, it can cover the TextInput field you're trying to edit. This component is a drop-in replacement for the standard ScrollView that seamlessly and automatically scrolls to keep the focused TextInput visible, providing a smooth user experience on both iOS and Android.

Demo

Installation

npm install rn-keyboard-aware-scrollview
npm install react-native-reanimated

Follow the React Native Reanimated installation steps for your app before using this package.

Usage

import { TextInput, View } from 'react-native';
import { useAnimatedScrollHandler } from 'react-native-reanimated';
import { KeyboardAwareScrollView } from 'rn-keyboard-aware-scrollview';

function MyForm() {
  const onScroll = useAnimatedScrollHandler({
    onScroll: (event) => {
      // Your animated header or scroll-linked worklet can run here.
    },
  });

  return (
    <KeyboardAwareScrollView onScroll={onScroll} scrollEventThrottle={16}>
      <View>
        <TextInput placeholder="Field 1" />
        <TextInput placeholder="Field 2" />
        <TextInput placeholder="Field 3" />
      </View>
    </KeyboardAwareScrollView>
  );
}

Props

| Prop | Type | Default | Description | | ------------------------------ | -------------------------------------- | --------------------------------------------- | ------------------------------------- | | ref | Ref<ComponentRef<typeof ScrollView>> | - | Access the inner ScrollView instance | | extraScrollHeight | number | 30 | Extra padding below the focused input | | enableOnAndroid | boolean | true | Enable keyboard handling on Android | | keyboardShouldPersistTaps | 'always' \| 'never' \| 'handled' | 'handled' | Keyboard persistence behavior | | keyboardDismissMode | 'none' \| 'on-drag' \| 'interactive' | 'interactive' (iOS) / 'on-drag' (Android) | Keyboard dismiss behavior | | showsVerticalScrollIndicator | boolean | false | Show scroll indicator | | onScroll | Animated.ScrollView onScroll | - | Composed with internal scroll tracking | | scrollEventThrottle | number | 16 | Scroll event throttle | | bounces | boolean | false | Enable bounce effect (iOS) | | style | StyleProp<ViewStyle> | - | Style for the ScrollView | | contentContainerStyle | StyleProp<ViewStyle> | - | Style for the content container |

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library