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'
},
...
This question is related to
javascript
styles
react-native
Apply the below line of code :
<TextInput
style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20, marginBottom: 20, fontSize: 18, backgroundColor: '#68a0cf' }}
// Adding hint in TextInput using Placeholder option.
placeholder=" Enter Your First Name"
// Making the Under line Transparent.
underlineColorAndroid="transparent"
/>
Never give borderRadius to your <Text />
always wrap that <Text />
inside your <View />
or in your <TouchableOpacity/>
.
borderRadius on <Text />
will work perfectly on Android devices. But on IOS devices it won't work.
So keep this in your practice to wrap your <Text/>
inside your <View/>
or on <TouchableOpacity/>
and then give the borderRadius to that <View />
or <TouchableOpacity />
so that it will work on both Android as well as on IOS devices.
For example:-
<TouchableOpacity style={{borderRadius: 15}}>
<Text>Button Text</Text>
</TouchableOpacity>
-Thanks
Remember if you want to give Text a backgroundcolor and then also borderRadius in that case also write overflow:'hidden' your text having a background colour will also get the radius otherwise it's impossible to achieve until unless you wrap it with View and give backgroundcolor and radius to it.
<Text style={{ backgroundColor: 'black', color:'white', borderRadius:10, overflow:'hidden'}}>Dummy</Text>
You should add overflow: hidden
to your styles:
Js:
<Button style={styles.submit}>Submit</Button>
Styles:
submit {
backgroundColor: '#68a0cf';
overflow: 'hidden';
}
Source: Stackoverflow.com