Image nested in rotated view ignore Styles IOS


#1

Hello, i’m trying to put an image nested in a rotated view. it work’s pretty nice in android, but in IOS the image ignores the parent styles.
Here is android:

Here is IOS:

Here is my code:

render() {
      return (
        <View style={styles.container}>
          <View style={styles.panel}>
            <View style={styles.frame_border}>
              <View style={styles.img_frame}>
                <Image 
                    style={styles.profile_img}
                    source={{uri: 'https://www.telegraph.co.uk/content/dam/health-fitness/2017/07/26/Ben-Stiller-690x386_trans_NvBQzQNjv4BqA5xPpDXjI3R8PVWqlNgp0AsXXAS7_VrfHdozeI5gQBU.jpeg?imwidth=450'}} />
              </View>
            </View>
            <Text style={styles.name}>Jorge Rio</Text>
            <Text style={styles.location}>Leiria, Portugal</Text>
          </View>
          <View>
            <Text>Profile</Text>
          </View>
        </View>
      );
    }

panel: {
      width: '100%', 
      height:'45%', 
      backgroundColor: '#242424',
      alignItems: 'center'
      
    },
    profile_img: {
      width: 142,
      height: 142,
      transform: [{ rotate: '45deg'}]
    },
    frame_border: {
      marginTop: '6%',
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      width: 100,
      height: 100,
      alignItems: 'center',
      justifyContent: 'center',
      transform: [{ rotate: '-45deg'}]
    },
    img_frame: {
      width: 90,
      height: 90,
      alignItems: 'center',
      justifyContent: 'center',
    }

Anyone know how to solve this?

Best Regards


closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.