Quickly build Apple iOS Apps Using React Native (what I wish I knew when I started)

,

Contents

Introduction

React Native is a wonderful tool for developing Android and iOS Apps.

Although developing Android apps are pretty straightforward (save knowing to enable proguard, hermes, builds per cpu, adding your build keys), it can be quite the process for a new Apple iOS developer.

I purchased an Apple MacBook Air i5 model (2019) in order to start building AppStore apps. I had already build a few Android apps using React Native, so I figured, how hard could it be ??? Probably childs play! Boy was I wrong!!!

Initially, I was opening the xcodeproj file rather than the xworkspace file, I must of wasted hours on that. Then, I didn’t know how to get the provision file to do the the archive build, again countless hours. Then I was building for every single phone / tablet required for screenshots !! Wow, what a waste of time!

After all that frustration and learning, I thought I’d share how I’ve gone from spending tens of hours launching an app (after coding it via React Native) to single digit hours (usually < 3).

Here are my quick steps for getting React Native Apps going on iOS pain free:

Enable Hermes

For the love of all that is right in the world, enable Hermes. It’ll cut down your archive size!

Note that you can only enable hermes on ios after React Native 0.64

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods

    # MAKE THE FOLLOWING LINE true FROM false TO ENABLE HERMES
    :hermes_enabled => true
  )

Remove React Native Flipper

Please remove React Native Flipper! Most of the build time and archive time is spent building this monstrosity, and removing it cuts your archive file significantly!

To do this, open the /ios/Podfile and comment out the “use_flipper!” line:

# Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.

  # COMMENT OUT THE FOLLOWING LINE !!!!!
  # use_flipper!
  post_install do |installer|

Use React Native to run on Simulators for Screenshots

Do not, and I repeat, do not use XCode to run your code on simulators to get screenshots!!! It’s a great way to ensure your app works fine for sure, but not just for screenshots! Don’t do it!!!

What do you do instead? use yarn ios as follows to get screenshots for all the appstoreconnect required devices:

yarn ios --simulator="iPhone 12 Pro Max"

yarn ios --simulator="iPhone 8 Plus"

yarn ios --simulator="iPad Pro (12.9-inch) (2nd generation)"

yarn ios --simulator="iPad Pro (12.9-inch) (3rd generation)"

Obviously, run one at a time, grab your screenshots via the camera button in the simulator and you are good. Note: for some reason, you have to install the ipad pro simulators, i believe they don’t come bundled with XCode. You basically go into XCode and add them via Add Additional Simulators.

More

Much more to come ….