CODEWITHSUNDEEP
javascriptstylesreact-native
Chipe
Chipe

Reputation: 4811

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

Upvotes: 144

Views: 336125

Answers (7)

SohanLal Saini
SohanLal Saini

Reputation: 458

borderRadius will work on for Android & iOS both devices, but below properties won't work in iOS devices:

borderTopLeftRadius, 
borderTopRightRadius, 
borderBottomLeftRadius,
borderBottomRightRadius

So you write your code always something like this:

Example 1: this will work perfectly for (iOS & Android) both devices

<View style={{borderTopRightRadius: 25, borderBottomLeftRadius: 25}}>
   <Text>Submit</Text>
</View>

Example 2: this will work for (iOS & Android) both devices

<Text style={{borderRadius: 25, overflow: 'hidden'}}>Submit</Text>

Example 3: this will won't work for iOS devices (for Android devices will work fine)

<Text style={{borderTopRightRadius: 25, borderBottomLeftRadius: 25}}>Submit</Text>

Upvotes: 0

Sardorek Aminjonov
Sardorek Aminjonov

Reputation: 834

I have resolved it by updating:

touchable: {
  borderWidth: 0.2;
  ...
};

to be

touchable: {
  borderWidth: 1;
  ...
};

Looks like decimal values(0.2) don't work with borderWidth on android

Upvotes: 1

Nader Dabit
Nader Dabit

Reputation: 53711

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

Upvotes: 203

Soban Arshad
Soban Arshad

Reputation: 1411

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>

Upvotes: 9

mukul soni
mukul soni

Reputation: 127

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

Upvotes: 8

Hossein
Hossein

Reputation: 4559

You should add overflow: hidden to your styles:

Js:

<Button style={styles.submit}>Submit</Button>

Styles:

submit {
   backgroundColor: '#68a0cf';
   overflow: 'hidden';
}

Upvotes: 136

sumit kumar pradhan
sumit kumar pradhan

Reputation: 653

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"
/>

Upvotes: 0

Related Questions