images not always rendering after code-push update

[ivpusic]

• react-native-code-push version: v1.17.0-beta
• react-native version: 0.41.2

Hi, I am using code-push for application testing via testflight. Today I noticed that sometimes some images are not rendering. This is completely random => it happens once in a few minutes => image simply does not show (and after component rerender is triggered, image will show up). I was looking into my code, and couldn't find the answer why is this randomly happening.

Then I noticed that until app gets the update from code-push images are always rendering. As soon as it gets first, this random bug comes back. An update which app gets contains no changes to anything regarding image component (basically dummy update, just to confirm my claim).

I also tried cleaning code-push history, but still the same thing. No code-push updates => all ok...after first update, issue is here.

Do you have any idea what could be the problem? I tried various things as a workaround but so far nothing helped.

Thanks a lot.

[Micjoyce]

react-native-code-push version: v1.17.0-beta react-native version: 0.40.0 I have same problem at ios and android, my local html file and image all can't load and rendering.

There is my build bundle command:

react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/index.ios.bundle --dev false

release new version to code push command:

code-push release AppName-ios ./bundles/index.ios.bundle 1.0.0  --description "1.test. " --mandatory true

There is webview load from local html and got error.

<WebView
          source={this.getTemplate()}
 />

If I use

code-push release-react MyApp-iOS ios -m --description "Modified the header color"

all thing will be ok!

[sergey-akhalkov]

@Micjoyce, I could see that your bundle command does not contain --assets-dest parameter, it may cause the issue - from the react-native-code-push docs I've found:

Images dissappear after installing CodePush update If your app is using the React Native assets system to load images (i.e. the require(./foo.png) syntax), then you MUST release your assets along with your JS bundle to CodePush. Follow these instructions to see how to do this.

You probably need to use smth like this:

mkdir ./CodePush

react-native bundle --platform ios \
--entry-file index.ios.js \
--bundle-output ./CodePush/main.jsbundle \
--assets-dest ./CodePush \
--dev false

code-push release MyApp-iOS ./CodePush 1.0.0

Could you please try to use commands I've listed above and let me know if any changes?

[sergey-akhalkov]

@ivpusic, We've probable have not faced with this random issue before, so could you please provide me with the way you are loading images (i.e. the require(./foo.png) syntax or smth else) and releasing CodePush updates (vanilla release or release-react commands)? Also it would be very helpful if you could provide me with minimal version of the app where the issue reproduces.

[sergey-akhalkov]

@Micjoyce, @ivpusic, just a friendly ping.

[ivpusic]

@sergey-akhalkov sorry for delay.

// example 1:
<Image style={[style, {width: dimension, height: dimension, borderRadius: dimension / 2}]} source={{uri: 'https://...'}} />

// example 2:
<Image style={{width: smallDimensions, height: smallDimensions}} source={require('myapp/assets/...')} />

release commands

code-push release-react -m myapp-ios ios
code-push promote -m myapp-ios Staging Production

I can confirm that the same is happening also for RN 0.42-RC3 + RNCP v1.17.0-beta

[sergey-akhalkov]

@ivpusic, sorry for slow responce. I've tried to reproduce the issue using provided examples but with no luck, so could you please provide me with the minimal version of the app where the issue reproduces? (you could use react-native-code-push demo app as template). Also could you please clarify what you mean by

and after component rerender is triggered, image will show up

Do I get it right that all images will show up in case you manually triggering component rerenderer by calling this.forceUpdate() method?

[sergey-akhalkov]

@Micjoyce. @ivpusic, just a friendly ping.

[ivpusic]

@sergey-akhalkov sorry for a delay...so all images are showing up correctly in 90% percent of the cases. When 10% happen, then if I have 20 images on the screen, maybe 15 of them won't show...it is really random. How I "fix" this, is just to navigate to another tab in the application, go back, and then they will show up.

As I said before....this happens only after I push some fix via code-push. If the application did not download code-push update, then this never happens.

[sergey-akhalkov]

@ivpusic,

How I "fix" this, is just to navigate to another tab in the application, go back, and then they will show up.

Are you using React Native Navigation Module: https://github.com/wix/react-native-navigation? The root cause of the issue could probably be here, but we need to check it, so could you please verify if the issue reproduces in case you are not using Navigation Module?

I also can see that your second example contains absolute path:

// example 2:
<Image style={{width: smallDimensions, height: smallDimensions}} source={require('myapp/assets/...')} />

Please note, that absolute path maps to the old (binary) version of the image, you should use relative paths instead if you want to update assets (images) via CodePush.

[ivpusic]

I am using https://github.com/react-community/react-navigation for navigation.

Tnx for tip regarding loading images. Will do it that way in the future. However this issue happens also for images which are loaded over network (https)

[sergey-akhalkov]

@ivpusic, could also please confirm if you've CodePush-ified your app's root component?

[ivpusic]

yes

[sergey-akhalkov]

Hi @ivpusic, I've tried to reproduce the issue but with no luck again, so I'm closing this for now. Please feel free to reopen in case you able to reproduce this with our sample app. If you can't reproduce the bug on it, provide us as much info as possible about your project (it would be best if you could share with us minimal of your app code where we can reproduce the issue this way).

[pcarion]

I also have the exact same issue issue described by ivpusic: after a code-push update of the app, the application is missing quite a few images using a source using require('path'). Once we navigate away from those broken screens and come back, the images appear again. This makes it quite impossible to use code-push at this stage then. RN version: 0.43.3 code-push: 1.12.6-beta (I will update that version, but wanted to report that problem first).

[sergey-akhalkov]

Hello @pcarion, thank you for reaching us. Could you please answer several questions:

1. Do you use testflight to test your app?
2. Does your app use https://github.com/react-community/react-navigation module for navigation?
3. Does the issue reproduce both for Android and iOS?

I'll try to reproduce the issue again using example apps from react-navigation repo, hoping I'll be able to reproduce the issue this time, so if you have any ideas or could share me with code samples I'll be much appreciated, thank you.

[richardhuaaa]

Also, have you ever reproduced the issue on a simulator, or does it only ever happen on the device? Would either of you (@pcarion, @ivpusic) be willing to share your code with us so that we can reproduce it?

[cmoody]

react-native-code-push version: v2.0.1-beta react-native version: 0.43.0

I am having similar issues and thought I would toss in a few thoughts to possibly help get to the heart of the issue.

One thing I would suggest is tossing in what items you are using for codePush.sync. I am running the following in componentDidMount on my entry component.

codePush.sync({ installMode: codePush.InstallMode.IMMEDIATE });

When you hard close the app and re-open is when you see the issue happen. If you resume the app theres no issue since the component didnt mount again it doesnt run sync. If you remove sync altogether is also starts to work as expected. My theory is that calling sync is blocking while it either checks for an update or syncs the assets. Not really sure how to go about debugging that (iOS noob). I looked at the sample app and the reason it may be hard to duplicate is those syncs are being called when the action happens rather than every time the component is mounted. Thats an assumption on my part not knowing if you did it on componentDidMount or not but feel free to correct if you did @sergey-akhalkov

I will try and see if I can get some free time in the next day or two and post up a version of the example app similar to how I am using it.

[sergey-akhalkov]

Hey guys, I've reproduced the issue but for Android only, so I've created new issue in React Native repo due to it reproduces even if CodePush module not integrated into the project. As for iOS - i'm still trying to repro it, so it would be great if someone who experiencing the issue could share source codes (or reproduce it using sample apps) with me. Thank you!

[cmoody]

Ive tested that project on iOS and it works perfect. All images load as expected relatively fast. I took that project and changed it to the following to add CodePush.

react-native: 0.43.3 react-native-code-push: 2.0.2-beta

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

export default class rnapp extends Component {
  componentDidMount() {
    codePush.sync({
      installMode: codePush.InstallMode.IMMEDIATE
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
          <Image style={styles.image} resizeMode={Image.resizeMode.contain} source={require("./images/laptop_phone_howitworks.1.png")}/>
          ...
          <Image style={styles.image} resizeMode={Image.resizeMode.contain} source={require("./images/laptop_phone_howitworks.100.png")}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00ff00',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  image: {
    width: 25,
    height: 25,
    margin: 3,
  }
});

AppRegistry.registerComponent('rnapp', () => rnapp);

Two things changed.

1) I added CodePush to the componentDidMount 2) Changed the background color to green

The issue I noticed was after I pushed an update to CodePush but its interesting to note that once I added CodePush to the componentDidMount it changed the way the initial load happens. In the base example it loads the screen and you see each image load individually. However once CodePush was introduced it showed a white screen for a few seconds before displaying the green background and all of the images already loaded.

The next step is pushing changes to the app. I added 100 new images and changed the background color back to #F5FCFF.

I then ran the following 2 commands. (I know I know I could just deploy to Staging) code-push release-react rnapp ios -m --description "Test deploy" code-push promote rnapp Staging Production -r 100%

After doing that the first load it did the white screen again. Then it showed the green background with the 100 images. Then it refreshed and changed the background with updated images and no stutter. I then hard closed the app and and opened it. Everything worked as expected. There was no white screen, no stutter in loading, nothing...I am a little stumped.

I am going to try and do 2 new things later today. 1) Use images loaded from an external resource. 2) Re-organize into subfolders to be more similar to actual app structure.

I have no idea if those will impact anything but we will see.

[sergey-akhalkov]

Hi @cmoody, got it, please let me know if any changes. So as for Android - it seems like it is a known issue that have place due to memory problem, I've found workaround: add android:largeHeap="true" to AndroidManifest.xml Application section. I've tested it and it works well for me, please verify if it fixes the issue for Android and let me know if any changes.

[sergey-akhalkov]

@cmoody, @pcarion, @ivpusic, just a friendly ping.

[sergey-akhalkov]

Hello @cmoody, do you have any updates?

[cmoody]

Hey @sergey-akhalkov,

I tested out using external images to see if the network requests caused some impact. It didnt seem to impact the load time really at all.

In my application (non test one) I have removed CodePush which has slightly increased load time but it looks like there is another issue going on. I think I need to look at some network request clean up and when components are loading to see if thats messing things up.

So for me I think this issue isnt a CodePush issue.

Thanks for the help.

[sergey-akhalkov]

@cmoody, thanks for the response, so I'm closing this for now again, we'll reopen it when more info or stable repro will be available.

[ghost]

Im having same issue. Without code push i get no white flashes. Soon as i enable it i get white flashes after the splash screen and when i navigate to a new screen.

[rakeshkumar217]

I was also facing this issue, When I did second time push the code then images are not visible. So i found solution for it. Actually Code push, uploads only new changes to app center. So on every push, I am changing the main folder name of images and their usage in code by search and replace the path of image in whole react-native project. This is tricky solution, but working fine for me.

[chaudev]

Tôi đã được cũng phải đối mặt với vấn đề này, Khi tôi lần thứ hai đẩy các mã sau đó hình ảnh không nhìn thấy được. Vì vậy, tôi đã tìm thấy giải pháp cho nó. Trên thực tế Code push, chỉ tải lên các thay đổi mới cho trung tâm ứng dụng. Vì vậy, trong mỗi lần đẩy, tôi sẽ thay đổi tên thư mục chính của hình ảnh và cách sử dụng chúng trong mã bằng cách tìm kiếm và thay thế đường dẫn của hình ảnh trong toàn bộ dự án react-native. Đây là giải pháp phức tạp, nhưng hiệu quả đối với tôi.

Processing phase is a bit cumbersome. But maybe you found the cause, thanks for saving me 😂😂 thank you so much

[yjb94]

@sergey-akhalkov the answer from @rakeshkumar217 seems working and it means their is sth wrong with asset control when deploying via codepush. I don't think taking extra time for bundling assets is a good approach. I think it should all be done just by typing appcenter codepush release-react ~~~~.

Any updates on this issue? are you still following?

[yjb94]

oops nvm, just had a quick search and this was already been discussed in #2138 #2136.

[ghost]

Anything update this issue?

[markl-vesper]

@HikoVinhHo would https://github.com/Microsoft/react-native-code-push/issues/1350 help

its resolved our issues by bundling slightly differently prior to creating the codepush update