Perfect TextInput ScrollView
Switch branches/tags
Nothing to show
Clone or download
Latest commit 46bcb78 Jul 29, 2018
Permalink
Failed to load latest commit information.
__test__ v1.7.0 Jul 29, 2018
images v1.6.0 Nov 13, 2017
LICENSE update license Jun 9, 2018
README.md v1.7.0 Jul 29, 2018
index.d.ts scrollview methods types Apr 6, 2018
index.js v1.7.0 Jul 29, 2018
package.json v1.7.0 Jul 29, 2018
中文说明.md v1.7.0 Jul 29, 2018

README.md

react-native-input-scroll-view npm version

Mainly to achieve the following functions:

  • When the keyboard pops up, the TextInput will automatically adjust to the top of the keyboard.
  • When the keyboard pops up, the content of the ScrollView will not be obscured by the keyboard.
  • When multiline TextInput gets focus, the selected cursor will be automatically adjusted to the top of the keyboard.
  • When the multiline TextInput create new line, the new line will automatically adjust to the top of the keyboard.
  • Put your finger on top of TextInput and slide ScrollView, when you lift your finger, the TextInput will not get focus.

    

Installation

npm

$ npm install react-native-input-scroll-view --save

yarn

$ yarn add react-native-input-scroll-view

Usage

import InputScrollView from 'react-native-input-scroll-view';
...
state = {
    text: '',
};

render() {
    const { text } = this.state;
    return (
        <InputScrollView>
            <TextInput />
            <TextInput />
            <TextInput value={text}
                       onChangeText={text => this.setState({ text })}
                       multiline />
      	</InputScrollView>
    );
}

Note that if the cursor is to be correctly adjusted to the top of the keyboard, you must bind value to TextInput.

Multiline TextInput in the Android

Because in Android, the height of the Multiline TextInput cannot be changed according to its content, so we need to add additional processing code

import InputScrollView from 'react-native-input-scroll-view';
...

state = {
    text: '',
    textareaHeight: null,
};

render() {
    const { text, textareaHeight } = this.state;
    return (
        <InputScrollView>
            <TextInput />
            <TextInput />
            <TextInput style={{ height: textareaHeight }}
                       value={text}
                       onChangeText={text => this.setState({ text })}
                       onContentSizeChange={this._onContentSizeChange}
                       multiline />
      	</InputScrollView>
    );
}

_onContentSizeChange = ({nativeEvent:event}) => {
    this.setState({ textareaHeight: event.contentSize.height });
};

Props

Property Type Default Description
keyboardOffset number 40 When automatic adjustment, the cursor relative to the top of the keyboard offset.
multilineInputStyle Style null If your multiline TextInput has a specific style, to ensure that the cursor can be accurately adjusted to the top of the keyboard, this is set as a multiline TextInput style, The style attributes that mainly include fontSizefontFamilylineHeight etc. affect the position of the cursor. Be careful not to include width and height.
useAnimatedScrollView bool false Replace regular ScrollView component with Animated.ScrollView component.
...ScrolView.props props All props from ScrollView are inherited. Check them here: https://facebook.github.io/react-native/docs/scrollview.html

ENV

"react": "^16.0.0-alpha.12"
"react-native": ">=0.46.0"

Produt case

App_Store

License

MIT