How to use border radius only for 1 corner (react-native)?

How to use border radius in React Native only for 1 corner?

I have a modal window

As you can see bottom corners not rounded, it happens when I used backgroundColor for buttons. I was trying to set overflow hidden to modal wrapper and it didn't help me. Now I want to use border radius to buttons (only for 1 corner).

My code http://jsbin.com/sexeputuqe/edit?html,css

Solution 1:

Did you already try with the following?
- borderBottomLeftRadius: number
- borderBottomRightRadius: number
- borderTopLeftRadius: number
- borderTopRightRadius: number

Also, you can find more info in the view component docs.

Solution 2:

Add the following properties in your style:

• borderBottomLeftRadius: number
• borderBottomRightRadius: number
• borderTopLeftRadius: number
• borderTopRightRadius: number

This worked for me.

Thanks

Solution 3:

Suppose only the radius is set for the upper left and lower left corners of the Image tag.

<View style={styles.imgBox}>
  <Image source={{ uri: 'your image url' }} style={styles.img} />
</View>

 const styles = EStyleSheet.create({
 imgBox: {
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 },
 img: {
       width: px(72),
       height: px(72),
  },
})

looks good for ios.