How to change color of text input underline when clicked?

Question

I want to change the color of text input underline when i click on perticular textinput field, currently i have two text input field for email and password, and i have created component for textinput and iam using onfocus and onblur, My issue is when i click on any one field both the fields are getting focused.i want to highlight only the textinput which iam clicking CustomTextInput component i have created,

 const CustomTextInput = props => {
              return (
                <View style={props.containerStyles || styles.container}>
                  <TextInput
                    style={props.styles || styles.textInput || styles.textArea }
                    onChangeText={text => {
                      props.onChangeText(text, props.inputValue);
                    }}
                    value={props.value}
                    underlineColorAndroid={"transparent"}
                    placeholder={props.placeholder}
                    onFocus={event => {props.onFocus(event, props.placeholder);
                    }}
                    onBlur={event => {props.onBlur(event);
                    }}
                    allowFontScaling={true}
                    secureTextEntry={
                      props.inputValue === "password" ||
                      props.inputValue === "retypePassword"
                        ? true
                        : false
                    }
                    placeholderTextColor={AppStyles.color.COLOR_FADED_BLACK}

                    multiline={props.multiline}
                    numberOfLines={props.numberOfLines}
                    maxHeight={Metrics.screenHeight * 0.1 || props.maxHeight}
                    autoCapitalize={
                      props.inputValue === 'email' || props.inputValue === 'password' ? 
                    props.autoCapitalize : 'sentences'}
               />
                </View>
              );
            };

LOgin Page where iam calling these textinput component and applying onfocus and onbblur

state = {
        isFocused : false,
      };
renderInputField(placeHolderText, inputValue) {
        const { isFocused } = this.state;
        const {onFocus, onBlur, ...otherProps} = this.props;
        return (
          <TextInput
           placeholder={placeHolderText}
            onChangeText={this.onChangeText}
            value={this.state[inputValue]}
            inputValue={inputValue}
            autoCapitalize={'none'}
            containerStyles={ isFocused ? styles.containerfocus : styles.containerStyles}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
        );
      }

     onFocus = (event,placeholder) =>{
     if(this.props.onFocus){
          this.props.onFocus(event);
        }
      };
      onBlur = event =>{
        this.setState({ isFocused: false});
        if(this.props.onBlur){
          this.props.onBlur(event);
        }
      };

Answer 1

You are using the isFocused in state for both fields You should do something like below

onFocus={()=>this.onFocus('username')}
  
onFocus=(field)=>{this.setState({isFocused:field})};
//you will have to change the isFocused to something meaningful like focussedField

And chose the container style based on that

containerStyles={ isFocused=='username' ? styles.containerfocus : styles.containerStyles }

This way you can have multiple fields and change the focus of them and set the style properly.