React Native Boilerplate

An opinionated boilerplate code for starting a new react native mobile project.

_{Created and maintained with ❤️ by LoopStudio}

Prerequisites

To set up the environments it's recommended to follow the official documentation

Otherwise follow the next steps:

Before proceeding, make sure you have the following installed on your machine:

Node.js
NPM
Git
Android Studio (for the Android platform)
Xcode (for the iOS platform)

Installation of prerequisites for Android Studio

For Android Studio, make sure you have installed the following:

JDK 8 or higher
Android SDK (the latest stable version is recommended)
Android SDK Platform 29 or higher
Android SDK Build-Tools 29.0.2 or higher
Android Emulator (optional)

Installation of prerequisites for Xcode

For Xcode, make sure you have installed the following:

Xcode (the latest stable version is recommended)
iOS SDK (installed automatically with Xcode)
iOS Simulator (installed automatically with Xcode)

Installation

To install the project dependencies, follow these steps:

Clone this repository using Git:

git clone https://github.com/loopstudio/react-native-boiler23.git

Navigate to the project folder:

cd rnBoilerLoop

Install the dependencies using NPM:

yarn install

Running the project on Android

To run the project on an Android device, follow these steps:

Open Android Studio and load the project.
Make sure that the Android SDK you are using in Android Studio is the same as specified in the android/build.gradle file.
Open a terminal in the project's root folder and run the following command:

yarn android

This will compile the project and run it on an Android device connected to your machine.

Running the project on iOS

To run the project on an iOS device, follow these steps:

Open Xcode and load the project.
Make sure that you have the latest stable version of Xcode installed and updated on your machine.
Open a terminal in the project's root folder and run the following command:

yarn ios

This will compile the project and run it on an iOS simulator on your machine.

Pre-commit and pre-push hooks:

IMPORTANT:

We use husky as a tool to run the linter and unit testing when commiting and pushing new changes. In order to get it working you need to install it firt by running:

yarn run prepare:husky

NOTE: This has to be run locally just once.

We have added a `pre-commit` and `pre-push` hooks, so linter and test are run before pushing the code to the remote. If for some reason you don't want these processes to be run, add the flag `--no-verify`, for example:

# commit
git commit --no-verify -m "commit message"
# push
git push --no-verify

Conclusion

That's it! Now you know how to install and run the React Native project for Android and iOS. If you have any questions or issues, feel free to ask in the React Native help forums or the repository issues.

Project Structure
Features
Prerequisites
List of Packages
Recommended Extensions
Getting Started
Running the Test Suite
Contributing
Credits

Project Structure

.
├── .github/
├── public/
├── .husky/
├── src
│   ├── assets/
│   ├── features/
│   ├── navigator/
│   ├── services/
│   │   ├── commons/
│   ├── helpers/
│   ├── screens/
├── App.tsx
├── .env
├── .gitignore
├── .eslintrc.json
├── .firebaserc
├── .prettierrc.json
├── firebase.json
├── tsconfig.json
├── jest.config.js
├── package.json
├── README.md
└── yarn.lock

Feature Structure

├── features
│ └── myFeature
│   ├── components/
│   ├── hooks/
│   ├── layouts/
│   ├── services/
│   ├── types.ts
│   └── index.ts

What does a feature export?

A feature should export anything that is meant to be consumed from outside the feature IE:

actions
reducer
components (if they're meant to be used outside the feature)
hooks (if they're meant to be used outside the feature)
helpers (if they're meant to be used outside the feature)

Component Structure

├── MyComponent
│ ├── index.ts
│ ├── MyComponent.tsx
│ ├── MyComponent.styles.tsx
│ ├── MyComponent.test.tsx

Optional

If you want to split your component into pieces for readability, maintainability, or any other reason you could put the secondary components in the same folder. This is only for cases where these secondary components are only used inside MyComponent. If later they want to be used in other places they should be extracted to their own folder inside components.

├── MyComponent
│ ├── index.ts
│ ├── MyComponent.tsx
│ ├── MyComponent.styles.tsx
│ ├── MyComponent.test.tsx
│ ├── SecondaryComponent.tsx
│ ├── SecondaryComponent.styles.tsx

Features

Based on React Native Documentation.
Code splitting and prefetching.
Errors handling.
The httpClient provides status code errors handling and camelCase to snake_case automatic conversion.
Async actions and store hydration.
Internationalization.
Concurrent Mode ready.

Prerequisites

Install Node.js 10.16.3 or greater.
Install Yarn as a package manager.

List of Packages

Navigator:

React Navigation Documentation: the most popular and powerful routing solution for React.

Icons:

react-native-vector-icons: React Native Vector Icons is a library that provides a set of customizable vector icons for use in React Native applications. It includes popular icon sets such as Font Awesome, Material Icons, and Ionicons. The library allows developers to easily add high-quality icons to their applications and customize their appearance using various properties.

Testing:

jest: a delightful JavaScript Testing Framework with a focus on simplicity.
react-testing-library: a very light-weight solution for testing React components.
cypress: automated integration tests. This tool isn't installed in our project, but we recommend to use it. You can install it running yarn add cypress --dev. For more information about the configuration, you can read this guide

Flavors/Scheme:

react-native-config: React Native Config is a package that allows you to manage your React Native app's configuration files in a clean and efficient way. It provides a simple API for accessing environment-specific settings, such as API endpoints, credentials, and other configuration values, and allows you to define these settings in dedicated files for each environment (e.g. development, staging, production).

CI/CD:

Github actions: GitHub Actions is a feature of the GitHub platform that allows developers to automate their software development workflows. With GitHub Actions, you can create custom workflows that are triggered by various events, such as push and pull requests, and then execute a series of actions to build, test, and deploy your code. These workflows can be defined using YAML syntax and can be shared and reused across projects. GitHub Actions also provides a marketplace of pre-built actions that you can use in your workflows.
Fastlane: Fastlane is a tool for automating the development and deployment of mobile applications. It provides a set of actions that you can use to build, test, and deploy your iOS and Android apps. With Fastlane, you can define your workflows using a simple configuration file, and then run them from the command line or integrate them with your CI/CD pipeline. Fastlane also provides a number of integrations with other tools and services, such as GitHub, Jenkins, and Slack.

Recommended Extensions

Style / Linting

VSCode:

Prettier - An opinionated code formatter.
ESLint - Integrates ESLint into VS Code.

Sublime:

Prettier - JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter.
ESLint - ESLint any JavaScript file in Sublime Text.

Intellisense

VSCode:

Visual Studio IntelliCode - AI-assisted development features.
Path Intellisense - Visual Studio Code plugin that autocompletes filenames.
npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements.

Sublime:

SublimeCodeIntel - Full-featured code intelligence and smart autocomplete engine.
AutoFileName - Sublime Text plugin that autocompletes filenames.

Version Control

VSCode:

Git Blame - See Git Blame information in the status bar for the currently selected line.

Sublime:

Git Blame - Show Git blame information while viewing a file in Sublime Text.

Syntax Highlighting

VSCode:

DotENV - A port of DotENV for VSCode.
Color Highlight - This extension styles CSS/web colors found in your document.
VSCode Styled Components - Syntax highlighting and IntelliSense for styled-components or emotion.

Sublime:

DotENV - SublimeText Syntax Highlighting support for Environment (.env) Files
Color Highlight - 🎨 Lightweight Color Highlight colorizer for Sublime Text

Snippets

VSCode:

ES7 React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VSCode.

Sublime:

ES7 React/Redux/GraphQL/React-Native snippets - Sublime ES7 React/Redux/React-Native/JS snippets.

Running the Test Suite

Run the yarn test command.

Credits

React App Boilerplate is maintained by LoopStudio.

loopstudio/react-native-boiler23

React Native Boilerplate

Prerequisites

Installation of prerequisites for Android Studio

Installation of prerequisites for Xcode

Installation

Running the project on Android

Running the project on iOS

Pre-commit and pre-push hooks:

IMPORTANT:

We have added a pre-commit and pre-push hooks, so linter and test are run before pushing the code to the remote. If for some reason you don't want these processes to be run, add the flag --no-verify, for example:

Conclusion

Table of Contents

Project Structure

Feature Structure

What does a feature export?

Component Structure

Optional

Features

Prerequisites

List of Packages

Navigator:

Icons:

Testing:

Flavors/Scheme:

CI/CD:

Recommended Extensions

Style / Linting

Intellisense

Version Control

Syntax Highlighting

Snippets

Running the Test Suite

Credits

We have added a `pre-commit` and `pre-push` hooks, so linter and test are run before pushing the code to the remote. If for some reason you don't want these processes to be run, add the flag `--no-verify`, for example: