Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 702
Jonny Avatar asked May 04 '18 06:05

Jonny


People also ask

How do you give border to text input in React Native?

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.


1 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,
         }]}
     />
like image 190
Pritish Vaidya Avatar answered Oct 02 '22 15:10

Pritish Vaidya