React Native Border Radius with background color
Try moving the button styling to the TouchableHighlight
itself:
Styles:
submit: {
marginRight: 40,
marginLeft: 40,
marginTop: 10,
paddingTop: 20,
paddingBottom: 20,
backgroundColor: '#68a0cf',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
},
submitText: {
color: '#fff',
textAlign: 'center',
}
Button (same):
<TouchableHighlight
style={styles.submit}
onPress={() => this.submitSuggestion(this.props)}
underlayColor='#fff'>
<Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>
You should add overflow: hidden
to your styles:
Js:
<Button style={styles.submit}>Submit</Button>
Styles:
submit {
backgroundColor: '#68a0cf';
overflow: 'hidden';
}