React native zolerplate

Summary

1. Dependencies
2. Architecture
   2.1. Assets
   2.2. Components
   2.3. Views
   2.4. Store
   2.5. Navigation
   2.6. Services
   2.7. Theme
   2.8. Environment variables
3. How to use ?
   3.1. Requirements
   3.2. Creating project
   3.3. Set up project
   3.4. Run project
4. Git rules
   4.1. Commit prefix
   4.2. Branches prefix
5. Project environments
   5.1. Develop
   5.2. Pre-production
   5.3. Production
6. Deployments

Dependencies

• App Center
• Axios
• Flipper
• i18next + react-i18next
• Notifee
• React Query
• React native async storage
• React native device info
• React native firebase
• React navigation
• Reanimated
• Redux

Architecture

Assets

Contains all images and icons of the app. It can also contain fonts files.

Components

Contains generic components with no intelligence (all data are given to them by the props) in order to be as reusable as possible. They are ordered following the atomic design principle (atoms, molecules, organisms, templates)

Views

Contains components corresponding to screens of the application. They contain all the intelligence of the app and load all data that need to be loaded.

Store

We can use Redux to store that either need to be persisted or not. For that, we can use the 5 actions already available (no need to create our own):

• addPersistedData to add a persisted data from the store

const dispatch = useDispatch();
const saveToken = useCallback(
    () => dispatch(addPersistedData({key: 'token', value: someValue})),
    [dispatch],
);

• removePersistedData to remove a persisted data from the store

const dispatch = useDispatch();
const removeToken = useCallback(
    () => dispatch(removePersistedData({key: 'token'})),
    [dispatch],
);

• addData to add a not persisted data from the store (it will be reset if the app is closed)

const dispatch = useDispatch();
const saveValue = useCallback(
    () => dispatch(addData({key: 'notPersisted', value: someValue})),
    [dispatch],
);

• removeData to remove a not persisted data from the store

const dispatch = useDispatch();
const removeValue = useCallback(
    () => dispatch(removeData({key: 'notPersisted'})),
    [dispatch],
);

• resetStore to clear all the persisted data and come back to the initial state defined in initialState.js

const dispatch = useDispatch();
const reset = useCallback(
    () => dispatch(resetStore()),
    [dispatch],
);

You can also get any data from the store with the useSelector hook :

//For the persisted states
  const token = useSelector(state => state.persistedData.token);
//For the others
const token = useSelector(state => state.data.notPersisted);

Navigation

Contains all the navigators of the app and the Route names definitions.

Services

Contains all API calls and Axios instance.

Theme

Centralizes the style of the application (everything is described in another README into the Theme folder)

Environment variables

All env variables are described in the env.js file. Here, you need to specify in which environment you are in order to display the appropriate header in the environment component (useful for tests phases).

How to use ?

Requirements

Follow the React-Native documentation to set up your environment here
/!\ Follow the guidelines from the React Native CLI QuickStart tab, without Expo.

Creating project

npx react-native init <YourProjectName> --template @zolteam/react-native-zolerplate

Set up project

• Install dependencies: yarn ``
• Install ios native dependencies:

yarn pod-install

Run project

• In one command window run: yarn start to open metro bundler (logs will appear here)

• In another command window run:

  • android: yarn android

  • ios: yarn ios

Git Rules

Commit prefix

Commit should look like this : "[type] description message"

Type must be one of :

• [+] new feature
• [*] iteration
• [#] bug fix

Branches Prefixes

feature : /feature/[feature-name]
hotfix : /hotfix/[ticketNumber-description]
refacto : /refacto/[description]

Project environments

A component called EnvironmentComponent is available to let the user know in which environnement the app is running. It displays a small banner which change color according to env (red for dev, yellow for staging and green for preprod) and a button to see current version and build number. This banner will not be shown in production environment.

Develop

Git Branch Name: develop
API URL:
Back-office URL:
How to deploy :

Pre-production

Git Branch Name: preprod
API URL:
Back-office URL:
How to deploy :

Production

Git Branch Name: main
API URL:
Back-office URL:
How to deploy :

Deployments

First you need to set up appCenter packages and create apps by following this documentation.
Don't forget to change your app secret with the right values in android and ios folders.

To deploy the app we will use zol-msappcenter-publish package. All steps to use the package is described in its documentation.

More details on app Center set-up here

Deploy with this package will :

• Increase version numbers
• Generate changelogs (useful for the release notes)
• Commit changes and create a version tag
• Push tag and changes to the repo