Creating and Deploying a React Native App to iOs and Android

Starting consists of installing Create React Native App globally using yarn global add create-react-native-app.

Install Watchman next.

We will be developing with Expo.io too, advice from the React people. On your testing devices install from the AppStore or GooglePlay.

I recommend using VSCode as a development environment - lots of helpful packages.

Ready, steady, go

Create a new app by running:

react-native init --version="0.0.1" MyAwesomeApp

Test your setup by running:

yarn start

Then view on an Apple device:

yarn run ios

First get started with the official documentation. Then view on an Android device:

yarn run android

Alternatively, you can use simulators. Make sure you have the latest Xcode. Then Run

react-native run-ios

If you use this method and are using VS Code, make sure other workspaces are closed as the debugger can clash. Also if you have been working on another project you might want to clear the simulator cache:

xcrun simctl erase all

Sometimes processes would not have shut down properly, in that case run xcrun simctl shutdown all.

Once you can see your app on the simulator, open up the options with Command + D, select hot reload. Now each time you save your app will hot load the module.

Deploying to Testflight

This part is a little time consuming. Check out this deployment guide and then do these steps:

react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
  • Go to developer.apple.com and create a provisioning profile and bundle id
  • Assign devices to provisioning
  • Enter itunesconnect and create app and assign your bundle id
  • Open Xcode and reload provisioning files
  • Enter to Targets files and select provisioning
  • Product -> Archive and go on :)

Deploying to Google Play

First follow this guide to generate keys. Make sure to save your passwords in something like keypassx et al.

The android/app/build.gradle file contains fields for your app version, so make sure it is low to begin with. To update a version open android/app/build.gradle and increment defaultConfig.versionCode and defaultConfig.versionName.

Next, build an APK (Android Package) - cd into android and run ./gradlew assembleRelease

Then go to the Google Play and upload the APK.

Annoyances

Sometimes packagers don't get stopped properly and prevents the running. Just run lsof -i :8081 to get a list of process ids, then for each PID, kill -9 [PID].

Installing updates seems to throw ios/android out of kilter. Sometimes you need to wipe out those folders and start again. To do this remove/backup said folders, then run react-native eject.

References