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)
create({ input: { borderColor: "gray", width: "100%", borderWidth: 1, borderRadius: 10, padding: 10, }, }); In the piece of code above, we styled the text box's border and gave it some padding. Furthermore, we used the borderRadius property. This tells React to add rounded borders.
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,
}]}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With