React Native Redux Boilerplate

React Native Redux Boilerplate is a starting point for React Native application. It is helpful to quick start developing with a well structured project and the minimum required dependencies.

This boilerplate is structured based on the post An efficient way to structure React Native projects.

Features

React Native (0.61.5)
React Navigation (5.0.0) and other required dependencies
Babel Plugin Module Resolver (4.0.0) and other recommended dependencies to simplify the require/import of paths in the project

Requirements

A development machine set up for React Native by following these instructions

Getting Started

Assuming you have all the requirements installed, you can setup and run the project by running:

Clone this repository, git clone https://github.com/NeftalyLT/react-native-boilerplate.git <your-project-name>
Go to project's root directory, cd <your-project-name>
Remove the previous git history (.git folder), rm -rf .git
Use React Native Rename to update project name npx react-native-rename <newName>
Run yarn or npm install to install dependencies
Connect a mobile device to your development machine
Run the application:
- On Android:
  - Run npx react-native run-android
- On iOS:
  - Open ios/YourReactProject.xcodeproj in Xcode
  - Hit Run after selecting the desired device
  - Or you can run the project using npx react-native run-ios inside the React Native project folder

If you use the Yarn package manager, you can use yarn instead of npx when running React Native commands inside the project.

Structure

The src directory contains all major project files

├── src
│   ├── assets
│   │  ├── fonts
│   │  ├── images
│   ├── components
│   │  ├── atoms
│   │  ├── molecules
│   │  ├── organisms
│   ├── navigations
│   ├── screens
│   ├── services
│   ├── styles
│   ├── utils
│   ├── index.js

The directories we use to organize the components

├── src
│   ├── components
│   │  ├── atoms
│   │  ├── molecules
│   │  ├── organisms

Atoms: The smallest possible components, such as buttons, titles, inputs or event color pallets, animations, and fonts.

Molecules: They are the composition of one or more components of atoms.

Organisms: The combination of molecules that work together or even with atoms that compose more elaborate interfaces.

In each component directory, we have an index.js file that exports the specified category.

Note: The App.js in the project root was removed, instead we use src/index.js

License

This project is released under the MIT License.