Review Apps for React-Native

Most of us know review apps from Netlify, which is a kind of game-changer when it comes to staging apps. With Netlify review apps you don’t have one staging environment - but one for every branch/ pull request of your app. This makes that testing your apps just got way easier - one did not need to check if staging was “free” right now, and even small features were quite easy to review, also for non-developers. Now, Netlify is in the end “just” hosting static pages, surely that kind of wizardry could not be done for a stateful backend or even a mobile app, which needs to be rolled out through app stores and has an entire review process for almost every release.

Recently, Heroku launched a new release - we got review apps for our backend now and, I can absolutely recommend it. Basically, it works by creating a new instance of the app for every open pull request on GitHub and initializes it with an empty database, that can then be seeded. But now we were working on a react native app, and I wondered if it might not be possible to achieve something similar here. We were using expo as a framework for the react native app and semaphore for CI already, so I started looking into them some more.

Enter Expo

Expo is a framework/platform for react apps, that enables building native iOS/ android apps without having any native dependencies. Also,  it allows you to open the app without installing - one can use the Expo app to scan a QR Code which immediately downloads the JavaScript bundle from Expo’s servers and runs the App directly on the phone - no USB debugging or side-loading required. Now that got me thinking. Looking through the expo docs I found something called release channels. Release channels are exactly what they sound like, they enable one to have one main default channel and also release to other “channels” in parallel - sounds like a git branch to me. Every release channel also comes with it’s own QR Code, which opens the newest version of the app on that channel, auto-updating on every open.

Enter Semaphore

We already had our CI setup with Semaphore, building the app anew for every release on our main branch. So now, all that was left to do was to adjust our release promotion, so that it would release every branch in its own release-channel and, just for the little cherry on top, push a comment on the pull request with a QR code that directly links to the release channel. After making it work with some bash magic and a little node script I decided to export the functionality into a little npm package: https://github.com/railslove/expositional. Now all that is left to do, is to wrap the expo build script with some expositional goodness:

- export RELEASE_CHANNEL=$(yarn run -s expositional channel-name)
- expo publish --release-channel $RELEASE_CHANNEL
- yarn run expositional notify --github-repo railslove/the-next-big-thing --expo-name @railslove/code-swordfish

And voila! Everyone can now simply scan the QR code in the Pull Request to try this app directly on their phone.

Result

So now every feature we build can simply be tested an a native iOS/Android device by just scanning the QR code in the pull request. It’s as easy as that!

Some Disclaimers

  • This only works for expo apps, so as soon as one needs native functionality that is not provided by expo plugins, this does not work.
  • Because Apple does not like people to not have to install apps to use them, testing on iPhones requires the user to be logged in to expo in the same account/ organization as the app.

Photo: https://www.pexels.com/photo/macbook-pro-92904/

Mehr von uns

Unsere Stories

  • Time for Tools - Today: The Color Pikka

    Wir bei Railslove sind immer auf der Suche nach guten Tools, die uns den Arbeitsalltag als Webdeveloper erleichtern. Bei dem großen Angebot haben auch wir nicht immer den Überblick, deswegen lohnt es sich nach der Lösung für ein bestimmtes Problem zu suchen. Hier Martins Color-Picker Fund.