React-native-code-push: codepush rollbacks after successful deploys when using wix/react-native-navigation

[grigored]

Thanks so much for filing an issue or feature request! Please fill out the following (wherever relevant):

Description

When using wix/react-native-navigation/ , code update works fine until restarting the app. Then it rollbacks to the previous version.

Reproduction

1. clone the react-native-navigation example
   git clone https://github.com/JuneDomingo/movieapp
2. install codepush
3. when modifying src/app.ios.js by adding @codePush decorator, the app gets stuck, so I tried #4 below
4. import codepush and add codepush in constructor

        constructor(props) {
        super(props);
        iconsLoaded.then(() => {
            this.startApp();
            codePush.sync({
                installMode: codePush.InstallMode.IMMEDIATE
            });
        });
    }

1. install on device

Additional Information

• react-native-code-push version: 2.0.3-beta
• react-native version: 0.42.3
• iOS/Android/Windows version:
• Does this reproduce on a debug build or release build? release build
• Does this reproduce on a simulator, or only on a physical device? both

(The more info the faster we will be able to address it!)

[grigored]

After spending several hours on this, i finally found a solution/workaround:

1. I wasn't able to make codePush.sync work, no matter where i put the sync/notifyAppReady functions.
2. I tried wrapping the startSingleScreenApp() in a React component, but for some reason that didn't work either.
3. I tried wrapping the main screen component in @codePush, and that partially worked, but static methods were not copied by the codePush HOC. The answer to this is in the react docs, was considering creating a pull request for this, but I don't have the time right now.
4. So what I did that finally solved the problem, is I created another react component:

import React from "react";
import codePush from "react-native-code-push";

@codePush({
    installMode: codePush.InstallMode.ON_NEXT_RESUME,
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
})
export class CodePushComponent extends React.Component {
    render() {
        return null;
    }
}

and then just rendered that component in the main screen. This way, I'm using the recommended decorator method. Not sure what kind of sorcery that decorator is doing that I couldn't replicate with sync/notifyAppReady.

Also make sure that in AppDelegate.m you have the right jsCodeLocation = [CodePush bundleURL];. In my case, it looks like this:

#ifdef DEBUG
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif

[sergey-akhalkov]

Hi @grigored, got it, thank you for the information, please feel free to reopen if needed. Also let us know if you have any questions or see any issues.

[grigored]

An issue I definitely see is what I mentioned at 3: the codepush HOC doesn't copy static data. I had this problem elsewhere, and am using hoistNonReactStatic to solve it, as described in the react docs.

[oliviachang29]

Thanks for the workaround 👍
Worked in my app as well.

[tmaly1980]

@grigored That works for me, except I needed to add 'default' to the export since I had it in a separate file. I would LOVE to see this in the official docs.

Also, to get the @codePush decorator to work, I had to install

https://github.com/skevy/babel-preset-react-native-stage-0

That required modifying .babelrc, calling watchman watch-del-all, and for my dev system (which doesn't use CodePush but still includes the code), restarting my packager (yarn stop; yarn start).

[grigored]

@tmaly1980 The decorator is just syntactic sugar, you don't have to use it. It's equivalent to the code below

class CodePushComponent extends React.Component {
....
}

export default @codepush(options)(CodePushComponent)

[tuanphamanh91]

I did this way but my codepush get rollback a lot, about 33% got rollback. Does anyone get this problem?