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 slideScrollView
, when you lift your finger, theTextInput
will not get focus.
npm
$ npm install react-native-input-scroll-view --save
yarn
$ yarn add react-native-input-scroll-view
Does not contain multiline TextInput
import InputScrollView from 'react-native-input-scroll-view';
...
state = {
text: '',
};
render() {
const { text } = this.state;
return (
<InputScrollView>
<TextInput />
<TextInput />
<TextInput value={this.state.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
.
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 });
};
default: 40
When automatic adjustment, the cursor relative to the top of the keyboard offset.
default: { fontSize: 17 }
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
.
"react": "^16.0.0-alpha.12"
"react-native": ">=0.46.0"
MIT