Giters

masoooud / react-native-deployment

This tutorial shall help deploying your React Native App binaries to Apple App Store and Google Play Store.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native Deployment

This tutorial shall help deploying your React Native App binaries to the App Store (iOS) and Play Store (Android).

We are NOT covering

Table of Contents

  1. Coming from 3 different Setups
    1. Deployment of Apps built with Create React Native App Starter Kit
    2. Deployment of Apps built with Expo
    3. Deployment of Apps built with React Native CLI
  2. Links

1. Coming from 3 different Setups

This tutorial is the last step in my little React Native tutorial series:

  1. React Native Setup: https://github.com/herrkraatz/react-native-setup
  2. React Native Styling: https://github.com/herrkraatz/react-native-styling
  3. React Native Deployment: https://github.com/herrkraatz/react-native-deployment

It shows you how to build your

  • Apple App Store package IPA (iPhone Application Archive) and
  • Google Play Store package APK (Android PacKage)

for upload into the Stores.

Preferences:

Ok, now let's dive into it.

i. Deployment of Apps built with Create React Native App Starter Kit

You have 2 options here:

  1. The Standard: Use Expo's exp build command

    See great documentation on https://docs.expo.io/versions/latest/guides/building-standalone-apps.html

    And please jump to Deployment of Apps built with Expo here in this tutorial

  2. Advanced: If you need to integrate your Create React Native App (CRNA) into an existing native iOS / Android application OR want to create custom native modules beyond the standard React Native Components / APIs,

    One disadvantage of ejecting is that after you've ejected from CRNA, you don't get to use CRNA's tools and it won't take care of upgrades for you in the future.

    Also see https://stackoverflow.com/questions/42967465/created-an-app-with-create-react-native-app-how-to-publish-it-to-the-google-pla

ii. Deployment of Apps built with Expo

First see great documentation on https://docs.expo.io/versions/latest/guides/building-standalone-apps.html

Here's a quick summary of it:

  1. Install exp

    Open a Terminal window and run:

    > npm install -g exp

  2. Configure app.json

    {
   "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug",
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname"
    },
    "android": {
      "package": "com.yourcompany.yourappname"
    }
   }
 }

    See https://docs.expo.io/versions/latest/guides/building-standalone-apps.html#2-configure-appjson for details

  3. Make the build

    Run for iOS:

    > exp build:ios

    Run for Android:

    > exp build:android

  4. Download the IPA / APK file from Expo Server

    See https://docs.expo.io/versions/latest/guides/building-standalone-apps.html#4-wait-for-it-to-finish-building

  5. Final test on Device or Simulator / Emulator

    See https://docs.expo.io/versions/latest/guides/building-standalone-apps.html#5-test-it-on-your-device-or

  6. Prepare the Stores

    • Create the App within App Store Connect and Google Play Console
    • iOS: Make sure to use the same bundle ID as in bundleIdentifier of app.json file (above).

  7. Submit it to the Stores

    First please see https://docs.expo.io/versions/latest/guides/app-stores.html

    Also you need to add this to your App:

    Probably these, too:

iii. Deployment of Apps built with React Native CLI

  1. iOS

    • Add Launcher App Icons: Go to Xcode >> Project Folder >> Images.xcassets >> AppIcon and add all necessary Launcher App Icons you generated. I can recommend "Icon Slate" App to generate all sizes of Launcher App Icons.

    • Add Splash Screens:

    • Now create an App in the App Store Connect, in order to upload the IPA into it. Make sure to use the same bundle ID as in your Xcode project.

      Of course you initially built your App (and Xcode Project) first by running:

      > react-native run-ios

    • Then check out instructions here: https://facebook.github.io/react-native/docs/running-on-device.html#building-your-app-for-production

    • Once all is configured, you can deploy your App from Xcode (from your machine):

  2. Android

2. Links

Have a look !

Apple App Store:

Google Play Store:

Deployment:

Debugging:

Create React Native App (CRNA) Starter Kit:

Expo:

React Native CLI:

Credits to the authors of above links ! Thank you very much !

And credits to the reader: Thanks for your visit !

About

This tutorial shall help deploying your React Native App binaries to Apple App Store and Google Play Store.

License:MIT License