React Native Init

A React-Native starter kit with React-Navigation + Code Push + Onesignal + Sentry + Google Signin.

Requirements

Globally installed Node 7.x or better
Xcode for iOS Development
Android SDK for Android development
React-Native-CLI
```
> npm install -g react-native-cli
```

Get Started

:arrow_down: Installation

Fire command prompt and run following commands :

$ git clone https://github.com/teallabs/react-native-init
$ cd react-starter-init && npm install

Project Name & Bundle Id change

We recommend you renaming your project-name & bundle-id, as this would be essential for your whole project configuration. Following steps will help you rename your project :
- Install react-native-rename
```
npm install react-native-rename -g
```
- For renaming app :
```
react-native-rename <newName>
```
- For changing bundle id :
```
// For Android
react-native-rename <newName> -b <bundleIdentifier>
//For iOS 
Open project in Xcode, Go to General tab and change Bundle Identifier
```
:clipboard: Documentation :clipboard:

To get this project running with all dependencies, follow steps given below :
1. Google Signin
  
  We are using react-native-google-signin for Google Signin. For user authentication and push notification we will be using Firebase. First we setup our firebase app for both platforms.
  - Create a new account / Log in to your account
  - Create a new project with required information
  Generate Release/Debug keystores
  
  Fire up console in your project folder and run following command :
```
// For Debug
keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

// For Release
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
```
  Move the .keystore file generated to android/app folder.
  
  Your gradle.properties file in android / app should have following settings. The store and key password should be same as what you entered while creating Release keystore file.
```
MYAPP_RELEASE_STORE_PASSWORD= /* Password of release keystore */
MYAPP_RELEASE_KEY_PASSWORD= /* Enter password here*/
```
  Configure Firebase project for both android and iOS app individually.
  First we will start with setting up firebase for android app.
  1. Android
    You will be needing Bundle Identifier from build.gradle in next step.
```
ProjectName
|_ android
|_ _ app
|_ _ _ build.gradle
```
  Enter bundle id from build.gradle to add firebase to android app. Register App and skip rest of the steps.
  
  You need to generate SHA-1 and add the generated fingerprint to your firebase config for android app.
```
Run following commands in project-name > android > app

// For Debug
keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android
// For Release
keytool -list -v -keystore my-release-key.keystore -alias my-key-alias -storepass [storepass] -keypass [keypass]
```
  Go to Firebase > Project Settings
  
  After adding both SHA-1 fingerprint of Debug and Release download google-services.json file and replace it with your android/app/google-services.json file.
  1. iOS
  Add new iOS app in your Firebase project.
  
  You will get bundle identifier from Xcode / General tab. Register and skip other steps.
  
  Once done registering app, download and open the GoogleService-Info.plist file.
  
  Open Xcode and switch to Info tab. You need to give url types which we will get from GoogleService-Info.plist file.
  
  Get Bundle Id and Reverse Client Id from GoogleService-Info.plist file. Enter respective fields in Xcode.
  
  Navigate to App.js file and change iosClientId in hasPlayServices
  
  For more configuration in Google Signin, follow instructions from React-Native-Google-Signin .
2. OneSignal
  
  OneSignal provides a simple interface to push notifications and email.
  - Create an account here
  - Add a new app
  First we will configure for android app,
  1. Android
    Open your firebase project and switch to Cloud Messaging tab and copy Google Server API Key, Google Project Number for configuring android app.
    
    Now switch to code editor and make changes as suggested below.
```
// Navigate here

ProjectName
|_ android
|_ _ app
|_ _ _ build.gradle
```
    1. iOS
      
      For iOS, you will be prompted to give .p12 file. Read from [here].(https://support.magplus.com/hc/en-us/articles/203808748-iOS-Creating-a-Distribution-Certificate-and-p12-File) how to get .p12 file
      When you are done with configuring iOS project
    - Now open AppDelegate.m in code editor and change oneSignalAppId with the one you get on creating a new app on Onesignal platform.
```
ProjectName
|_ ios
|_ _ ProjectName
|_ _ _ AppDelegate.m
```
3. Sentry
  
  Sentry provides open source error tracking that shows you every crash in your stack as it happens, with the details needed to prioritize, identify, reproduce, and fix each issue.
  - Create your account here / Login here
  - Add a new project
  - Once you are done creating project open sentry.properties file from both android and iOS folder.
  - You have to change Organization name, Project name and auth token.
```
// Navigate here

ProjectName
|_ android
|_ _ app
|_ _ _ sentry.properties
|
|_ _ ios
|_ _ _ sentry.properties
```
  Migrate here to get auth.token :point_up:
  
  Now open index.js and change ADD_SENTRY_CLIENT_KEY from DSN
4. Code Push
  
  CodePush is a cloud service that enables React Native developers to deploy mobile app updates instantly to their user's devices. Following steps will help in configuring CodePush for project.
  1. Install CodePush CLI
```
npm install -g code-push-cli
```
  2. Create/Login a CodePush account
```
// Register
> code-push register
// Login if registered already
> code-push login
```
  3. Register your app
    If your app targets both iOS and Android, we highly recommend creating separate apps with CodePush. One for each platform.
```
// For Android
> code-push app add <App-Name-Android> android react-native

// For iOS
> code-push app add <App-Name-Ios> ios react-native
```
    For Android
```
> code-push deployment ls <App-Name-Android> --displayKeys
```
    Copy both Debug and Release key in build.gradle in
```
ProjectName
|_android
|_ _ app
|_ _ _ build.gradle
```
    For iOS
```
> code-push deployment ls <App-Name-Ios> --displayKeys
```
    Note : Change CODEPUSH_KEYs with keys we get from above command.

:clapper: Start project

You are now all set to start your project !

// For iOS
> react-native run-ios

// For Android
> react-native run-android

:office: Build your app :office:

When your app is ready to ship, you need to individially build .apk and .ipa file for android and iOS respectively.

For Android,

cd android && ./gradlew assembleRelease

The final apk would be generated in

ProjectName
|_android
|_ _ app
|_ _ _ build
|_ _ _ _ outputs
|_ _ _ _ _ apk
|_ _ _ _ _ _ app-release.apk

For iOS,
It's a long process to build .ipa file for App Store. We will be adding a detailed procedure for this in wiki shortly. Meanwhile, you can follow this awesome blog.

:poop: Troubleshooting :poop:

If you have any problem, search for the issues in this repository. If you don't find anything, you can raise an issue here.

React Native Init

Requirements

Get Started

:arrow_down: Installation

Project Name & Bundle Id change

:clipboard: Documentation :clipboard:

Google Signin

Generate Release/Debug keystores

OneSignal

Sentry

Code Push

:clapper: Start project

:office: Build your app :office:

:poop: Troubleshooting :poop:

GitHub