react-native-input-scroll-view

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>
    );
}

React-native-input-scroll-view automatically modify onContentSizeChange, onSelectionChange, and onChange TextInput props. It is not yet designed to pass them down if the TextInput is wrapped into another component so don’t forget to do it:

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

const MyComponent = props => (
    <View>
        <TextInput {...props} />
    </View>
);
...

state = {
    text: '',
};

render() {
    const { text } = this.state;
    return (
        <InputScrollView>
            <MyComponent value={text}
                         onChangeText={text => this.setState({ text })}
                        />
      	</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

If your ReactNative version is on or above v0.57, skip this section.

Before a certain version of ReactNative, multiline TextInput height on an Android device could not change properly based on 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
`topOffset`	`number`	`undefined`	The offset of the `InputScrollView` relative to the top of the window. When the screen contains `TopBar`, it is usually set to the height of `TopBar`. If not explicitly set, the program will automatically determine, but may cause problems. issues#43。
`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 `fontSize`、`fontFamily`、`lineHeight` 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.
`supportHardwareKeyboard`	`bool`	`false`	`beta` If your device does not use a soft keyboard, try using this parameter to solve the problem. issues#69
`keyboardAvoidingViewProps`	`props`	`null`	`KeyboardAvoidingView` component Props. Check them here: https://facebook.github.io/react-native/docs/keyboardavoidingview
`...ScrollView.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"

Product case

License

MIT

baijunjie/react-native-input-scroll-view

baijunjie

Reviews

Repository Details