React-native how to move screen up on textinput
In 2017 (RN 0.43) there is special component for this: KeyboardAvoidingView
You can use ScrollView to control screen up and down movements. As long as user hasn't focused any TextInput
, you can disable scroll. On focus, just shift up the scrollview using Content Offset prop.
<TextInput
onFocus={this.textInputFocused.bind(this)}
/>
textInputFocused() {
//do your stuff here. scroll screen up
}
Hope it helps!
Night Fury's answer is pretty good, though wouldn't fuss with the ScrollView's contentOffset
, I'd use the ScrollResponder
:
render() {
return (
<ScrollView ref="myScrollView">
<TextInput
ref="myInput"
onFocus={this._scrollToInput.bind(this)}
/>
</ScrollView>
);
}
_scrollToInput {
const scrollResponder = this.refs.myScrollView.getScrollResponder();
const inputHandle = React.findNodeHandle(this.refs.myInput)
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
inputHandle, // The TextInput node handle
0, // The scroll view's bottom "contentInset" (default 0)
true // Prevent negative scrolling
);
}
See the method definition: scrollResponderScrollNativeHandleToKeyboard