CODEWITHSUNDEEP
react-native
Jonny
Jonny

Reputation: 883

How to change the border color of a text input in a react native app

How can i change the border color or how can add or change the style in a text input field in react native when the text input field is focused. (for android)

Upvotes: 17

Views: 69537

Answers (2)

sumit kumar pradhan
sumit kumar pradhan

Reputation: 653

Use the below code that helps to change the border color of react native application.

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          Remove TextInput Component Bottom Underline in React Native
        </Text>

        <TextInput
          style={{
            height: 40,
            width: "95%",
            borderColor: "gray",
            borderWidth: 1,
            marginBottom: 20,
          }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{
            height: 40,
            width: "95%",
            borderColor: "red",
            borderWidth: 1,
            marginBottom: 20,
          }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <TextInput
          style={{
            height: 40,
            width: "95%",
            borderColor: "blue",
            borderWidth: 1,
            marginBottom: 20,
          }}
          // Adding hint in TextInput using Placeholder option.
          placeholder="Enter Your First Name"
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}

enter image description here

Upvotes: 3

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You can do use onFocus and onBlur to do the job

state: {
    isFocused: true
}

 handleFocus = () => this.setState({isFocused: true})

 handleBlur = () => this.setState({isFocused: false})

 <TextInput
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         style={[//Your Styles, {
             borderBottomColor: this.state.isFocused
                 ? 'black'
                 : 'red',
             borderBottomWidth: 1,
         }]}
     />

Upvotes: 36

Related Questions