Using CodePush with Wix react-native-navigation

Olivia Chang
Aug 2, 2017 · 2 min read

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.

Installing react-native-navigation

Instructions can be found here: https://wix.github.io/react-native-navigation/#/

Installing Codepush

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 codePush.sync() from CodePushComponent as well.

codePush.notifyAppReady()

You should be good to go. Now test whether you’ve successfully added code-push to your app:

  1. Make a small change to your app, such as changing the color of a component.
  2. 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.

react.coach

All things React Native, and some other stuff too.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store