react-native: resizeMode center does not shrink local images on iOS release mode.
Description
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:
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 29
- Comments: 32 (5 by maintainers)
Commits related to this issue
- fix: Correctly display LauncherView close button on iOS On iOS/release the cross button would be displayed as a grey square in the LauncherView This is because the image fill the entire container in... — committed to cozy/cozy-flagship-app by Ldoppea 2 years ago
- fix: Correctly display LauncherView close button on iOS On iOS/release the cross button would be displayed as a grey square in the LauncherView This is because the image fill the entire container in... — committed to cozy/cozy-flagship-app by Ldoppea 2 years ago
This problem seems to occur with resizeMode repeat as well.
why is this ignored ?
For those that do not want to wait for the fix to be merged. I’ve uploaded the patch-package patch here: https://gist.github.com/hubastard/727eb71071d0822a19ad7f6859d3382e
Since this issue is not resolved yet, I’ve decided to try to see if I can find a fix for it.
So far I found a “workaround”, local images using the
.webp
file format are working properly.I’ll continue to dig more.
Here’s the fix for it https://github.com/facebook/react-native/pull/41963
resizeMode: 'repeat'
option stopped properly working for me when I upgraded fromreact-native@0.64.3
to@0.68.2
. It’s a bit weird this issue gets zero interest. This problem should be common. Do people not use images and resizing? 🤔EDIT: I upgraded further to
react-native@0.70.5
and it doesn’t change the situation.repeat
still doesn’t work as described in the documentation.EDIT2: I ended up resizing my asset and serving different versions for iOS production (Release) 🤷♂️ Before doing it I set up a clean project because I thought, maybe it is something specific to my app? But no, it was totally reproducible with a brand-new app.
This issue is still valid in 2023, i am experiencing the same, i ended up replacing the whole image with another one
I worked around this to reach a target width by using
resizeMode="cover"
(that worked on ios release scheme) and calculating the height by the source images aspect ratioHaving the same issue and eagerly waiting for an update