This project aims to provide you with boilerplates based on the best practices to build a production ready mobile application using ReactNative. It would serve at the same time as a tutorial.
The choice was made to perform all the development in Typescript instead of the combination of ES6 and propTypes.
Each branch of this ReactNative project will reflect the use of a specific librairy, tool or framework, ...
For example, the firebase-example branch contains a full example of an application (still under construction) that uses Firebase for its database.
The master branch contains the basic setup.
Many other branches are to come to demonstrate the use of :
- Google Maps
- Integrated camera (Facebook Messenger like)
- Native video/sound player
- ... and all other good ideas the community would come with
These are the different steps to run the app :
1 - Make sure you have ReactNative cli, npm, yarn and Typescript installed on your machine
2 - Download or clone the source code of this project
3 - Open a terminal and go within the root folder of the project
4 - Install the different librairies by running, within the terminal, the following command line : yarn
5 - Put your own TMDB api key within the .env (TMDB is used to demonstrate the http requests)
6 - Within the terminal, run yarn start:android if you want to start the app on an android device else run yarn start:ios for iOS devices.
The following paragraphs contain the main information/links that were used to put in place the master branch of this project.
The mains ideas are :
- the use of
Typescript - the use of
Reduxfor state management - the use of Wix's
React Native Navigationto handle the navigation within the app.
In a default ReactNative project, the entry files (the javascript files used to bootstrap the app) are placed within the root folder of the project. But to insure a better architecture and so better readability of the code, all the ts/tsx (Typescript) files are located within the src folder. And because the ReactNative is based on javascript and not typescript these files are transpiled to javascript and put within the build folder. So the Android and iOS projects must, now, point the entry files that are located within the build folder.
The following steps are inspired from the Refactor Android to TypeScript paragraph in this link
The tsconfig.json is configured such as the js files are built within a build directory at the project's root.
- For Android
Open android/app/build.gradle and add the following line before apply from "../../node_modules/react-native/react.gradle"
project.ext.react = [
entryFile: "build/src/index.android.js"
]
And open MainApplication.java and add the following method within the ReactNativeHost class definition :
@Override
protected String getJSMainModuleName() {
return "build/src/index.android";
}- For iOS
Open ios/RNTestProject/AppDelegate.m and change "index.ios" to "build/src/index.ios".
jsCodeLocation = [[RCTBundleURLProvider sharedSettings]] jsBundleURLForBundleRoot:@"build/src/index.ios"
fallbackResource:nil];
Because ReactNative doesn't come with full ready-to-use UI components, the use of an external library for UI compnents is preferable to save time. You can choose between NativeBase or ReactNativeElements. For the moment NativeBase is used for the project.
React Native Elements on github
React Native Elements kitchen sink APP
Here is the link that used to put in place the use of Typescript within this ReactNative project project.
It wasn't 100% followed. For example the tests are kept under __tests__ folder, the js files are created at the same folder than the tsx file, not all the tslint configuration is used...
tsconfig.json file information about the inclusion of @types.
Take a look at the tsconfig.json file to have an idea about the configuration put in place.
Be careful :
- when using custom components
- with The as operator : it is encouraged to use
asnotation insteaod of<type>notation
The React Native Navigation library is used :
Make sure to perform the specific steps for ios
Module to expose config variables to your javascript code in React Native, supporting both iOS and Android.
1 - yarn add react-native-config
2 - react-native link react-native-config
This folder can be used to put the different assets of the project like photos, videos, ...
This link was used to make the assets' content available to ts/js files using "assets" as a reference.
The trick is to add a package.json file to the assets folder.
{
"name": "assets"
}More information in this link.
Override getSplashLayout or createSplashLayout in MainActivity to provide a splash layout which will be displayed while Js context initialises, for example:
import android.widget.LinearLayout;
import android.graphics.Color;
import android.widget.TextView;
import android.view.Gravity;
import android.util.TypedValue;
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends SplashActivity {
@Override
public LinearLayout createSplashLayout() {
LinearLayout view = new LinearLayout(this);
TextView textView = new TextView(this);
view.setBackgroundColor(Color.parseColor("#607D8B"));
view.setGravity(Gravity.CENTER);
textView.setTextColor(Color.parseColor("#FFFFFF"));
textView.setText("React Native Navigation");
textView.setGravity(Gravity.CENTER);
textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 40);
view.addView(textView);
return view;
}
}Axios is used to run http requests and load resources from a remote URL.
Here is the axios documentation.
Run : yarn add axios
Here are the links used to put in place Redux within this project :
-
This tutorial was used to add redux to the react native project
-
This project was used as a concrete example.
-
The added libraries are :
-
react-redux -
redux -
redux-thunkthat helps making asynchronous calls -
redux-logger -
redux-immutable-state-invariant
=> the command to add them is :
yarn add redux react-redux redux-thunk -
react-native-i18n is used to handle the internationalization.
A manual setup is needed to complete this step.
react-native-storage is used to store data locally on the phone. It is based on the react native's AsyncStorage.
CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDKs). This allows you to have a more deterministic and direct engagement model with your end-users, while addressing bugs and/or adding small features that don’t require you to re-build a binary and/or re-distribute it through any public app stores.
May be to use to bootstrap a screen's components display (design) but it lacks many other options such us formatting a file, when adding a new style property it doesn't add it automatically to the "Properties" tab to edit it other from the code.
Deco is an all-in-one development environment specifically designed for React Native. It can automatically set up a new project, search for open source components, and insert them. You can also tweak your app graphically in real time. Check it out if you use macOS.