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

  1. Create a new app
  2. Add an image with resizeMode center, set a width and a height smaller than the image dimension
  3. Open XCode
  4. Go to Product > Edit scheme
  5. Select “Release” scheme instead of debug
  6. 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)
  7. 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:

Capture d’écran 2020-04-17 à 17 54 35

With release scheme:

Capture d’écran 2020-04-17 à 18 03 23

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 29
  • Comments: 32 (5 by maintainers)

Commits related to this issue

Most upvoted comments

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.

resizeMode: 'repeat' option stopped properly working for me when I upgraded from react-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 ratio

    backgroundImage: {
        width: Dimensions.get('screen').width - 2 * 32,
        height: (Dimensions.get('screen').width - 2 * 32) * (3 / 4), // Calculate the height with target width and aspect ratio
    }

Having the same issue and eagerly waiting for an update