plmok61 plmok61 - 25 days ago 7
iOS Question

React Native TextInput always has black border

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.

enter image description here

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

enter image description here

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

Try removing borderStyle: 'solid'