How to focus one textinput per time in react-native? - react-native

Question

I have 3 different textinput, textinput1, textinput2 and textinput 3.
I want that when i click on textinput1 that his bordercolor be blue, i did that and works.
What i want now is, when i click on textinput2 to textinput1 be back to his orignal color and the textinput2 be blue now.
Example on the photo.
Example
This is my code:
state = { isFocused: true };
onFocusChange = () => {
this.setState({ isFocused: false });
}
render() {
return (
<View style={styles.container}>
<Text style={styles.headline}>Website ou App</Text>
//TEXTINPUT1
<TextInput
onFocus={this.onFocusChange}
style={(this.state.isFocused) ? {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: 'gray'} : {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: '#00b7eb'}}
onChangeText={(text) => this.setState({ site: text })}
value={this.state.site}
//TEXTINPUT2
<Text style={styles.headline}>Utilizador/Email</Text>
<TextInput
style={{ marginTop: 5, height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.setState({ local: text })}
value={this.state.local}
/>
Some idea how i can do that? Thank you.

Answer 1

Sharing my same answer from here.
Set up your text inputs and their styles in a component. Then use state in the component to control your styles.
const [focus, setFocus] = useState(false);
<TextInput
style={focus ? styles.inputOnFocus : styles.inputOnBlur}
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
/>
Styles:
const styles = StyleSheet.create({
inputOnFocus: { borderColor: '#C0C0C0' },
inputOnBlur: { borderColor: '#4b6cd5' }
});

Answer 2

One option is to track the name of the focused TextInput. You'll need to make sure to use the updater version of setState in the blur event to avoid race conditions between the onBlur and onFocus methods of the two inputs:
state = { focusedInput: null };
onFocusChange = (inputName) => {
this.setState({focusedInput: inputName});
}
onBlurChange = (inputName) => {
this.setState(state => {
if (state.focusedInput === inputName) {
return {focusedInput: null};
}
// no change if some other input already has focus
return null;
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.headline}>Website ou App</Text>
//TEXTINPUT1
<TextInput
onFocus={() => this.onFocusChange("input1")}
onBlur={() => this.onBlurChange("input1")}
style={(this.state.focusedInput === "input1") ? {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: 'gray'} : {marginTop: 5, height: 40, borderWidth: 2, borderRadius: 5, borderColor: '#00b7eb'}}
onChangeText={(text) => this.setState({ site: text })}
value={this.state.site} />
Repeat for other inputs with a name different than "input1".

Answer 3

I think the easiest way to do it is just to create your own custom component to handle the border line. I have created a expo snack for you to see a workaround (other than the mentioned before). https://snack.expo.io/#ianvasco/e8efb0.
Anyway here is the code.
//somefile.js
import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';
export default App = () => {
const [isInputFocused, setInputFocused] = useState({input1: false, input2: false})
return (
<View style={styles.container}>
<TextInput
onFocus={() => setInputFocused((prev) => ({...prev, input1: true}))}
onBlur={() => setInputFocused((prev) => ({...prev, input1: false}))}
style={isInputFocused.input1 ? styles.input : styles.inputFocused }
onChangeText={() => {}}/>
<TextInput
style={isInputFocused.input2 ? styles.input : styles.inputFocused }
onChangeText={() => {}}
onFocus={() => setInputFocused((prev) => ({...prev, input2: true}))}
onBlur={() => setInputFocused((prev) => ({...prev, input2: false}))}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
inputFocused: {
marginTop: 5,
height: 40,
borderWidth: 2,
borderRadius: 5,
borderColor: 'grey'
},
input: {
marginTop: 5,
height: 40,
borderWidth: 2,
borderRadius: 5,
borderColor: '#00b7eb'
}
});
Also, I just added React Hooks. I encourage you to use them, since the code get simplified a lot. Here is more about Hooks

Answer 4

Create Custom TextInput component which will set "borderColor" to "black" or "blue" in component with help of "onFocus" and "onBlur" events. In this way you can use multiple TextInputs without any conditions in parent
Sample Code
import React from "react";
import { SafeAreaView, TextInput, Text } from "react-native";
class CustomTextInput extends React.Component {
state = { hasFocus: false };
_onFocus = () => {
this.setState({ hasFocus: true });
};
_onBlur = () => {
this.setState({ hasFocus: false });
};
render() {
const borderColor = this.state.hasFocus ? "blue" : "black";
return (
<TextInput
style={{ padding: 16, borderColor: borderColor, borderWidth: 1 }}
onFocus={this._onFocus}
onBlur={this._onBlur}
/>
);
}
}
export default class App extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text style={{ marginTop: 16, textAlign: "center" }}>Website App</Text>
<CustomTextInput />
<Text style={{ marginTop: 16, textAlign: "center" }}>Email</Text>
<CustomTextInput />
<Text style={{ marginTop: 16, textAlign: "center" }}>Password</Text>
<CustomTextInput />
</SafeAreaView>
);
}
}
App Preview

Answer 5

**We can control the multiple text input by using Switch case and method **
_onFocusTo=(data)=>{
const {
overdueAmount,
bounceCharges,
penalInterest,
overdueCharges,
collectionPickupCharge,
ebcCharges,
foreClosureAmount,
amount,
} = this.state;
console.log("focus");
switch(data) {
case 1:{
if(amount === "0"){
this.setState({amount:""})
}
}break;
case 2:{
if(bounceCharges === "0"){
this.setState({bounceCharges:""})
}
}break;
case 3:{
if(penalInterest === "0"){
this.setState({penalInterest:""})
}
}break;
case 4:{
if(foreClosureAmount === "0"){
this.setState({foreClosureAmount:""})
}
}break;
case 5:{
if(ebcCharges === "0"){
this.setState({ebcCharges:""})
}
}break;
case 6:{
if(collectionPickupCharge === "0"){
this.setState({collectionPickupCharge:""})
}
}break;
}
}
/In Textinput make function and pass it to onFocus
<TextInput
underlineColorAndroid="transparent"
style={styles.textInput1}
placeholder={""}
placeholderTextColor={Colors.labelTextColor1}
keyboardType={"numeric"}
onFocus={() => this._onFocusTo(1)}
onBlur={this.addTotal}
onChangeText={(amount) => this.setAmountDes(amount)}
value={this.state.amount}
/>
<TextInput
underlineColorAndroid="transparent"
style={styles.textInput1}
placeholder={""}
placeholderTextColor={Colors.labelTextColor1}
onFocus={() => this._onFocusTo(2)}
onBlur={this.addTotal}
keyboardType={"numeric"}
onChangeText={(bounce) => this.setBounce(bounce)}
value={this.state.bounceCharges}
/>
<TextInput
underlineColorAndroid="transparent"
style={styles.textInput1}
placeholder={this.state.penalInterest}
placeholderTextColor={Colors.labelTextColor1}
onFocus={() => this._onFocusTo(3)}
onBlur={this.addTotal}
keyboardType={"numeric"}
onChangeText={(penal) => this.setPenal(penal)}
value={this.state.penalInterest}
/>
....continues