How we build apps using React Native: Boilerplate

UPTech…React Native.. when I came here I couldn’t even imagine that I’ll be using this technology. It turned my life upside down and now I can’t imagine myself without it. I know that RN has a lot of haters, but it works, works good and we are already working on the fourth project using RN.

Every time a new project starts, we have the same problem that takes a lot of time — building an architecture of the future app. We noticed that it’s usually the same, but some features can differ from time to time. So, we created our own Uptech React Native boilerplate, that speeds up our developer process.

It’s in alpha version now, you are welcome to contribute, while we keep updating it.

Application State Management

Managing user data, tabs, spinners, and so on is quite a complicated task. We think that solution Redux offer is the best one. It provides a single global application state, called as store. Each component can potentially initiate action to change the store, as well as each component which observes the state can receive new Props when data is changed.

Moreover, there are many great additional instruments like redux-persist (Offline-first application) or redux-saga (middleware for handling side effects).

Boilerplate consists of Redux folders structure

We are following Duck-files for organizing redux staff like constants, action creators, reducers, etc. You can check it out here or simply take a look on the src/store/main/duck.js file.

Instruments and plans

We’ve already installed redux-observable, RxJS, redefined Fetch. Unit tests (Jest) are set up and our code is 100% covered with tests, so feel free to look into how we did it and start to cover your code with tests! It really helps :)

In future we plan to set up automated tests (it should be an appium). Also, we preinstalled Sentry. You may use this tutorial to fully install it. We always use rules and standards of writing a good code, so we added ESLint that extends Airbnb rules.

We added react-native-navigation (made by WIX) into separate branch feature/wix_navigation. As for our projects, not each of them is built with navigation, so it’s separated in different branch.

We plan to add settings for fbsdk, fcm, because it always takes much time. Please leave in comments what else takes your time to install and set up (maybe we’ll include it in boilerplate or you can try to do it on your own ;))

In our vision, we will have a huge repo in future with pre-installed features and different branches and in case you need some specific ones, you just merge branches and receive a set up project in a few mins.

How to use the boilerplate

UPTech boilerplate is not using any of ‘create-react-native-app’ commands, you should clone the repo to use the boilerplate.

To rename your app use react-native-rename:




  
    yarn global add react-native-rename
 or
 npm install react-native-rename -g

To rename app and bundle Identifier use




  
    react-native-rename  -b

Delete .git folder and init git of your project:




  
    rm -rf .git && git init

Install dependencies:




  
    npm install

Link modules:




  
    react-native link

You will be asked to setup Sentry.

To start use:




  
    react-native run-ios OR react-native run-android.

You will see this:

Here you can see how many times the app was opened, pay attention how is it done in code. We suggest to use RxJS in this way:




  
    /* 
  Epics
 */
 Export Const InitAppEpic = (Action$, Store) => {
   Return Action$
     .OfType(INIT_APP)
     .FlatMap(() => Observable.Concat(
       RestoreAppOpenedCountObservable(),
       IncreaseAppOpenedCountObservable(Store),
     ));
 };
 /*
  Export Observables
 */
 Export Const RestoreAppOpenedCountObservable = () => (
   Observable.Defer(() => (
     Observable.FromPromise(GetAppOpenedTimes())
       .Map(AppOpenedTimes => ({
         Type: SET_APP_OPENED_TIMES,
         Payload: {
           AppOpenedTimes,
         },
       }))
     ))
 );
 Export Const IncreaseAppOpenedCountObservable = Store => (
   Observable.Defer(() => {
     Const AppOpenedTimes = Store.GetState().MainStore.AppOpenedTimes + 1;
     Return Observable.FromPromise(SetAppOpenedTimes(AppOpenedTimes))
       .MapTo({
         Type: SET_APP_OPENED_TIMES,
         Payload: {
           AppOpenedTimes,
         },
       });
     })
 );

It helps us to have predictable asynchronous actions, even if we have to chain them. In this case you will receive stable, reusable and clean code.

We are going to share our experience and thoughts about using react-native-navigation and other cool code-related staff in Part 2 of our article and RxJS and Redux-Observable in next parts.

Here it is! You are welcome to use our boilerplate and make it better !

Subscribe for updates, ask questions, star us on GitHub and love RN ❤

‍