As React Native grows in popularity, so do its third party modules. One complication that I’ve encountered while using wix’s react-native-navigation is that it isn’t super obvious how to integrate it with Microsoft codepush.
Instructions can be found here: https://wix.github.io/react-native-navigation/#/
Run the generic commands to set up codepush (found here: http://microsoft.github.io/code-push/)
yarn add code-push-clicode-push registercode-push app add <appName> <os> <platform>
Then, create a new component
CodePushComponent.js which returns null, but forces CodePush to sync every time the user resumes the app.
Add this component,
<CodePushComponent /> to the home screen of your app.
Next, add the following to app.js (where you call Navigation.startSingleScreenApp):
Note: Gio Logist has mentioned that this may only be the case for older versions of CodePush. If you have a newer version, you can skip this, and remove
CodePushComponent as well.
You should be good to go. Now test whether you’ve successfully added code-push to your app:
- Make a small change to your app, such as changing the color of a component.
- Release your change through CodePush. Running this command will automatically build your app.
code-push release-react <appName> <platform> -m --description 'test change!'
-m signals to code-push that the update should be applied immediately, without reloading.
3. Promote deployment from Staging to Production:
code-push promote <appName> Staging Production
4. You should see a white flash in your simulator, and code-push will auto update your app. Check that the change you made to your app worked. If so, you have successfully added code-push to your app!
Remember to change your scheme back to Debug and add App Transport Security Settings back into Info.plist when developing.
Happy coding! Follow me for more tutorials like this.
Thanks grigored for the instructions. Credit to https://github.com/Microsoft/react-native-code-push/issues/875