react-native-keyboard-avoid v1.2.0

react-native-keyboard-avoid

Component that handles keyboard appearance and automatically make any component node to keep out keyboard. Work with TextInput,View and so on.

Supported versions

• v1.0.0 requires RN>=0.20

Installation

Installation can be done through npm or yarn:

npm i react-native-keyboard-avoid --save

yarn add react-native-keyboard-avoid

Usage

You just need use this KeyboardAvoid on whatever you want to keep out from native keyboard view. It accept ScrollView, ListView, FlatList and any other View component. There will show you 3 example.

1.With something in ScrollView or ListView, FlatList

import KeyboardAvoid from 'react-native-keyboard-avoid';

_onFocus () {
	KeyboardAvoid.checkNeedScroll({
	    nodeRef: this.titleInput, 		    //TextInput ref
	    scrollNodeRef: this.scrollView,     //ScrollView ref
	    contentOffset: this.contentOffset   //ScrollView scrollOffset.y
	}, 'scroll', 0);
}

<ScrollView 
    ref={(ref) => this.scrollView = ref}
    style={{flex: 1}}
    scrollEventThrottle={3}
    onScroll={(event) => {this.contentOffset = event.nativeEvent.contentOffset.y}}>

    <View style={{justifyContent: 'space-between', flexDirection: 'row'}}>
        <TextInput
            style={BaseStyles.textInputBase}
            ref={(ref) => this.titleInput = ref}
            returnKeyType={"search"}
            onFocus={() => this._onFocus()}/>
        <Button style={[BaseStyles.iconBase, {margin: 5, color: '#333'}]}>Search</Button>
    </View>
</ScrollView>

or 

<FlatList
    ref={(ref) => this.scrollView = ref}
    onScroll={(event) => {this.contentOffset = event.nativeEvent.contentOffset.y;}}/>

2.With component which use position: 'absolute'

import KeyboardAvoid from 'react-native-keyboard-avoid';

_onPress () {
	this.aTextInput.focus();
	KeyboardAvoid.checkNeedScroll({
       nodeRef: this.footer
   }, 'position', 0);
}

<View ref={(ref) => this.footer = ref}
    style={{
        width: config.width, 
        position: 'absolute', 
        bottom: 0, 
        height: 50,
        backgroundColor: 'lightblue',
        zIndex: 4
    }}>
    <TouchableOpacity onPress={() => this._onPress()}>
    	<Text style={{color: 'white', lineHeight: 50}}>浮低</Text>
    </TouchableOpacity>
</View>

3.With two components one use position and one use scroll

import KeyboardAvoid from 'react-native-keyboard-avoid';

_onPressAndFocus () {
	KeyboardAvoid.checkNeedScroll({
        nodeRef: this.titleInput, 
        scrollNodeRef: this.scrollView, 
        contentOffset: this.contentOffset
    }, 'scroll', 50);
    KeyboardAvoid.checkNeedScroll({
        nodeRef: this.footer
    }, 'position');
}

Methods

API

KeyboardAvoid.checkNeedScroll(params, type='scroll', offset=0)

Prame

params {object}

type {string}

offset {number}

target offset from the top of keyboard onScroll={(event) => {this.contentOffset = event.nativeEvent.contentOffset.y}}

License MIT