Robust React Native Boilerplate: A Step-by-Step Guide-2024

Boilerplate animated headline by Mindinventory

Why need boilerplate?

A React Native boilerplate provides a standardized, pre-configured project setup that saves time, ensures best practices, and includes essential tools and libraries. It helps developers start projects quickly, maintain consistency, and focus on building features rather than initial configuration.

Objective:

The main goal of our React Native boilerplate is to enhance code maintainability, adhere to the DRY (Don’t Repeat Yourself) principle, provide a clear and organised structure, and ensure consistency across the project. This foundation allows developers to efficiently build and scale applications while following best practices.

How to use:

npx react-native init APP_NAME --template @mindinventory/react-native-boilerplate

You can checkout the full documentation of this repository here: https://github.com/Mindinventory/react-native-boilerplate

And Our official webpage of this boilerplate:
https://mindinventory.github.io/react-native-boilerplate/

Features

Features-Highlights

Key-Features:

• Attractive code architecture.
• Context API.
• Environment Setup
• Eslint for better code linting
• Husky improves your commits and more.
• Light/Dark custom theme modes.
• Local storage(MMKV).
• Localization.
• Navigation.
• Network request (API implementation).
• Supported for responsive UI.
• Typescript.

Advantages Of Using Our Boilerplate:

• Clean Code Structure: Enhances readability and maintainability.
• Redux and Context API: Efficient state management; Redux handles complex logic, Context API for data sharing (themes, localization).
• Easy Setup: Hassle-free setup with detailed guides.
• Eslint Integration: Early issue detection for consistent code quality.
• Husky Pre-commit Hooks: Ensures code quality before commits.
• Light/Dark Themes: Customizable modes managed via Context API.
• MMKV Local Storage: Efficient data persistence solution.
• Localization Support: Multilingual capabilities with Context API.
• React Navigation: Seamless navigation setup for intuitive UX.
• API Integration: Simplified network request implementation.
• Responsive UI Support: Consistent experience across screen sizes.
• TypeScript Integration: Static typing for robust and error-free code.

Tech-Stack:

• React Native
• React,
• TypeScript
• React Navigation
• React Native Localization
• Redux
• Redux-toolkit
• react-native-reanimated
• MMKV
• axios

Folder-structure:

├── src
│ ├── assets
│ ├──├── fonts (all fonts in this)
│ ├──├── icons (app icons)
│ ├──├── svgIcons (svg app icons)
│ ├──├── images (local images used in app)
│ ├──├── ...
│ ├── components
│ ├──├── ... app reusable components
│ ├──├── index (export all in this)
│ ├──├── ...
│ ├── context
│ ├──├── storage (app local storage)
│ ├──├── ...
│ ├── i18n
│ ├──├── locales
│ ├──├──├── en.json
│ ├──├──├── ...
│ ├──├── index.ts
│ ├──├── ...
│ ├── utils
│ ├──├── color (include themes color of app)
│ ├──├── dimensions (for responsive UI helper fucntions)
│ ├──├── helper (include app helper function)
│ ├──├── ...
└── ...

Modules in boilerplate:

Modules are collections of source files and build settings that divide a project into discrete units of functionality, with dependencies between them based on their functionality and responsibilities.

Modules in boilerplate

Glimpse of features:

To utilize these functions for creating a responsive UI, follow these steps:

import {
  scaleWidth,
  scaleHeight,
  moderateScale,
  scaledSize,
  screenWidth,
  screenHeight,
} from "@src/utils";

// Use functions in styles.
const styles = StyleSheet.create({
  container: {
    width: scaleWidth(300),
    height: scaleHeight(200),
    marginVertical: moderateScale(10),
    fontSize: scaledSize(16),
  },
});

Customize the visual assets

This boilerplate provides a convenient set of scripts to generate images and svg icons. You can find these scripts in the scripts directory. Follow the instructions below to generate your assets:

npm run images
npm run icons

//Get your images in app from components For example:
import { AppImage, Images, Icon, SvgIcon } from "@src/components"; 
// For Placing static image from local assets
<AppImage source="{Images.PLACEHOLDER_IMAGE}" style="{styles.newsImage}" />
------------------------------------------------------------------------------
// Get local static Images from same assets
import { Images, Icons, SVGIcons} from "@src/assets"; 
//To get from url or any base64
<AppImage source={"url || any"} style={styles.newsImage} />

Services(API) handling

Configure your API in src/services/apiHandler.ts, setting up all request methods (GET, POST, PUT, DELETE). Define the API base URL in axios instances and handle response statuses as needed.

//Example code

getNews = async (): Promise<NewsResult[]> => {
  return new Promise((resolve, reject) => {
    serviceAdapter<NewsResponseDTO, undefined>(
      API_METHODS.GET,
      ServicesEndPoints.NEWS
    )
      .then((res) => {
        resolve(new getNewsListResponseAdapter().service(res));
      })
      .catch((error) => {
        reject(error);
      });
  });
};

Environment setup

This boilerplate uses the react-native-config library to manage environment variables. Define environment-specific variables in .env files:

• .env.development for development
• .env.staging for staging
• .env.production for production

You can create additional .env files for other environments as needed.

Example variables in .env files:

API_BASE_URL=https://api.example.com
API_KEY=your-api-key

Access these variables in your code by declaring them in a constants/config file:

export type ConfigTypes = {
  ENV: string;
  API_URL: string;
};

We have a latest react native version: Perks of using the latest boilerplate.

• Improved Layout Engine (Yoga 3.0).
• Bridgeless by Default (New Architecture).
• Batched onLayoutUpdates (New Architecture).
• Yarn 3 as Default Package Manager:
• Breaking changes: PropTypes Removal, PushNotificationIOS Changes, Minimum Android SDK Bump(Android 6 (SDK 23)).

Here’s Quick gif demonstration of the implementation:

implementation

Conclusion!

This React Native boilerplate enhances development by ensuring maintainability, consistency, and best practices. With advanced state management, environment-specific configurations, efficient API handling, and TypeScript support, it provides a solid foundation for scalable and high-quality apps. Focus on building features while the boilerplate handles the setup, streamlining your development process.
Happy coding !!

By Mindinventory