React Native Boilerplate

This project is a React Native boilerplate that can be used to kickstart a mobile application.

The boilerplate provides a solid foundation for building cross-platform mobile applications. It emphasizes a clear separation of concerns between the UI and business logic, making it easier to maintain and scale your mobile app.

If you like the project, give us a star 🤩.

Table of Contents

• Requirements
• Quick Start
• Dependencies
• Dev Dependencies
• Folder Structure
• License
• About Us
• Contributing

Requirements

Node 18 or greater is required. Development for iOS requires a Mac and Xcode (please use the latest version).

You also need to install the dependencies required by React Native.
Go to the React Native environment setup, then select React Native CLI Quickstart tab.
Follow instructions for your given development OS and target OS.

Quick Start

To initialize a new project using this boilerplate, run the following command:

npx react-native@latest init AwesomeProject --template @gbrlcoelho/react-native-boilerplate

Dependencies

• React Native - A framework for building native apps with React.
• React Navigation - Routing and navigation for your React Native apps.
• react-hook-form - Performant, flexible and extensible forms with easy-to-use validation.
• react-native-mmkv - MMKV is an efficient, small mobile key-value storage framework.
• @tanstack/react-query - Powerful asynchronous state management for React.
• react-native-svg - SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.
• @shopify/restyle - A type-enforced system for building UI components with React Native.
• axios - Promise based HTTP client for the browser and node.js.
• date-fns - Modern JavaScript date utility library.
• @hookform/resolvers - Resolvers for react-hook-form.
• zod - TypeScript-first schema declaration with static type inference.
• zustand - A small, fast and scalable bearbones state-management solution.

Dev Dependencies

• @tanstack/eslint-plugin-query - ESLint plugin for react-query.
• jest - A delightful JavaScript Testing Framework with a focus on simplicity.
• testing-library/react-native - Simple and complete React Native testing utilities that encourage good testing practices.
• babel-plugin-module-resolver - A Babel plugin to add a new resolver for your modules when compiling your code using Babel.
• cz-conventional-changelog - Commitizen adapter following the conventional-changelog format.
• eslint-plugin-import - ESLint plugin with rules that help validate proper imports.
• husky - Git hooks made easy.
• lint-staged - Run linters against staged git files and don't let 💩 slip into your code base!
• prettier - An opinionated code formatter.
• msw - Mock Service Worker is an API mocking library for browser and Node.
• react-native-dotenv - A Babel plugin that allows you to use environment variables in your React Native app.

Folder Structure

The folder structure of this boilerplate is explained below:

.
├── src
│   ├── api
│   │   ├── apiConfig.ts
│   │   └── index.ts
│   ├── assets
│   │   ├── brand
│   │   ├── fonts
│   │   └── icons
│   ├── components
│   │   └── index.ts
│   ├── domain
│   │   ├── Auth
│   │   │   ├── adapter.ts
│   │   │   ├── api.ts
│   │   │   ├── service.ts
│   │   │   └── types.ts
│   │   └── index.ts
│   ├── hooks
│   │   └── index.ts
│   ├── infra
│   │   ├── hooks
│   │   ├── index.ts
│   │   └── types.ts
│   ├── routes
│   │   └── index.ts
│   ├── screens
│   │   └── index.ts
│   ├── services
│   │   └── index.ts
│   ├── test
│   │   ├── server
│   │   │   ├── handlers.ts
│   │   │   └── server.ts
│   │   ├── jestSetup.ts
│   │   ├── test-utils.tsx
│   │   └── index.ts
│   ├── theme
│   │   └── theme.ts
│   ├── types
│   │   └── index.ts
│   └── utils
│       └── index.ts
├── .env
.

src/

This folder is the main container of all the code inside your application.

src/api/

This folder contains all the api related stuff like apiConfig.

src/assets/

This folder contains all the assets of your application like brand, fonts and icons.

src/components/

This folder contains all the shared components of your application.

src/domain/

This folder contains all the domain related stuff like use cases, services, adapters and types.

src/hooks/

This folder contains all the custom hooks of your application.

src/infra/

This folder contains all the infrastructure of react query like hooks and types.

src/routes/

This folder contains all the routes of your application.

src/screens/

This folder contains all the screens of your application.

src/services/

This folder contains all the internal services of your application like MMKV, zustand and etc.

src/test/

This folder contains all the test related stuff like server, jestSetup, test-utils and etc.

src/theme/

This folder contains @shopify/restyle theme of your application.

src/types/

This folder contains all global types of your application.

src/utils/

This folder contains all the utility functions of your application.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About Us

I am a mobile developer and I love to create beautiful and performant mobile applications, if you want to talk about it, please contact me.

Contributing

If you find any problems, please open an issue or submit a fix as a pull request.