在 iOS 中 React Native Rendering Image borderRadius

Question

Images are rendered in different aspects in ios and android using image component from react-native. I'm trying to display image with 45 degree angle cutoff every corner.

I have tried to use cover, contain and center of the resizeMode prop cover fills the image inside the view giving the 45 degree cut but crops either width or height.

Center does not crop the image but if the image isn't similar ratio as the view the 45 degree angles aren't cut of the image, Android does this well though.

<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

  <View style={styles.imageWrapView}>

    <Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />

  </View>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

</View>

Want to get uncropped images on ios that have corners cut of by 45 degrees. Same as is in the android images. Here are images from android device that are rendered correctly.

Here are the images rendered on ios using center and cover

This is rendered using contain on ios

How can I get the images rendered with 45 degree cutoff on ios device as it is on an android device?

Answer 1

if you set overflow to hidden the border radius will start working again

 borderRadiusFix:{
        borderRadius: 5,
        overflow: 'hidden',
    }

Answer 2

Try this

<View
  style={{
    width: 250,
    height: 150,
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomLeftRadius: 50,
    borderBottomRightRadius: 50,
    overflow: 'hidden'
  }}
>
  <Image
    source={{ uri: imageUri }}
    style={{
      width: 250,
      height: 150
    }}
  />
</View>

You can use following props for 45-degree angle cutoff every corner.

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius 

Answer 3

same problem are occure with me. In my case borderRadius are working for android but not working for ios so i followed the folloowing code....

This is my styling item for Touchable button you can use Image in place...

<View  style = {styles.button}>
                    <TouchableOpacity >
                        <Text style={{textAlign:'center',color:'#ffff'}}>
                        Login
                        </Text>
                    </TouchableOpacity>
                </View>

and my styling....

 button: {
borderRadius:20,
marginTop:20,
alignSelf:'center',
textAlign:'center',
width:'70%',
height:'7%',
fontWeight:"bold",
color:'#ffff',
paddingTop:10,
backgroundColor: '#00AABF'

}