Menu
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' }, ... 
776
We will set the border radius of the Image using StyleSheet element borderRadius. Step 1: First create the new reactive project. Step 2 : Create the "images" folder inside the react native project structure and refer the below screenshot. Step 4: Open App.js File in your favorite code editor and erase all code and follow this tutorial.
To make corner rounded, React Native provide below props and we are going to learn with example. React Native provide borderRadius prop to make all corners rounded and borderRadius prop only accept number between 1 to 100 or if you put more then 100 value it should same output of 100 value let understand with example.
When we apply border radius to the same element, the border gets thicker to accommodate for the increased radius. So far so good. Unfortunately if we then apply the opacity to the parent, the background color of the element gets semitransparent, making the border visible and creating an ugly effect.
The way elevation works is that it creates a border around the element that is then shifted to the bottom. The background color of the element then hides the inside part of the border. When we apply border radius to the same element, the border gets thicker to accommodate for the increased radius.
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> 
153
You should add overflow: hidden to your styles:
Js:
<Button style={styles.submit}>Submit</Button> Styles:
submit { backgroundColor: '#68a0cf'; overflow: 'hidden'; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
