React Native TextInput always has black border

Question

I am using a TextInput in React Native and if I try to add a border to the component there there is always a square black border on top of my colored border.

When I remove my colored border the component looks like this:

Here is my code:

<TextInput
      returnKeyType="search"
      style={searchStyle.searchInput}
      onChangeText={(text) => this.setState({text})}
      placeholder={this.state.searchText}
      onSubmitEditing={(event) => this.searchLocationSubmit(event)}
/>

const searchStyle = StyleSheet.create({
  searchInput : {
    height: 35,
    color: '#64AFCB',
    borderColor: '#64AFCB',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 15,
    width: 200,
    marginLeft: 10,
    marginTop: 10,
    backgroundColor: 'white',
    position: 'absolute',
    zIndex: 2
  }
})

This might help https://stackoverflow.com/questions/62390508/change-border-color-of-textinput-when-focused-in-react-native-web-expo — kay, Nov 07 '22 at 03:02

score 1 · Accepted Answer · answered Nov 12 '16 at 06:49

1

Try removing borderStyle: 'solid'

answered Nov 12 '16 at 06:49

vinayr

11,026
3
46
42

score 1 · Answer 2 · answered Jan 06 '17 at 15:34

The accepted answer didn't really answer your issue.

If you want to set the border colour of a TextInput, there seems to be a bug in React Native where it will overwrite your borderColor style on a TextInput and set it to black.

To get around this, I wrap my TextInput tags in a View. I set the borderWidth of the TextInput to 0, then set the wrapping View to have the border styles I want to see on the input.

<View style={{borderStyle: 'solid', borderWidth: 1, borderColor: '#64AFCB'}}>
     <TextInput
         placeholder="MyInput"
         style={{borderWidth: 0}}
         value={this.state.myInputValue}
      />
</View>

score 0 · Answer 3 · answered Nov 12 '16 at 13:53

0

try

borderWidth: 0,

istead of

borderWidth: 1,

answered Nov 12 '16 at 13:53

Mohamed Khalil

3,036
1
20
26

React Native TextInput always has black border

3 Answers3