Mainly to achieve the following functions:
TextInput
will automatically adjust to the top of the keyboard.ScrollView
will not be obscured by the keyboard.TextInput
gets focus, the selected cursor will be automatically adjusted to the top of the keyboard.TextInput
create new line, the new line will automatically adjust to the top of the keyboard.TextInput
and slide ScrollView
, when you lift your finger, the TextInput
will not get focus.npm
$ npm install react-native-input-scroll-view --save
yarn
$ yarn add react-native-input-scroll-view
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
.
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 });
};
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. |
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 |
"react": "^16.0.0-alpha.12"
"react-native": ">=0.46.0"
Author: baijunjie
GitHub: https://github.com/baijunjie/react-native-input-scroll-view
#react-native #programming