Here is the code snippet I am using to display an image in React-Native:
<View>
<Text style={styles.myTitle}> This is the title 2 </Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="stretch"
/>
</View>
When using resizeMode="stretch", the image appears like this:
https://i.sstatic.net/1fuWS.jpg
On the other hand, if I use resizeMode="contain" :
<View>
<Text style={styles.myTitle}> This is the title 3</Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="contain"
/>
</View>
When using resizeMode="contain":
https://i.sstatic.net/2FAee.jpg
I am trying to achieve a view similar to the second example, but there are unwanted margins present:
https://i.sstatic.net/XGK79.jpg
The margins look good in the first image, but it cuts off some parts of the image. Although I expected contain to solve this issue, it doesn't seem to be working here. My goal is to display the entire image without any extra margins.
If you have any solutions or suggestions, please share. Thank you.