React Native Keyboard Aware Scroll View

What is React Native Keyboard Aware Scroll View?

React Native Keyboard Aware Scroll View is a widely-used library specifically developed for React Native applications. It provides a scrollable view that automatically adjusts its content when the keyboard appears. By intelligently handling keyboard events, this library ensures that the content remains visible and not obscured by the keyboard, resulting in a seamless user experience.

Installations and Supported Versions

To integrate React Native Keyboard Aware Scroll View into your project, follow these installation steps:

Install the library using npm or yarn. Open your terminal and run the following command:

or

Import the library into your React Native project by adding the following line of code:

React Native Keyboard Aware Scroll View is compatible with React Native versions 0.60 and above.

APIs

React Native Keyboard Aware Scroll View offers a range of APIs that enable developers to customize and control the behavior of the scroll view. Some essential APIs include:

• innerRef: Catch the component's reference.
• viewIsInsideTabBar: adds an offset to account for the TabBarIOS height.
• resetScrollToCoords: When the keyboard hides, these coordinates will be utilized to reset the scroll.
• enableAutomaticScroll: The default setting is enabled while the TextInput is the focus.
• extraHeight: While focussing the TextInputs, add offset.
• extraScrollHeight: makes the keyboard's offset larger. Useful for sticking things above the keyboard.
• enableResetScrollToCoords: enables or disables automatic resetScrollToCoords for the user.
• keyboardOpeningTime: the delay time before scrolling to a new place, with a default value of 250
• enableOnAndroid: Enable Support for Android

Methods

• getScrollResponder: Get ScrollResponder
• scrollToPosition: Scroll to a certain position, either animated or not.
• scrollToEnd: With or without animation, scroll until the end.
• scrollIntoView: brings into view a specific element inside a KeyboardAwareScrollView.

Use Cases

React Native Keyboard Aware Scroll View proves to be valuable in various use cases, including:

• Forms and input screens:
  When building forms or screens with multiple text input fields, the scroll view ensures that the focused field is always visible and not hidden behind the keyboard.
• Chat applications:
  In chat apps, the scroll view automatically adjusts its content to keep the ongoing conversation visible, preventing it from being covered by the keyboard.
• Comment sections:
  When implementing comment sections in an app, React Native Keyboard Aware Scroll View helps in providing a smooth user experience. It ensures that users can view and interact with the comments without the keyboard obstructing their view.
• Search screens:
  In apps with search functionality, React Native Keyboard Aware Scroll View allows users to easily input search queries without the keyboard hiding the search field.
• Image tagging or annotation:
  When working with image tagging or annotation features, React Native Keyboard Aware Scroll View ensures that the tags or annotations remain visible and editable even when the keyboard appears. This allows users to accurately position and interact with the tags without any obstruction.

You have the option to utilize the KeyboardAwareScrollView, KeyboardAwareSectionList, or KeyboardAwareFlatList components. These components accept the default props of ScrollView, SectionList, and FlatList, respectively. They incorporate a custom high-order component known as KeyboardAwareHOC to manage keyboard appearance. Additionally, you can employ the high-order component in any other component if desired.

AutoScroll with TextInput Fields

One of the standout features of React Native Keyboard Aware Scroll View is its ability to provide automatic scrolling functionality when TextInput fields receive focus. This means that when a TextInput field is focused and the keyboard appears, the scroll view will automatically scroll to ensure the field remains visible.

Programatically scroll to any TextInput: To scroll to a specific TextInput field, you can make use of the pre-existing method called "scrollToFocusedInput."

Example:

Programatically scroll to any position: Another available built-in function allows you to programmatically scroll to any desired position within the scroll view:

Registering to Keyboard Events

React Native Keyboard Aware Scroll View simplifies the process of registering callbacks for keyboard events. By utilizing the onKeyboardWillShow and onKeyboardWillHide events, developers can perform custom actions when the keyboard appears or disappears. This functionality allows for further customization and enhances the overall user experience.

Android Support

React Native Keyboard Aware Scroll View seamlessly supports both iOS and Android platforms. It handles keyboard events and adjusts the scroll view accordingly, ensuring consistent behavior across different devices and operating systems. Whether you are developing for iOS or Android, this library has got you covered.

To utilize features such as extraHeight and ensure Android support, follow the steps outlined below:

• Verify that your React Native version is 0.46 or higher.
• In the AndroidManifest.xml file, set the windowSoftInputMode to adjustPan. This ensures proper adjustment of the window when the keyboard appears.
• Enable the enableOnAndroid property by setting it to true. This allows the library to function correctly on Android devices.