https://github.com/wix/react-native-keyboard-aware-scrollview

Created by artald
https://github.com/wix/react-native-keyboard-aware-scrollview

Last synced: 2 months ago
JSON representation

Created by artald

• Host: GitHub
• URL: https://github.com/wix/react-native-keyboard-aware-scrollview
• Owner: wix-incubator
• License: mit
• Created: 2016-04-05T21:37:44.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-20T23:10:03.000Z (about 1 year ago)
• Last Synced: 2024-05-23T02:34:38.372Z (6 months ago)
• Language: JavaScript
• Size: 16 MB
• Stars: 487
• Watchers: 45
• Forks: 97
• Open Issues: 51
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-reactnative-ui - react-native-keyboard-aware-scrollview
• awesome-reactnative-ui - react-native-keyboard-aware-scrollview

README

        
# react-native-keyboard-aware-scrollview

A helper component meant to be used as a drop-in replacement for RN ScrollView which handles the ScrollView insets properly when the keyboard is shown or hides so all the content is scrollable and available to the user.

## Installation

Install using `npm`:

```

npm i react-native-keyboard-aware-scrollview --save

```

## How To Use

Simply import the new component:

```js

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scrollview'

```

Now use it as you would normally do with a `ScrollView` to wrap arround TextInput components:

```jsx

    

```

#### Auto-Scrolling for TextInput components

Normally this component will just take care of handling the content inset. If you wish for `KeyboardAwareScrollView` to automatically scroll to a TextInput that gets focus (so it's ensured to be visible), you can add an attribute called `getTextInputRefs` - a callback in which you can return an array of references to the TextInput components that auto-scrolling to be handled for. `KeyboardAwareScrollView` will look for the focused TextInput in the array and make sure it's visible by scrolling to it's location.

Example:

```jsx

 { return [this._textInputRef];}}>

     { this._textInputRef = r; }}/>

```

## Example Project

Check out the full example project [here](https://github.com/wix/react-native-keyboard-aware-scrollview/tree/master/example).

In the example folder, perform `npm install` and then run it from the Xcode project.