React Native And Expo Guide

I recently deployed my first ever iOS app Stradbroke to the App Store using Expo and React Native. In this guide I wanted to walk you though that process from a technical perspective.

1. Install all the tools you'll need for development, the React Native docs have a good guide but you'll need Node, Yarn and the Expo CLI

2. Expo is kind of like create-react-app but the native version, it's a managed workflow that configures your tool chain to use some good defaults, however it does differ in a sense that Expo also has its own SDK that hooks into system functionality like the camera and GPS

3. To create a new Expo app run this command:

   expo init <project-name>
   

4. You'll now have a basic scaffolded React app, the root file is App.js

5. You'll likely need to install two libraries to get going: React Navigation and some sort of UI Kit like React Native Elements, React Navigation is just like React Router with a slightly different API, I found out the hard way that UI Kits are pretty important for native projects as whilst you can write your own CSS you're more limited with styling as opposed to what you can do on the web

6. Start writing your code, the best workflow I found for debugging was running the app on my phone in the Expo client and viewing my logs in the terminal running the development server, to run the server you need to yarn start and then scan the QR code with your native camera app

7. As you're running the app on a different device if you want to connect to a backend server (in my case Rails) you'll need to ensure that it can accept requests from anything on the network, to do that with Rails I needed to start it like this rails s -b 0.0.0.0 and then make fetch requests to my IP address

8. For environment variables the best system I found was demonstrated here, essentially you need an environment.js file which is gitignored and you import that file when you need to use any variables within it, I usually have a backendUrl that differs depending on if the app is running in development or staging

9. You'll also need an App Icon and a Splash screen, lucky for us Expo comes with an excellent Figma template and guide on how to add these

10. Once you're happy with the way everything is working you can start thinking about building and deploying the app, to run your app on Apple Platforms (even in something like TestFlight) you'll need to sign up Apple's Developer Program, this was $149 AUD

11. To build the app for iOS run this command:

    expo build:ios --release-channel staging
    

12. The --release-channel staging args ensure that the app will build using my staging environment variables, you'll need to select the archive build type if you actually want the app on the App Store, you'll also need to login to your Apple account and follow the prompts, Expo has a good guide on all the different build options

13. The build will then be queued for a while but eventually you'll be able to access a url with details about the build, on that page you can download an .ipa file which is a binary of the app you've built

14. Head to App Store Connect and create a new app, if the app is built correctly in the previous step you should see a Bundle ID, you also need to pick a unique SKU which can just be the same as your Bundle ID

15. To upload the .ipa to your App Store Connect account you need to use an app called Transporter, it's pretty simple just upload the .ipa file

16. The app will take a bit of time to propagate on Apple's servers but eventually you should see a build available on TestFlight which you can then test yourself via your Apple email, you can also add other testers to the build

17. Apple reviews every app before it's allowed in the App store, you'll need to do a few things on App Store Connect to ensure your app passes this review:

    • Fill in the name, description, keywords and support url fields
    • Add a dummy user that reviewers can sign in as
    • Make the app free, otherwise you'll need to worry about tax, bank details and other annoying non developer things
    • Add screenshots, these need to be specific dimensions, this Figma template helped a lot, just ensure your image dimensions are set to scale otherwise it won't resize properly

18. This should now be good to go, submit the app for review and hopefully it's accepted, if you want to redeploy bump the version in the app.json, build the app again with expo build:ios --release-channel staging, download the .ipa and upload it to Transporter