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

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.


Add the following properties in your style:

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

This worked for me.

Thanks


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.