Images not rendering properly on ios after code-push with resizeMode center

[Ashwin-Mothilal]

Steps to Reproduce

1. React Native Image Component local image which matches resizeMode center
2. Install the app from Xcode Production version
3. Change the tintColor of the image or change text if you have
4. Release using "code-push release-react ios "

Expected Behavior

Images should render properly as it is in dev version debug mode

Actual Behavior

Images with resizeMode "center" gets resizeMode "cover". I am mentioning "cover" because it matches with it in dev mode.

SCREENSHOTS

After CodePush to Production App - 1 Improper images

After CodePush to Production App - 1 Some proper images - Images representing Views, Comments, Attachments are looking good.

Expected / Debug Build

Environment

• react-native-code-push version: 5.2.1
• react-native version: 0.52.0
• iOS/Android/Windows version: iOS version 11.2.6
• Does this reproduce on a debug build or release build? Release

###Notes
The App uses this tabbar component in React Navigation
For the topbar it uses StackNavigator.

[adbl]

I notice this for resizeMode: "stretch" too. We are using stretch together with capInsets for some shadow assets (on semi transparent views) and it makes the shadow look completely wrong.

[adbl]

Aha, actually I see now that resizeMode: "stretch" is respected but it seems like the capInsets are just gone (which makes the shadow look wrong). Maybe a separate issue.

[syq7970]

+1

[Zakeelm]

Hey there!

We haven't forgotten about this issue. We have been doing some internal changes on the way we're executing github support. Are you still having this problem?

[adbl]

Hello, the case I mentioned above: yes!

…

On Mon, 26 Mar 2018 at 23:02, Zakeel M. ***@***.***> wrote: Hey there! We haven't forgotten about this issue. We have been doing some internal changes on the way we're executing github support. Are you still having this problem? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1222 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAK22O5xkrsM_c4RwbZgzo4B7BIb_8qWks5tiVdjgaJpZM4SYeGg> .

[itoys]

Hi guys,
Unfortunately I can't reproduce you issue.
There is my App.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import codePush from "react-native-code-push";

class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Image
          style={{width: 100, height: 100, margin: 20}}
          source={require('./1.png')}
          resizeMode='cover'
          tintColor='#ff00ff'
        />
        <Image
          style={{width: 100, height: 100, margin: 20}}
          source={require('./1.png')}
          resizeMode='center'
          tintColor='#ff00ff'
        />
        <Image
          style={{width: 100, height: 100, margin: 20}}
          source={require('./1.png')}
          resizeMode='stretch'
          tintColor='#ff00ff'
          capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
        />
        <TouchableOpacity
          style = {{height: 70, width: 200, backgroundColor: 'green'}}
          onPress={() => {
             codePush.sync({
                  updateDialog: true,
                  installMode: codePush.InstallMode.IMMEDIATE
              });
          }}>
        <Text>Current version: 15</Text> 
      </TouchableOpacity>
      </View>
    )
  }
}

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
export default App = codePush(codePushOptions)(App);

After codepush release was installed all looks the same as in a binary version:

Would be great if you can create little project which I can use to reproduce

Thanks!

[adbl]

@itoys Thanks for the reply. In the case I described above (using a drop shadow image), we use absolute position and unset the width/height like this:

  shadow: {
    position: "absolute",
    top: -18,
    left: -20,
    bottom: -22,
    right: -20,
    width: undefined,
    height: undefined,
  },

with capInsets:

{
  top: 22,
  left: 24,
  bottom: 26,
  right: 24,
}

This is probably relevant to the issue, especially unsetting width/height, I should have mentioned it before.

[itoys]

Sorry guys, I doesn't see difference between binary version and codepush.
Example project would be helpful!

[Ashwin-Mothilal]

Sorry, was busy in other projects. I am still facing this issue. @itoys It's not possible for me to create a example project for some days. The only difference I see in Code push code is, I am not doing it manually, its done by Default option which is OnAppResume I think. I have updated the screenshots and text also, feel free to ask questions!

[itoys]

Hi @Ashwin-Mothilal
I don't have access to new images.
CodePush options which i use don't have any affects to styles.
I'm waiting project from you :)

Thanks!

[Ashwin-Mothilal]

I have changed the permissions for the images, you can check it now. Just have a look at it. I will try to give project after this week, working on other production issues.

[tomauty]

Noticing this as well. Changing to resizeMode={'contain'} seems to fix it. Most of these were absolutely positioned images. Maybe some data stripped from assets in the bundling/distribution process?

[itoys]

CodePush and plugins doesn't change your code and assets.
Could you please download your bundle and compare props values?

https://codepush.azurewebsites.net/updateCheck?deploymentKey=[your-key]&appVersion=[app-version]

[itoys]

Closing this issue for now! I recommend you to wrap all your props values with {}

Thanks!

[Ashwin-Mothilal]

Hi, I am attaching the sample project for you here

Please find the image after code push Update

[stueynet]

What if we are not using it as props but using it within the Image style object? Same problem? Also would it not make sense to have the code-push build mimic the behaviour of a normal production build? Production builds work and look just fine with no errors whatsoever.

[ex3ndr]

Same here. I have two separate issueses.

First is a background image for a chat. It had transparency (by mistake) and for some reason it was resized incorrectly. It was zoomed and very low res. iOS had this bug, but android works well.

Second case is a simple png images with capInsets. It looks like it just ignores cap insets at all.

UPD:
I actually tried to dig deeper to investigate problem with capInsets and found that in binary build image is not resized before applying capInsets (as it should be), but in codepush version RCTImageView resizes an image for some reason.

UPD2:
Ah, i found the source of issue. Image was loaded without respect to screen dencity (x3 on iPhone X) when is loaded from codepush. Loading from local bundle works just fine. Still trying to figure out work-around...

[ex3ndr]

Ok, i figured out the root cause of the issue. When loading images from CodePush bundle it doesn't respect scale factor of the resource. It works well for built-in resources since UIImage can load with right scale factor automatically.

Unfortunately, the only (and dirty) solution is to patch react-native implementation.

In react-native/React/Base/RTCUtils.m patch RCTImageFromLocalAssetURL:

image = [UIImage imageWithData:fileData];

with

CGFloat scale = 1.0;
if ([[imageURL absoluteString] hasSuffix: @"@3x.png"]) {
  scale = 3.0;
} else if ([[imageURL absoluteString] hasSuffix: @"@2x.png"]) {
  scale = 2.0;
}
image = [UIImage imageWithData:fileData scale: scale];

This will work only for png files.

[stueynet]

@itoys should we open this back up?

[ex3ndr]

For sure it should be opened back. Also after digging around image loading it turns out that there are no image caching at all for built-in images on iOS. For example, if app will show series of messages with bubble decorations then build with codepush will load each image again and again. That's really creepy for performance.

[makirby]

@ex3ndr you're a damn hero

[stueynet]

@itoys or anyone from Microsoft can you open this back up please or let us know how we can deal with it? Editing React Native core files is not an option.

[alexandergoncharov-zz]

Hi all,

Sure, I'll reopen it. Thanks for reporting!
It requires more time for investigate. Sorry for this delay.

[makirby]

@stueynet for now i am patching the RN package using the code from @ex3ndr, for me this is a good solution as all our images follow that exact convention. Though it may not work for you.
https://gist.github.com/makirby/6f7a0b6ef2e8865751206b2b69e1abdc

[bthuan]

@ex3ndr's solution works for me, thank you for digging into it. But I think it's pretty hacky

[wynch]

Hello,

I just noticed the same problem trying to update my app with CodePush...
Is this a react-native related bug ? if so, is there a pull request to change RCTImageFromLocalAssetURL ?

[NickToropov]

@wynch yes, it's RN issue. CodePush does nothing with your js/assets. It just calls RN cli under the hood and pushes generated bundle to CodePush server from where your customers can download it. The main difference between downloaded bundle and binary bundle is location. We saw several places in RN code where there are conditions checking whether bundle/asset is located in app or in file system. We don't know if there is a PR with fixes in RN repository.

[Fsarmento]

Hi,

I just bumped into this same problem today.
I have a background image with "resizeMode: 'repeat'". After updating the sentence in the middle of the screen using codepush, the image resizeMode or size changes (iPhone 6):

This project is available here: https://github.com/Fsarmento/codepushImageRepeate

[NickToropov]

Hi @Fsarmento! thanks for demo app! I've reproduced the issue. Please try to apply workaround suggested by @ex3ndr above. It works for me.

[emilioicai]

Modifying React Native's code is not a solution for any project using continuous integration so this issue prevents Code Push from being integrated in medium to large size apps.

[ascherkus]

I ran into this -- as far as I can tell it's a regression introduced in RN itself and I filed facebook/react-native#22383

Most of the images in our application are messed up and it's blocking our use of CodePush for our application :(

[yuri-kulikov]

Hi @ascherkus!

You did a really great job finding this particular commit! 👍
I wish we'd figured it out sooner and I hope it will be fixed soon.

[gbertoncelli]

Same problem here... I solved forcing the image to be with resizeMode stretch 😞

[ScreamZ]

Hello @geof90 @lostintangent @max-mironov

I'm facing the same issue, removing resizeMode: "center" fixed the problem, can you have a look at this please ?

It's really important I guess for many company that relies heavily on Codepush…

Best regards guys

[MichielDeMey]

Hey guys, a fix has been merged into master in the React Native project.
(cfr. facebook/react-native#22383 & facebook/react-native#23446)

You can create a patch file from the following diff: https://patch-diff.githubusercontent.com/raw/facebook/react-native/pull/23446.diff

[ScreamZ]

Marvelous ! I made a workaround, i'll wait react native to update :) THanks

[alexandergoncharov-zz]

Hi all,
I see that This issue have been fixed in react-native. facebook/react-native#22383
So, I'm going to close this issue for now. Please feel free to reopen it if you have any questions.

Thanks,
Alexander

[holgersindbaek]

@ScreamZ What workaround did you do?

[ScreamZ]

Not using center mode, i was not specially requiring it for my use case.

[ajsmth]

updating to RN 0.59.1 worked for me

[khokanuzzman]

use "contain". worked for me...
resizeMethod={'resize'}
resizeMode={'contain'}