Skip to content

Instantly share code, notes, and snippets.

@himelnagrana

himelnagrana/Cefalo School - React Native Class 11.md

Created January 3, 2018 09:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save himelnagrana/f099cec8d6059e1126d3dc619c90d6c4 to your computer and use it in GitHub Desktop.
Save himelnagrana/f099cec8d6059e1126d3dc619c90d6c4 to your computer and use it in GitHub Desktop.
Download ZIP
Cefalo School - React Native Class 11
Raw
Cefalo School - React Native Class 11.md

Cefalo School - React Native Class 11

Running on Devices

ANDROID

  • Enable debugging over usb -- Settings > About Phone -- Tap Build Number row seven times -- Go back one step and Developer Options will be open [Based on Android variants, it might be on top menu or under additional settings] -- Then from Developer Options enable the two items:

    • USB Debugging
    • Install apps over USB

  • Install adb command line tools -- For LINUX and MAC -- install it from Android Studio. Go to Android SDK Manager from settings/preferences. Then open the SDK manager > select Android SDK Platform-tools and Google USB Driver and install them. -- For WINDOWS -- go to here and download the platform tools.

    • Unzip the downloaded file and select the adb file > right click it while clicking on "Shift" button and open with command prompt (or powershell for windows 10)
    • Or the other way should be install it from Android Studio. Go to Android SDK Manager from settings/preferences. Then open the SDK manager > select Android SDK Platform-tools and Google USB Driver and install them.

  • Plug-in your android device via usb. -- You might need to select MTP or file transfer mode on the pop-up that may come [this is dependent on OS version and build] -- Run the command adb devices. List of device attached will be displayed along with your already used emulators.

  • Run the command react-native run-android

  • This will run the debug build to your device

  • In case you have multiple devices connected (or even a device and simulator) you can choose the device to install by the following command

    adb -s "deviceID" install path+apkName

  • where deviceID is the ID you got from the adb devices command and path is <your project folder>/android/app/build/outputs/apk/ and apkName is either of app-debug.apk or app-release.apk
  • so example command in this case will be:

  • adb -s "694d68149804" install /Users/himel/Applications/ReactProjects/carrycut/app/android/app/build/outputs/apk/app-release.apk

IOS

  • Connect your iOS device via lightning cable to mac
  • Go to <your project folder>/ios and open the .xcodeproj file in Xcode
  • From Xcode's Product menu choose Destination.
  • Your device will be in the list - choose your device and it will be registered for development.
  • Register an account in Apple Developer Portal
  • Click on the target name (same as project name) on the left column then go to the General tab on the right hand side
  • Go to the Signing option and select your Apple developer account or team under the Team dropdown.
  • You can now press the Build and Run button (⌘R) or select Run from the Product menu. Your app will launch on your device shortly.

Native Component Integrations

Releases [Debug and Signed Releases]

Debug Release

  • The build we do by running react-native run-ios or react-native run-android we actually create a debug build by-default.
  • The debug builds exposes logs, shows system and app warnings and errors
  • In the build signature it is marked as debug, so obviously you cannot upload this to stores :-)

Signed Release

  • Android:

    • Run the command

      keytool -genkey -v -keystore emp-man-release-key.keystore -alias emp-man-key-alias -keyalg RSA -keysize 2048 -validity 10000

    • This command will prompt for passwords for keystore and key. This will also prompt for some fields for your key.

    • The output is a key file named emp-man-release-key.keystore

    • Copy the file to <your project folder>/android/app

    • Edit the file ~/.gradle/gradle.properties or android/gradle.properties and add the following (replace ***** with the correct keystore password, alias and key password)

      MYAPP_RELEASE_STORE_FILE=emp-man-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=emp-man-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

    • Edit the file android/app/build.gradle in your project folder and add the signing config:

     	android {
 		defaultConfig { ... }
         signingConfigs {
             release {
                 if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                     storeFile file(MYAPP_RELEASE_STORE_FILE)
                     storePassword MYAPP_RELEASE_STORE_PASSWORD
                     keyAlias MYAPP_RELEASE_KEY_ALIAS
                     keyPassword MYAPP_RELEASE_KEY_PASSWORD
                 }
             }
         }
         buildTypes {
             release {
                 ...
                 signingConfig signingConfigs.release
             }
         }
     }

    • Then from project root in command line - run:

      cd android && ./gradlew assembleRelease

    • The app-release.apk will be generated at <your project folder>/android/app/build/outputs/apk/

  • iOS:
    • Create signing certificate requests
    • Create provisioning profiles
    • Install and link the certificates and profiles
    • Select Generic iOS Device in the build destination
    • Go to Product > Archive and in the pop-over that came, select Ad-hoc or App-Store for which option you are archiving.
    • You also can export the .ipa file from the dialog box after build is done.

Important Self Study

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment