Image tag is used in React Native 0.70 to display image with resizeMode="contain". According to RN doc, in "contain" mode, the full image is shown with uniformly shrinking (aspect ratio is maintained) if the image is large than the display area. Here is the original image 1515 x 1391, 783kB:
This is the image in "contain" resizemode after the same image filled up the whole screen (android):
Here is the view code:
return (
<GestureHandlerRootView>
<GestureDetector gesture={pinch}>
<GestureDetector gesture={pan}>
<Animated.View style={styles.container}>
<Animated.View style={[{width: width * images.length, height, flexDirection: "row"}, swipeStyle]}>
{images.map((img_source, i) => {
//const isActive = useDerivedValue(() => {return index.value === i});
const pinchStyle = useAnimatedStyle(() => {
return {
transform: [
{ translateX: (-width / 2 + focalX.value - offsetX.value)},
{ translateY: (-height / 2 + focalY.value)},
{ scale: scale.value },
{ translateX: (width / 2 - focalX.value + offsetX.value)},
{ translateY: (height / 2 - focalY.value)},
]};
}, []);
return (
<Animated.View key={i} style={[styles.picture, pinchStyle]}>
<View style={[styles.image]}>
<TouchableWithoutFeedback onPress={() => navigation.goBack()} style={styles.button}>
<View style={styles.button}>
<CachedImage //<<==same as Image
source={{uri:img_source.path.split("?")[0]}}
sourceAlt={{uri:img_source.path}}
resizeMode={"contain"} //<<==resizeMode used
style={[styles.image, {maxWidth:"100%"}]}
/>
</View>
</TouchableWithoutFeedback>
</View>
</Animated.View>
);
})}
</Animated.View>
</Animated.View>
</GestureDetector>
</GestureDetector>
</GestureHandlerRootView>
style={[styles.image, {maxWidth:"100%", maxHeight:"100%"}]}
image: {
flex:1,
width: undefined,
height: undefined,
},
As it can be seen, the aspect ratio has been maintained but only part of the image was shown while the edge part of the image was chopped off. resizeMode="center" is the same. How to show full image with Image tag while maintaining the same aspect ratio? Most likely the original image size is larger than the size of phone screen.
2
Answers
It seems like the issue was in your styles when you add undefined it took full size of image and when you add maxWidth and maxHeight it was not taking that.
You need to remove maxWidth and maxHeight and replace you width from undefined to
I think it resolves your issue.
check for the parent view width , I believe that you have given parent view more width than the screen width and the image is occupying it fully i.e. ‘100%’.