javascriptstylesreact-native

React Native Border Radius with background color


In React Native, borderRadius is working but the background color given to the button stays a square. What is going on here?

JS

<TouchableHighlight
  style={styles.submit}
  onPress={() => this.submitSuggestion(this.props)}
  underlayColor='#fff'>
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>

Style

...
submit:{
    marginRight:40,
    marginLeft:40,
    marginTop:10,
},
submitText:{
    paddingTop:20,
    paddingBottom:20,
    color:'#fff',
    textAlign:'center',
    backgroundColor:'#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff'
},
...

enter image description here


Solution

  • 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>
    

    enter image description here