Unfocus the TextInput in React Native

Question

I am building an Android app with React Native.

How can you force TextInput "unFocus", that is, the cursor blinks inside the text field. There are functions for isFocused() and onFocus() , but how can I get a text box to give up focus. You might think that he does this automatically as soon as I find the entrance, but it is not.

  import React, {Component} from 'react'; import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity} from 'react-native'; var SHA256 = require("crypto-js/sha256"); export default class LoginForm extends Component{ constructor(props){ super(props); this.state = { email: '', password:'' }; } tryLogin = () => { if(this.state.email=="email123" && this.state.password == "password"){ console.log("password verified"); this.props.navigator.replace({ title: 'Dashboard' }); } console.log(this.state.email); console.log(this.state.password); console.log("Hash" + SHA256(this.state.password)); } render(){ return( <View style={styles.container}> <TextInput style={styles.input} placeholder="Email address" placeholderTextColor="white" onChangeText={(email) => this.setState({email})}> </TextInput> <TextInput style={styles.input} placeholder="Password" placeholderTextColor="white" secureTextEntry onChangeText={(password) => this.setState({password})}> </TextInput> <TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}> <Text style={styles.loginButtonText}>LOGIN</Text> </TouchableOpacity> </View> ); } } AppRegistry.registerComponent('LoginForm', () => LoginForm); const styles = StyleSheet.create({ container: { padding: 20 }, input:{ height: 40, backgroundColor: '#e74c3c', marginBottom: 20, color: 'white', paddingHorizontal: 15, opacity: .9 }, loginButtonContainer:{ justifyContent: 'center', backgroundColor: '#bc4c3c', paddingVertical:15 }, loginButtonText:{ textAlign:'center', color:'white', fontWeight: '700', fontSize: 24 } }) 

It probably won't make much difference to real users, but I just imitate it and its annoying if I want to reboot.

Answer 1

I think it's better to use * ScrollView *, Keyboard.dismiss. When using * ScrollView *, when the user clicks outside of textInput, the keyboard closes. This is because the default ScrollView property for keyboardShouldPersistTaps is never set. This is the behavior that the user expects. To reject the keyboard or equivalently blur textInput when the user clicks on the login button, add Keyboard.dismissed () to the tryLogin function.

 import React, {Component} from 'react'; import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Keyboard} from 'react-native'; var SHA256 = require("crypto-js/sha256"); export default class LoginForm extends Component{ constructor(props){ super(props); this.state = { email: '', password:'' }; } tryLogin = () => { Keyboard.dismiss(); if(this.state.email=="email123" && this.state.password == "password"){ console.log("password verified"); this.props.navigator.replace({ title: 'Dashboard' }); } console.log(this.state.email); console.log(this.state.password); console.log("Hash" + SHA256(this.state.password)); } render(){ return( <ScrollView style={styles.container}> <TextInput style={styles.input} placeholder="Email address" placeholderTextColor="white" onChangeText={(email) => this.setState({email})}> </TextInput> <TextInput style={styles.input} placeholder="Password" placeholderTextColor="white" secureTextEntry onChangeText={(password) => this.setState({password})}> </TextInput> <TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}> <Text style={styles.loginButtonText}>LOGIN</Text> </TouchableOpacity> </ScrollView> ); } } AppRegistry.registerComponent('LoginForm', () => LoginForm); const styles = StyleSheet.create({ container: { padding: 20 }, input:{ height: 40, backgroundColor: '#e74c3c', marginBottom: 20, color: 'white', paddingHorizontal: 15, opacity: .9 }, loginButtonContainer:{ justifyContent: 'center', backgroundColor: '#bc4c3c', paddingVertical:15 }, loginButtonText:{ textAlign:'center', color:'white', fontWeight: '700', fontSize: 24 } }) 

Answer 2

You can use the Keyboard API.

 import { Keyboard, TextInput } from 'react-native'; <TextInput onSubmitEditing={Keyboard.dismiss} /> 

Please see the full example in the official white paper .

Answer 3

Found it really. It doesn’t look so beautiful, and my intuition says that it’s not a very “responsive” solution, but if you want it here, it is.

 <TextInput style={styles.input} ref="email_input" onSubmitEditing={() => this.refs['email_input'].blur()} placeholder="Email address" placeholderTextColor="white" onChangeText={(email) => this.setState({email})}/> 

Answer 4

I was able to solve this using this.ref link. First you assign TextInput ref , for example:

 <input ref="myInput" /> 

Then you call the blur () method for this.refs.myInput from the function

  blurTextInput(){ this.refs.myInput.blur() } 

Answer 5

The answer above works fine, but using string links is no longer recommended in React and is likely to be deprecated soon. Instead, you should use the callback function, which is called when rendering the component that you want to reference.

 <TextInput ref={(c: any) => { this.textInputRef = c; }} onSubmitEditing={() => this.textInputRef.blur()} /> 

If you use Flow, you can specify the type of your link by placing something like this outside your render function:

 textInputRef: ?TextInput;