question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

resizeMode center does not shrink local images on iOS release mode.

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:19
  • Comments:24 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
cenzovitcommented, May 30, 2020

This problem seems to occur with resizeMode repeat as well.

1reaction
Humadcommented, Sep 29, 2021

Having the same issue and eagerly waiting for an update

Read more comments on GitHub >

github_iconTop Results From Across the Web

Image 'contain' resizeMode not working in react native
This is the latest solution: Image.resizeMode.contain is not working with latest version of react native so i use it like this:
Read more >
react-native-fast-image - npm
FastImage, performant React Native image component. ... FastImage.resizeMode.center - Do not scale the image, keep centered.
Read more >
object-fit - CSS: Cascading Style Sheets - MDN Web Docs
The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its...
Read more >
Understanding “resizeMode” in React Native | by Mehran Khan
There are different options in Image “reiszeMode” ('cover', 'contain', 'stretch', 'repeat', 'center'). It can be tricky which one to use if you does...
Read more >
Displaying images with the React Native Image component
resizeMode ; cover : scales the width and height of the image to be equal to or greater than the size of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found