I'm building an Android app with React Native.
How can you force a TextInput
to "unFocus", meaning the cursor is blinking inside the text field. There are functions for isFocused()
and onFocus()
, but how do I actually get the text field to give up focus. You would think it does so automatically once I hit enter, but that's not the case.
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} })
This probably won't matter as much for real users but I'm just emulating and its pesky if I want to reload.