React-native how to move screen up textinput

Question

I have a login screen created using reaction-native.

How can I change my screen when a user enters text in a text box?

Am I listening to the onFocus () event and using CSS style to change presentation style?

Answer 1

You can use ScrollView to control up and down movements. While the user has not focused TextInput , you can disable scrolling . In focus mode, just slide the scrollview using Content Mapping .

 <TextInput onFocus={this.textInputFocused.bind(this)} /> textInputFocused() { //do your stuff here. scroll screen up } 

Hope this helps!

Answer 2

In 2017 (RN 0.43) there is a special component for this: KeyboardAvoidingView

Answer 3

The answer to night rage is pretty good, but won't fuss with ScrollView contentOffset , I would use 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 bottom "contentInset" (default 0) true // Prevent negative scrolling ); } 

See method definition: scrollResponderScrollNativeHandleToKeyboard

Answer 4

This package performs a greate job, introduces the KeyboardAwareScrollView component, which scrolls the view to enter keyboard input, and then scrolls down.

Answer 5

And another solution that works with RN 0.2, this time instead of crushing the contents that it scrolls.

  inputFocused: function(ref) { this._scroll(ref, 75); }, inputBlurred: function(ref) { this._scroll(ref, 0); }, _scroll: function(ref, offset) { setTimeout(() => { var scrollResponder = this.refs.myScrollView.getScrollResponder(); scrollResponder.scrollResponderScrollNativeHandleToKeyboard( React.findNodeHandle(this.refs[ref]), offset, true ); }); }, 

...

 render: function() { return <View style={{flex: 1}}> <ScrollView ref="myScrollView" keyboardDismissMode='interactive' contentContainerStyle={{flex: 1}}> <TextInput ref="myInput" onFocus={this.inputFocused.bind(this, 'myInput')} onBlur={this.inputBlurred.bind(this, 'myInput')} /> </ScrollView> </View> } 

Answer 6

This is crappy shooting to get ScrollView's built-in keyboard functionality. For my Android application, it works fine on one screen, which is almost identical to another, for which it does not work. And on iOS, it just doesn't work. This is what works for me:

 import { Keyboard, ScrollView, StyleSheet, View } from 'react-native'; this.state = { filler: false, } componentWillMount() { this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this)); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this)); } componentWillUnmount() { this.keyboardDidShowListener.remove(); this.keyboardDidHideListener.remove(); } _keyboardDidShow() { this.setState({filler: true}) setTimeout(() => this.vertical && this.vertical.scrollToEnd({animated: true}), 0); } _keyboardDidHide() { this.setState({filler: false}) } ... return ( <ScrollView ref={ref => this.vertical = ref}> <TextInput/> { this.state.filler ? <View style={styles.filler}/> : null } </ScrollView> ) styles.filler = { height: 'Keyboard Height' } 

Note. This can only work if your <TextInput/> is at the bottom of the screen, which was in my case.

Answer 7

Try setting multiline={true} prop for TextInput. It worked for me.

Answer 8

 import {KeyboardAvoidingView} from 'react-native'; <KeyboardAvoidingView style={styles.container} behavior="padding" enabled> <Text style={{height: 100, marginTop: 30}}> test text before input</Text> <Text style={{height: 100, marginTop: 30}}> test text before input</Text> <Text style={{height: 100, marginTop: 30}}> test text before input</Text> <Text style={{height: 100, marginTop: 30}}> test text before input</Text> <Text style={{height: 100, marginTop: 30}}> test text before input</Text> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text} /> <Text style={{height: 100, marginTop: 20}}>1 test text after input</Text> <Text style={{height: 100, marginTop: 20}}>2 test text after input</Text> <Text style={{height: 100, marginTop: 20}}>3 test text after input</Text> <Text style={{height: 100, marginTop: 20}}>4 test text after input</Text> <Text style={{height: 100, marginTop: 20}}>5 test text after input</Text> </KeyboardAvoidingView> 

Run a bite to eat: https://snack.expo.io/H1BE5ZoXV