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)

2 Answers

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, }]} />

2

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

2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy