Skip to content
Created by artald
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example example project: upgrade to RN 0.59 Apr 17, 2019
src Updated to 0.51.0 and changed import of PropTypes Jan 2, 2018
.gitignore support a keyboard-aware ListView Apr 12, 2016
.npmignore added .npmignore + version bump May 30, 2016
README.md Update README.md Apr 21, 2016
index.js support a keyboard-aware ListView Apr 12, 2016
package.json 2.0.0 Jan 2, 2018

README.md

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:

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

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

<KeyboardAwareScrollView style={styles.container}>
    <TextInput style={styles.textInput} placeholder={'My Input'}/>
</KeyboardAwareScrollView>

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:

<KeyboardAwareScrollView style={styles.container} getTextInputRefs={() => { return [this._textInputRef];}}>
    <TextInput style={styles.textInput} placeholder={'My Input'} ref={(r) => { this._textInputRef = r; }}/>
</KeyboardAwareScrollView>

Example Project

Check out the full example project here.

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

You can’t perform that action at this time.