React-native-maker NPM

React Native Project Scaffolder 🚀

Overview

This is a powerful CLI tool for scaffolding React Native projects with a comprehensive, opinionated project structure. It helps developers quickly set up a well-organized React Native application with optional configurations for navigation, state management, and storage.

Features

Project Structure Creation

The scaffolder creates a robust, scalable project structure with carefully organized directories:

project-root/
│
├── src/
│   ├── assets/
│   │   ├── fonts/
│   │   ├── icons/
│   │   │   ├── BottomTabIcons/
│   │   │   ├── imageIcons/
│   │   │   └── svgIcons/
│   │   └── images/
│   │       ├── PngAndJpgImages/
│   │       ├── SvgImages/
│   │       └── OtherImages/
│   │
│   ├── components/
│   │   ├── global/      # Reusable global components
│   │   └── forms/       # Form-related components
│   │
│   ├── constants/       # Application-wide constants
│   │
│   ├── context/         # React Context providers
│   │
│   ├── features/        # Feature-based screens
│   │   ├── auth/
│   │   ├── dashboard/
│   │   ├── settings/
│   │   └── chat/
│   │
│   ├── i18n/            # Internationalization
│   │   └── locales/
│   │
│   ├── navigation/      # Navigation setup
│   │
│   ├── service/         # API services
│   │
│   ├── store/           # State management
│   │
│   ├── styles/          # Common styles
│   │
│   ├── theme/           # Theme configurations
│   │
│   ├── types/           # TypeScript types
│   │
│   └── utils/           # Utility functions
│
└── tsconfig.json

Interactive Configuration Options

When you run the scaffolder, you'll be prompted with several configuration choices:

Bottom Tab Navigation
- Opt to set up a bottom tab navigation structure
- Creates dedicated navigation files and icon directories
Storage Solution Choose from:
- Async Storage
- React Native MMKV
- None
Navigation Setup
- Comprehensive navigation structure with navigation references
State Management Choose from:
- Redux Toolkit
- Zustand
- Context API
- None

Installation And Direct Usage (Required step) ✅

Dependencies (Install it globaly)

fs-extra
path
chalk
inquirer
@react-native/typescript-config

# Navigate to your project directory
yarn add babel-plugin-module-resolver --dev
# Run the scaffolder
npx react-native-maker

Now create babel.config.js (root dir)

and copy and paste these code in that file:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
 
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          "@assets": './src/assets',
          "@features": './src/features',
          "@navigation": './src/navigation',
          "@components": './src/components',
          "@state": './src/state',
          "@store": './src/store',
          "@service": './src/service',
          "@styles": './src/styles',
          "@utils": './src/utils',
          "@i18n": './src/i18n',
          "@theme": './src/theme',
          "@types": './src/types',
          "@constants": './src/constants',
          "@context": './src/context',
          "@hooks": './src/hooks',
        }
      }
    ],
  // other pluging you can add here 
  ]
};