himelnagrana/Cefalo School - React Native Class 11.md

## Cefalo School - React Native Class 11.md

      
    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


React native follows React with respect to information flow - which is one-directional.


But when we need to mix react native with native components - we need some special mechanisms.


Passing Properties:


It's actually exporting something from native code targeting a component in RN. In the component the exported components will be received as prop. Code Example
Main drawback is this properties does not support callback. So if we need to trigger anything in native from JS codes and handle the results - we can't progress.


Native Modules:


Study materials:


https://facebook.github.io/react-native/docs/native-modules-android.html
https://facebook.github.io/react-native/docs/native-modules-ios.html


ANDROID


Example codes and implementation


IOS


Example codes and implementation


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


Launching ios app on devices
Submitting app on ios app store
App Distribution quick start
No results found