React Native OpenFashion

This project aims to be a strong foundation for react-native applications. It provides a clear and organized structure, core dependencies, and boilerplate to jumpstart development.

Prerequisites

• Node.js > 14 and npm (Recommended: Use nvm)
• Watchman
• Xcode 13
• Cocoapods 1.10.1
• JDK > 11
• Android Studio and Android SDK

Base dependencies

• axios for networking.
• react-native-config to manage envionments.
• react-navigation navigation library.
• redux for state management.
• redux-persist as persistance layer.

Setup environments

Using scripts from console

The template already has scripts to execute the project calling a specific environment defined into the package.json file. Keep in mind that if you are going to create new envs you have to define the script to build the project properly.

To define which env you want to use, just keep the structure yarn [platform]: [environment]

DEV: yarn ios or yarn android

STG: yarn ios:staging or yarn android:staging

PROD: yarn ios:prod o yarn android:prod

Also, you can use npm following the same rule as before: npm run ios:staging

Modify the environment variables files in root folder (.env.development, .env.production and .env.staging)

Android

A map associating builds with env files is already defined in app/build.gradle you can modify or add environments if needed.

For multiple enviroments to work you would need to change -keep class [YOUR_PACKAGE_NAME].BuildConfig { *; } on proguard-rules.pro file.

iOS

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

To create 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: "qa"

• Then edit the newly created scheme to make it use a different env file. From the same "manage scheme" window:

  Expand the "Build" tab on the left menu

  • 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.qa" > /tmp/envfile replacing .env.qa with your file.

• Also, you will need to select the executable for the new schema:

  Expand the "Run" tab on the left menu

  • Under the "Executable" dropdown select the ".app" you would like to use for that schema

Generate production version

These are the steps to generate .apk, .aab and .ipa files

Android

1. Generate an upload key
2. Setting up gradle variables
3. Go to the android folder
4. Execute ./gradlew assemble[Env][BuildType]

Note: You have three options to execute the project assemble: Generates an apk that you can share with others. install: When you want to test a release build on a connected device. bundle: When you are uploading the app to the Play Store.

For more info please go to https://reactnative.dev/docs/signed-apk-android

iOS

1. Go to the Xcode
2. Select the schema
3. Select 'Any iOS device' as target
4. Product -> Archive

For more info please go to https://reactnative.dev/docs/publishing-to-app-store

Styleguide

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

How to use it

The idea of this section is to explain how the template composition is the best and easiest to use when you try to use well-formed, architectures, especially using redux flow.

The template follows a simple and convenient exporting pattern. The folder index exposes the resources, allowing to import all from the same path.

With that in mind, we are going to look at each folder to explain how to use it.

Components

Components are the basic blocks of a react native application, but since we​​ aim to minimize development complexity, all the components are uding Atomic Design. Atomic Design is a specific way of organizing the components of a project; it is directly inspired by Atomic concepts of chemistry, hence the name. Atomic Design takes inspiration from the concept of an atom being the smallest unit, followed by a molecule being the combination of atoms, and, finally, organisms being made of molecules.

Containers

In this folder, you have the main objects to apply the composition architecture. Just create a folder for each screen you have in your application, call all the components and static resources you need to render the scene and finally use the corresponding hooks to interact with redux and create behaviors depending on the store.

To keep the structure, extract the styles from the main file and place it in a {namefile.styles.js}