ReactNativeGetStarted 📱

A simple template project to start a ReactNative Application

Commands

Install Dependencies

yarn

For IOS only, pod installation

yarn pods

For Android only, gradlew clean

cd android && ./gradlew clean

Run Application on either Platform android, ios:

yarn ${platform}

Run for test:

yarn test

Run for get the report of coverage

yarn coverage

Run for lint:

yarn lint

Run Storybook on either Platform android, ios:

yarn storybook:${platform}

Usage

1. You can just download and change what you need.
2. ( ✅ recomended ) Create a new ReactNative app and move src/, test/, storybook/ folders and install the respective dependencies ( ⚠️ check this project package.json and babel.config.js to avoid unexpected erros ⚠️)

Pos Installation

Splash screen

on case of want to implement a good and simple bootsplash here it is a good to to do it easy and quick:

• react-native-bootsplash

Contains

Navigation

• React-navigation

Components

• Emotion
• Storybook

Store Management

• Redux
• React-redux
• ReduxSauce

Testing

• React Native Testing Library
• @emotion/jest
• jest-html-reporter
• redux-saga-test-plan
• react-native-debugger

Assets

• react-native-svg-transformer

Http Client

• apisauce

Why Atomic Design

As Js developer I get the need to reuse and share code created by me for that and the capability of scale project I prefer usigin this way of thinking, this project is based on Brad Frost concept of Atomic Design and the pattern Presentational and Container.

Folder Architecture

This project is base on atomic desing and module division for that is important mantain all parts of the app as detach as posible for that is proposed this separation:

src
|_
    components
        |_
            Atoms
            Molecules
            Organisms
            Navigation
            Screens
    constants
    hooks
    services
    store
    themes
    utils
test
    |_
        coverage
        mocks
storybook

Component construction

For maintain the template as clean as possible I desing the next file naming convention:

📁 Component_folder:

• ${componet_name}.js main element.
• ${componet_name}.styles.js element desing variations.
• ${componet_name}.stories.js storybook file to present components as a desing library.
• ${componet_name}.test.js testing element, this one should be used for every variation.

Store Management

The store management is simple as two sides reducer and sagas both need to be defined at respective roots.

👀 See store folder.

📁 Store_folder:

• ${componet_name}Reducer.js reducer contains Types ands Actions .
• ${componet_name}Sagas.js sagas contains sagas provider needs to match Reducer Types.

Hooks

This folder is used to store react hooks implementing specific logic from store and other computed data.

🚧 explanation on construction 🚧.