React Native CLI Project Setup

Photo by Rahul Mishra on Unsplash

Overview

This guide outlines the process for setting up a new React Native project using the React Native CLI. It includes steps for configuration, dependency management, and best practices to ensure a clean and maintainable codebase.

1. Initial Setup

1.1. Install Node.js

Ensure Node.js installed. Node.js is required for JavaScript runtime.

Or check if you have already install

node -v

1.2. Install React Native CLI

Install the React Native CLI globally:

npx @react-native-community/cli@latest init AwesomeProject

2. Project Structure

Create a ‘src’ folder on the root directory them move all application program folder related into ‘src’ folder.

Organize your project for maintainability:

/YourProjectName
  /android
  /ios
  /src
    /assets
    /components
    /constants
    /navigation
    /screens
    /services
    /utils
  App.tsx 
  babel.config.js
  tsconfig.json

3. Configure Babel for Module Aliases (Optional)

3.1. Install Babel Module Resolver

Install the Babel plugin for module resolution:

npm install --save-dev babel-plugin-module-resolver

or

yarn add --dev babel-plugin-module-resolver

3.2. Update Babel Configuration

Modify babel.config.js to set up path aliases:

Make sure all your folder are in the ‘src’ directory first otherwise ‘@’: ‘./src’ will not recognize the path.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@': './src', 
          '@assets': './src/assets',
        }
      }
    ],
  ]
};

4. TypeScript Configuration

If you modified the file path to ‘@’, we have to update the tsconfig.json for it to work properly.

4.1. Initialize TypeScript Configuration

Updatetsconfig.json:

// You will find something similar to this
{
  "extends": "@react-native/typescript-config/tsconfig.json",
}

Please update the "compilerOptions" below:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

5. Development Workflow

Start the Development Server

npm start

Run on iOS Emulator

npx react-native run-ios

Run on Android Emulator

npx react-native run-android

6. Recommendation

• Component Modularity: Break down UI elements into reusable components.
• Consistent Styling: Use a consistent styling approach, preferably with a stylesheet or a design system.
• Testing: Implement unit tests and end-to-end tests where possible.
• Documentation: Document components, utilities, and key parts of your codebase.

I hope this help you kickstart the project!