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