RNBoilerPlate - The Ultimate Latest React-Native App QuickStart

⚛️ React Native Boilerplate: Jumpstart your app development with essential configurations for React Native projects. Includes libraries, navigation, state management, and styling setup. Streamline your workflow and focus on building amazing mobile experiences! 📱✨

Key Features

- Handle Light/Dark Mode: Built-in support for toggling between light and dark modes.
- Localization: Easily localize your app with internationalization support.
- Global State Management: Integration with Redux Toolkit for managing global state.
- Async Data Fetching: Utilize @tanstack/react-query for efficient asynchronous data fetching.
- Authentication Stack: Boilerplate includes authentication stack for user authentication.
- Main Stack: Configured main stack for navigation and UI structure.
- And Many More: Additional features and configurations to streamline development.

Quick Start ⚡

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

``bash
npx rn-react-native-boilerplate
`

This will launch an interactive setup wizard that will guide you through the following steps:

1. Enter Project Name: You will be prompted to enter the name of your new project.
2. Enter Bundle ID: You will be prompted to provide the bundle ID for your project.

Once you have provided this information, the script will create your new React Native project with all the boilerplate features pre-configured.

Create .env file at the root directory with following configurtion to make login and auth feature works.

Ignore if its already there

`
ENV = DEV
BASE_API_URL= https://dummyjson.com
IMAGE_URL= https://dev-tn-file-server.s3.ap-south-1.amazonaws.com
`

Libraries Using RNBoilerPlate 📚










- @react-navigation/native - react-native-screens - react-native-safe-area-context - @react-navigation/native-stack - react-native-mmkv - react-native-masked-view - react-native-gesture-handler

- react-redux - @reduxjs/toolkit - @tanstack/react-query - i18next - @os-team/i18next-react-native-language-detector - react-i18next

- axios - @testing-library/react-native - react-native-keyboard-aware-scroll-view - react-native-reanimated - react-native-restart - react-native-unistyles

Requirements

Node 18 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.

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.

Getting Started

> Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

$3

`bash
yarn start-logs
`

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript _bundler_ that ships _with_ React Native.

To start Metro, run the following command from the _root_ of your React Native project:

`bash


using npm

npm install
npm start

OR using Yarn

yarn install
yarn start
`

After all dependencies installed

Put .env file at project root level, which contains all confidential information including API Base-URL.

Step 2: Start your Application

Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:

$3

`bash


using npm

npm run android

OR using Yarn

yarn android
`

$3

`bash


using npm

cd ios
pod install
npm run ios

OR using Yarn

cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
yarn ios
``

Acknowledgements

This package was inspired by theCodingMachine's React Native Boilerplate. We drew inspiration from their project architecture and design principles, adapting them to suit our specific needs. We are grateful for their contributions to the React Native community.