resizeMode center does not shrink local images on iOS release mode.
See original GitHub issueDescription
When applying resizeMode center
on an Image
while setting a width and a height larger than the image’s size, the image is displayed at its full width and height in Release scheme in iOS (i.e. in production).
It should be shrunk to fit the specified width and height as per the documentation and as it works when using the Debug scheme.
EDIT : The bug only appears when the image is locally stored, not when loaded by URL.
You can see screenshots at the bottom of the issue.
React Native version:
System:
OS: macOS 10.15.1
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 281.55 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Watchman: Not Found
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 27.0.3, 28.0.2, 28.0.3
System Images: Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6241897
Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_192 - /usr/bin/javac
Python: 2.7.16 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
- Create a new app
- Add an image with resizeMode center, set a width and a height smaller than the image dimension
- Open XCode
- Go to Product > Edit scheme
- Select “Release” scheme instead of debug
- Add an appropriate provisioning profile to enable signing in release mode (I changed the bundle ID to be the one of my app then added my certificate)
- Click on the “Run” button
Expected Results
The image should be shrunk, just as if it was using resizeMode contain
.
Snack, code example, screenshot, or link to a repository:
You can add this component in an existing React Native application:
import React from "react";
import { StyleSheet, Image, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Image
source={require("./dale.jpg")}
resizeMode="center"
style={{ height: 200, width: 200 }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
The image I used is https://3w8dlo2orf8y3crtc22sslbh-wpengine.netdna-ssl.com/wp-content/uploads/2020/04/Twin-Peaks-Large.jpg
With debug scheme:
With release scheme:
Issue Analytics
- State:
- Created 3 years ago
- Reactions:19
- Comments:24 (1 by maintainers)
Top GitHub Comments
This problem seems to occur with resizeMode repeat as well.
Having the same issue and eagerly waiting for an update