How to focus one textinput per time in 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.

Austin Poulson · Accepted Answer · 2020-07-23 01:24:15Z

2

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' }
});

answered Jul 23, 2020 at 1:24

Austin Poulson

9219 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

azundo · Accepted Answer · 2019-09-12 19:25:29Z

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".

Ian Vasco · Accepted Answer · 2019-09-12 19:58:24Z

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

Mehran Khan · Accepted Answer · 2019-09-13 04:16:09Z

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

Thinker · Accepted Answer · 2020-10-19 13:50:52Z

**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

The switch case will help you to control the text input on focus

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related