Gabruw's React Native Boilerplate

A complete boilerplate to be completed by your code

💾 Info

🧰 OS

🤖 Technologies

⚙ First-class Support

🔰 Getting Started

This project can help you to build your own React Native Application faster.

You will find a clean project to evolve as you want with basic libs, configured workspace, lint, integration with Github Actions and zero production dependencies.

📋 Pre-requisites

You will need to have the following softwares installed already:

If you don't have the softwares installed, click on the badges to be redirected to the installation tutorial.

📌 Installation

🏷 How to use as template

You can click on "Use this template" button in the top of this page to create your own project based on it.

🔩 Local setup

1 - VS Code

When you open the project in VS Code, the pop-up recommending the workspace extensions will be shown in left bottom.
I strongly recommend you to install them, cause this boilerplate was thought to use them.

2 - Dependencies

The project only has developer dependencies, to install them run:

yarn install

Run the mount command to install the global package dependencies:

yarn mount

3 - Pre build

Generate the pre build command to update the android and ios projects to be able to run the project:

yarn prebuild

4 - Debug

As were specified on "Technologies" topic, the project has first class support for React Native Debugger. If you wanna know how to install and run the React Native Debugger, clicking here.

🏗 Structure

🏘 Domain, module and folders

All the folders except pages folder is considered global stuff, and the same structure needs to be replicated inside every page that's, if needed. Every page is a new module, and for module, we can define as a collection of files that was created to support the same motivation (domain).

🌍 Nomenclature

Pattern	Category
Pascal Case	Components
Camel Case	Functions and hooks
Kebab Case	Folders, constants, types and assets

🗃 Tests

All test files needs .test. suffix to be recognize for Jest configuration.

You will found 3 types of test folders:

Folder	Description
__tests__	A collection of test files from that module
__mocks__	A collection of mocks generated by jest.mock functions
__fixtures__	A collection of functions and constants that will be used in one or more test files

🏛 Architecture

This project is based in MVC pattern.

All components must be separated as:

Type	Description
View	use the index files to define the visual elements
Types	use files with .d.ts extension. In case of more than one file, create a folder to aggregate them
API	use hooks to query, and separate the types in another file. It will be called in index files or business rules
Business rules	use hooks, storages, functions and constants that will be called between them or inside index files

🔖 Features

Test	Idiom	Router	API	Form	Storage	Security	Utils	CI/Quality	Visual
Jest	I18next	Navigation	Apollo Client	Zod	Redux	Jail Breaker	Camera	Husky	Paper
				Hook Form	Async Storage	Cache Loader	Net Info	ESLint	Lottie
								Prettier	Inter Fonts
									Splash Screen
									Styled Components

📑 License

Distributed under the MIT License. See LICENSE for more information.