React Native TextInput always has black border

Issue

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

Solution

Try removing borderStyle: 'solid'

Answered By - vinayr