Sharifur/React-Native-Boilerplate

A React Native project boilerplate for producing reliable applications.

React-Native-Boilerplate

This project is a React Native boilerplate that can be used to kickstart a mobile application.

The boilerplate provides a architecture optimized for developing reliable cross-platform mobile applications through the separation of concerns between the UI and business logic. It is remarkably documented so that each section of code that lands in your application can be understood and used.

If you find this boilerplate useful then please give the repository a star

Architecture

The main purpose of the Architecture of the boilerplate is the separation of concerns

• Presentational components are separated from screens.

• State is managed using global Redux stores.

• Application side-effects (API calls, etc.) are separated from UI and state manipulation using Redux Saga.

Content

The boilerplate contains:

• React Native (v0.62.3)
• Clear directory layout to provide a base architecture for your application
• Redux (v4.0.5) to help manage state
• Redux Persist (v6.0.0) to persist the Redux state
• Redux Sagas (v1.1.3) to separate side-effects and logic from state and UI logic
• React Navigation 5 with a NavigationService to handle routing and navigation in the boilerplate
• i18Next (v11.3.5) to facilitate the more than one language App
• Firebase (v5.6.0)
• Push Notifications integrated in the boilerplate
• Code-Push (v6.2.0) This plugin provides client-side integration for the CodePush service, allowing you to easily add a dynamic update experience to your React Native app(s).
• react-native-fbsdk (v2.0.0) to facilitate the facebook login
• google-signin (v4.0.0) to facilitate the google signin
• Theme Support with a DarkTheme and LightTheme
• react-native-splash-screen (v3.2.0) setup by default
• axios to make API calls (v0.19.2)
• TypeScript configured for React Native
• prettier and eslint pre configured for React Native

Note: Custom Drawer and Custom Bottom Tabs are also part of the boilerplate.

Directory layout

• App/Components: Presentational components
• App/Screens: The application's screens
• App/Assets: Assets (image, audio files, language ...) used by the application
• App/Navigation: React-Navigation setting
• App/Sagas: Redux sagas
• App/Actions: Redux actions
• App/Reducers: Redux reducers
• App/Api: Application services, e.g. API clients
• App/Stores: Redux actions, reducers and stores
• App/Utils: Styles helpers for the application

Requirements

Node 8 or greater is required. Development for iOS requires a Mac and Xcode 9 or up and will target iOS 9 and up.

You also need to install the dependencies required by React Native:

• For Android development
• For iOS development

Using the boilerplate

To create a new project using the boilerplate:

• Clone this repository

• Remove the previous git history: rm -rf .git/

• Install the npm dependencies by running yarn or npm install

• Rename the React Native project (Without custom Bundle Identifier)

  yarn run rename -- <YourProjectName> or npm run rename -- <YourProjectName> (the default name is boilerplate)

• Rename the React Native project (With custom Bundle Identifier, Android only. For iOS, please use Xcode)

  yarn run rename -- <YourProjectName> -b <bundleIdentifier> or npm run rename -- <YourProjectName> -b <bundleIdentifier> (the default name is boilerplate)

• Google Sign-In SDK Android Setup

  For push notifications and google signin to work in the android app place your google-services.json into Android/app folder

• Facebook SDK Android Setup

  For facebook login to work in the android app please provide facebook_app_id and fb_login_protocol_scheme value in the App/app/src/main/res/values/strings.xml

• Google Sign-In SDK iOS Setup

  For push notifications and google signin to work in the iOS app drag your GoogleService-Info.plist to project folder in the xcode and place REVERSED_CLIENT_ID present in the GoogleService-Info.plist to the Url Types present in the Info tab

• Facebook SDK iOS Setup

  For Facebook login to work in the iOS app please provide FacebookAppID value in the Info.plist and place fb_login_protocol_scheme to the Url Types present in the Info tab

• [Optional] CodePush Android Setup

  For code-push to work in the android app please first create app on app center for os="Android" and platform="React Native" . After creating the app you will get app secret key, insert your app_secret into android/app/src/main/assets/appcenter-config.json. Go to the Distribute side menu on the app center, click code push, and generate production and staging deployment keys. Insert production deployment key into file .env.production present in the root directory and insert staging deployment key .env.staging and .env

• [Optional] CodePush iOS Setup

  For CodePush to work in the iOS app please first create app on app center for os="iOS" and platform="React Native" . After creating the app you will get the app secret key, insert your app_secret into AppCenter-Config.plist. Go to the Distribute side menu on the app center, click code push, and generate production and staging deployment keys. Insert production deployment key into Build Settings/User-Defined/CodePushDeploymentKey/Release present in the root directory and insert staging deployment key into Build Settings/User-Defined/CodePushDeploymentKey/Debug

You can now create a new git repository for your project (using git init) and create the first commit.

Running the project

Assuming you have all the requirements installed, you can setup and run the project by running:

• yarn or npm install to install the dependencies
• Run the following steps for your platform

Android

• Only the first time you run the project, you need to generate a debug key with:
  • cd android/app
  • keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
  • cd ../.. to come back to the root folder
• yarn start or npm install to start the metro bundler, in a dedicated terminal
• yarn run android:debug-release or npm run android:debug-release to run the Android application (remember to start a simulator or connect an Android phone)

iOS

• cd ios
• pod install to install pod dependencies
• cd .. to come back to the root folder
• react-native run-ios to run the iOS application (remember to start a simulator or connect an iPhone phone)

Useful documentation

CodePush

CodePush is an App Center cloud service that enables Apache Cordova and React Native developers to deploy mobile app updates directly to their users’ devices.

Google Sign-In SDK

Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account—the same account they already use with Gmail, Play, and other Google services.

Facebook SDK

The Facebook SDK for is the easiest way to integrate your app with Facebook. It enables:

• Facebook Analytics - Understand how people are using your product.
• Facebook Login - Authenticate people with their Facebook credentials.
• Share and Send dialogs - Enable sharing content from your app to Facebook.
• App Events - Log events in your application.
• Graph API - Read and write to Graph API.

License

This project is released under the MIT License.

Why this boilerplate?

I looked into existing boilerplates before starting this project, and while many of them are awesome, But every boilerplate was lacking something, so I come up with a boilerplate that has all the features that modern app needed. For example

• React Native Latest Stable Version (v0.62.3)
• Great Architecture
• React Navigation 5 Configured
• Redux Configured
• Redux Saga Configured
• Redux Persist Configured
• Firebase SDK Integrated
• Facebook SDK Integrated
• Google Sign-in SDK Integrated
• Code-Push SDK Integrated
• Push Notifications Configured
• Dark Theme Configured
• Multilingual Configured
• Splash Screen Configured
• Vector Icons Configured
• TypeScript Support