React Native Deployment to iPhone

The Xcode simulator is great for development, but it’s definitely more rewarding seeing your app on an actual phone. In order to do so you must first bite the bullet and buy an Apple Developer Account. When I purchased mine in November 2016 it cost $99 and you’ll receive membership for an entire year. Now since you’ve invested in your application let’s deploy it!

With your Apple Developer membership you need to obtain a certificate to verify that the app was built by you. Apple requires this code signing as a way to identify who created the app and to tell if the app has been tampered with. You will need to sign into your Apple Developer account and follow the instructions to make an “iOS App Development” certificate.

Here’s an additional resource that provides an in-depth description about the certificate and detailed instructions on how to sign one: https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html.

Once you have successfully created your certificate you can find it in your Keychain Access and it will look like this:

Now let’s launch Xcode. Make sure the simulator isn’t running in the background since this will prevent the build on your phone. Within the “Signing” section you will need to set yourself as the development team. Additionally, this is where you need to specify your certificate information. I would check Automatically manage signing to make this process easier with filling-in the certificate information.

If you have any issues with your build on your simulator this may prevent the build on your phone. If you have a caution warning like the picture below on the left you will still be able to build on your phone. However, if you have a red stop icon like the picture below on the right this will inhibit you from deployment on your phone. You will need to resolve this error first before being able to deploy.

Next let’s select the device you want to build on. Using a USB cable, connect your phone to your computer. Then in your build options you should be able to select your personal phone.

You don’t want users to be able to access the debug mode on their phones, so make sure your scheme is in Release mode.

You’re almost ready to deploy, but don’t forget, you want to have an awesome icon for your app. In your project folder you need to navigate to the Images.xcassets folder where you can drag-and-drop icons into the AppIcon. Just make sure the icons are the exact dimensions that are specified.

Now the moment of truth, make sure your phone is unlocked and click on the play button to deploy your app to your phone.

Just like when you ran the simulator before the React Packager window will launch. However, once the build has been successful you should now see your finished app on your phone! Now you can whip out your phone and show everyone the cool app you made! Congrats, you have deployed your app on your phone…next you can really start showing off your app by distributing it in the app store! 😎