React-Native-Template

The goal of this project is to work as template for react-native applications, providing a base project structure, core dependencies and boilerplate to jumpstart development.

Prerequisites

• Node JS > 12 and npm (Recommended: Use nvm)
• Watchman
• Xcode
• Cocoapods
• JDK > 8
• Android Studio and Android SDK

Base dependencies

• axios for networking.
• prop-types to type-check our components exposed properties.
• react-native-config to manage envionments.
• react-navigation navigation library.
• react-native-localization for string localization.
• react-native-mmkv-storage as storage solution.
• redux for state management.
• redux-persist as persistance layer.
• redux-thunk to dispatch asynchronous actions.
• jest and react-native-testing-library for testing.

Usage

Use Template button

Click the "Use this template" button above the file list, then use the Owner drop-down menu, and select the account you want to own the repository. Creating a repository from a template has the following advantages:

• A repository created from a template starts with a single commit.
• Commits to a repository created from a template do appear in your contribution graph.
• Creating a repository from a template starts a new project quickly.

Option #1: Using React-Native-Rename

You can start by cloning this repository and using react-native-rename. In the current state of this project, it should give you no issues at all, just run the script, delete your node modules and reinstall them and you should be good to go.

Keep in mind that this library can cause trouble if you are renaming a project that uses

Pods

After that you should proceed as with any javascript project: - Go to your project's root folder and run

npm install

.env

npm run ios

npm run android

Option #2: Copy the structure to your project

If you want to roll on your own and don't want to use this as a template, you can create your own project and then copy the

/src

index.js

Keep in mind that if you do this, you'll have to install and link all dependencies (as well as adding all the necessary native code for each library that requires it).

Folder structure

This template follows a very simple project structure: -

src

actions

assets

components

constants

controllers

localization

navigation

reducers

index.js

screens

Screen

index.js

Screen.js

Screen.styles.js

Screen.test.js

index.js

selectors

storage

store

theme

App.js

index.js

Splash screen customization

To customize the splash screen (logo and background color) use the CLI provided in the official docs.

Setup environments

Add the environment variables files in root folder(.env.staging and .env.production)

Android

A map associating builds with env files is already defined in

app/build.gradle

For multiple enviroments to work you would need to change

-keep class [YOUR_PACKAGE_NAME].BuildConfig { *; }

proguard-rules.pro

iOS

The basic idea in iOS is to have one scheme per environment file, so you can easily alternate between them.

Start by creating a new scheme:

• In the Xcode menu, go to Product > Scheme > Edit Scheme
• Click Duplicate Scheme on the bottom
• Give it a proper name on the top left. For instance: "Production"
• Then edit the newly created scheme to make it use a different env file. From the same "manage scheme" window:

Expand the "Build" settings on left - Click "Pre-actions", and under the plus sign select "New Run Script Action" - Where it says "Type a script or drag a script file", type:

echo ".env.production" > /tmp/envfile

Styleguide

For coding styling we decided to go with ESLint and React Native community's styleguide.