Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@codler/react-native-keyboard-aware-scroll-view

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@codler/react-native-keyboard-aware-scroll-view

A React Native ScrollView component that resizes when the keyboard appears.

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

Scroll demo

Supported versions

  • v2.0.0 requires RN>=0.65.1
  • v1.0.0 requires RN>=0.63.0

Installation

Installation can be done through npm:

npm i @codler/react-native-keyboard-aware-scroll-view --save

Usage

You can use the KeyboardAwareScrollView, KeyboardAwareSectionList or the KeyboardAwareFlatList components. They accept ScrollView, SectionList and FlatList default props respectively and implement a custom high order component called KeyboardAwareHOC to handle keyboard appearance. The high order component is also available if you want to use it in any other component.

Import react-native-keyboard-aware-scroll-view and wrap your content inside it:

import { KeyboardAwareScrollView } from '@codler/react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Auto-scroll in TextInput fields

As of v0.1.0, the component auto scrolls to the focused TextInput 😎. For versions v0.0.7 and older you can do the following.

Programatically scroll to any TextInput

In order to scroll to any TextInput field, you can use the built-in method scrollToFocusedInput. Example:

_scrollToInput (reactNode: any) {
  // Add a 'scroll' ref to your ScrollView
  this.scroll.props.scrollToFocusedInput(reactNode)
}
<KeyboardAwareScrollView
  innerRef={ref => {
    this.scroll = ref
  }}>
  <View>
    <TextInput
      onFocus={(event: Event) => {
        // `bind` the function if you're using ES6 classes
        this._scrollToInput(ReactNative.findNodeHandle(event.target))
      }}
    />
  </View>
</KeyboardAwareScrollView>

Programatically scroll to any position

There's another built-in function that lets you programatically scroll to any position of the scroll view:

this.scroll.props.scrollToPosition(0, 0)

Register to keyboard events

You can register to ScrollViewResponder events onKeyboardWillShow and onKeyboardWillHide:

<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Android Support

First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml. Check here.

But if you want to use feature like extraHeight, you need to enable Android Support with the following steps:

  • Make sure you are using react-native 0.46 or above.
  • Set windowSoftInputMode to adjustPan in AndroidManifest.xml.
  • Set enableOnAndroid property to true.

Android Support is not perfect, here is the supported list:

PropAndroid Support
viewIsInsideTabBarYes
resetScrollToCoordsYes
enableAutomaticScrollYes
extraHeightYes
extraScrollHeightYes
enableResetScrollToCoordsYes
keyboardOpeningTimeNo

API

Props

All the ScrollView/FlatList props will be passed.

PropTypeDescription
innerRefFunctionCatch the reference of the component.
viewIsInsideTabBarbooleanAdds an extra offset that represents the TabBarIOS height.
resetScrollToCoordsObject: {x: number, y: number}Coordinates that will be used to reset the scroll when the keyboard hides.
enableAutomaticScrollbooleanWhen focus in TextInput will scroll the position, default is enabled.
extraHeightnumberAdds an extra offset when focusing the TextInputs.
extraScrollHeightnumberAdds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard.
enableResetScrollToCoordsbooleanLets the user enable or disable automatic resetScrollToCoords.
keyboardOpeningTimenumberSets the delay time before scrolling to new position, default is 250
enableOnAndroidbooleanEnable Android Support

Methods

Use innerRef to get the component reference and use this.scrollRef.props to access these methods.

MethodParameterDescription
getScrollRespondervoidGet ScrollResponder
scrollToPositionx: number, y: number, animated: bool = trueScroll to specific position with or without animation.
scrollToEndanimated?: bool = trueScroll to end with or without animation.
scrollIntoViewelement: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }Scrolls an element inside a KeyboardAwareScrollView into view.

Using high order component

Enabling any component to be keyboard-aware is very easy. Take a look at the code of KeyboardAwareFlatList:

/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

export default listenToKeyboardEvents(FlatList)

The HOC can also be configured. Sometimes it's more convenient to provide a static config than configuring the behavior with props. This HOC config can be overriden with props.

/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

const config = {
  enableOnAndroid: true,
  enableAutomaticScroll: true
}

export default listenToKeyboardEvents(config)(FlatList)

The available config options are:

{
  enableOnAndroid: boolean,
  contentContainerStyle: ?Object,
  enableAutomaticScroll: boolean,
  extraHeight: number,
  extraScrollHeight: number,
  enableResetScrollToCoords: boolean,
  keyboardOpeningTime: number,
  viewIsInsideTabBar: boolean,
  refPropName: string,
  extractNativeRef: Function
}

Keywords

FAQs

Package last updated on 10 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc