1 RN Thing a Day – Day 7: KeyboardAwareScrollView

KeyboardAwareScrollView is a component from the react-native-keyboard-aware-scroll-view library that helps handle keyboard interactions in React Native. It ensures that input fields remain visible when the keyboard appears, preventing them from being covered.

Usage:
Here's a simple example of how to use KeyboardAwareScrollView:

import React from 'react';
import { TextInput, View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const MyScreen = () => {
  return (
    <KeyboardAwareScrollView
      style={{ flex: 1, padding: 16 }}
      contentContainerStyle={{ flexGrow: 1 }}
      enableOnAndroid={false} //  true by default
      extraScrollHeight={0} // Adjusts scrolling space when the keyboard  is open , 75 by default
      keyboardShouldPersistTaps="handled" //"never" by default
      showsVerticalScrollIndicator: false
      bounces: false
    >
      <View>
        <Text>Enter your details:</Text>
        <TextInput
          placeholder="Type here..."
          style={{
            height: 50,
            borderWidth: 1,
            borderColor: '#ccc',
            marginVertical: 10,
            paddingHorizontal: 10,
          }}
        />
      </View>
    </KeyboardAwareScrollView>
  );
};

export default MyScreen;

Key Props:

• enableOnAndroid={false}: Disables keyboard awareness on Android. If you need input fields to move up when the keyboard appears, you might want this set to true.
• extraScrollHeight={0}: No additional space is added when the keyboard appears. If inputs get covered, consider increasing this value (e.g., extraScrollHeight: 20).
• keyboardShouldPersistTaps=" handled": Allows taps on the screen to dismiss the keyboard.
• showsVerticalScrollIndicator: "false": Hides the vertical scrollbar, which might be good for a cleaner
• contentContainerStyle={{ flexGrow: 1 }}: Ensures content is scrollable when necessary.
• bounces: "false": Prevents the slight bounce effect when reaching the top or bottom of the scrollable content.

List of other common KeyboardAwareScrollView props:

• enableAutomaticScroll – true (will scroll automatically to focused input).
• extraHeight – 0 (no extra height unless set).
• keyboardOpeningTime – 250 (ms delay before scrolling).
• viewIsInsideTabBar – false (no adjustment unless inside tab bar).
• enableResetScrollToCoords – true (scroll resets when keyboard hides).
• contentContainerStyle – undefined (no default styles).
• showsVerticalScrollIndicator – true (scroll bar visible).
• bounces – true (scroll view bounces at edges).
• horizontal – false (scrolls vertically by default).
• onScroll – undefined (no default scroll handler).
• pagingEnabled – false (no page snapping).
• onKeyboardWillShow – undefined (no default event handler).
• onKeyboardDidShow – undefined (no default event handler).
• onKeyboardWillHide – undefined (no default event handler).

If you don’t use KeyboardAwareScrollView:

• Input fields near the bottom may get covered by the keyboard.
• You’ll need to manually handle keyboard show/hide events.
• Scrolling to bring inputs into view won’t happen automatically.
• Different behavior on iOS vs Android may cause inconsistent UX.
• User may need to manually scroll to see what they’re typing.
• Small-screen devices will have worse usability.