I am rendering some base64 images in my react-native app, and it is working. However, right now it only seems to work when I assign a fixed height and width:
<View>
<Image
source={{
uri: logoStr,
}}
style={styles.logo}
/>
</View>
const styles = StyleSheet.create({
// other styles
logo: {
width: 270,
height: 320,
marginTop: '10%',
},
});
Since the images I’m using are not always exactly the same dimensions I’d like to use percentages rather than fixed pixel values. However, when I try something like this:
const styles = StyleSheet.create({
// other styles
logo: {
width: '25%',
height: '25%',
marginTop: '10%',
},
});
… the image doesn’t render at all.
I also tried this:
logo: {
width: Dimensions.get('window').width * 0.25,
height: Dimensions.get('window').height * 0.25,
marginTop: '10%',
},
… and I see the image, and the image shows the resized height correctly, but the width is clipped on either side. Ideas?
2
Answers
Use resizemode to control the scaling of an image, e.g.
cover
Maybe something like this?