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

Answer 1

Try removing borderStyle: 'solid'

Answer 2

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>