create-rn-starter-kit

Create React Native Starter Kit CLI

A CLI tool for creating modular React Native applications with Expo. This tool generates customizable projects with a modular architecture that allows developers to select and include only the features they need.

Features

• 🏗️ Modular Architecture: Choose from core and feature modules
• 🔄 Dynamic Module Loading: Automatic dependency resolution
• 🛠️ Interactive CLI: Easy project setup with customizable options
• 📱 Rapid Prototyping: Pre-built modules for common features
• 📦 Expo Integration: Built on Expo's reliable foundation

Getting Started / Installation

# Create a new project
npx create-rn-starter-kit my-app

# Navigate to the project directory
cd my-app

# Start the development server
npm start

Usage

Basic Usage

create-rn-starter-kit my-app

The CLI will prompt you to select which modules you want to include in your project.

Skip Prompts (Use All Modules)

create-rn-starter-kit my-app --yes

Available Modules

Core Modules

• Module Loader: Essential module system (automatically included)
• Authentication: User login and authorization
• Navigation: React Navigation integration
• Splash Screen: App startup experience

Feature Modules

• Account Overview: Dashboard components
• Statements: Transaction history and timelines
• Payments: Payment processing forms
• Settings: User preferences and configuration

Generated Project Structure

my-app/
├── src/
│   ├── config/
│   │   ├── modules.ts          # Module configuration
│   │   └── moduleLoader.ts     # Module loading logic
│   └── modules/
│       ├── core/               # Essential modules
│       └── feature/            # Optional feature modules
├── assets/                     # Static assets
├── App.tsx                     # Root component
├── app.json                    # Expo configuration
├── package.json               # Dependencies
└── tsconfig.json              # TypeScript config

Module System

During project creation, you'll be prompted to select which feature modules you want to include. Core modules are included by default.

The project uses a centralized module system defined in src/config/modules.ts. Each module has:

• Unique ID
• Name and description
• Category (core/feature)
• Dependencies
• Enabled status
• Import function

Module Categories

• Core Modules: Essential system modules (authentication, main-navigator, splash)
• Feature Modules: Optional application features (account-overview, statements, payments)

Developing Modules

1. Create Module Structure:

   # For core modules
   mkdir -p src/modules/core/your-module
   
   # For feature modules
   mkdir -p src/modules/feature/your-module

2. Add Module Definition:

   • Add your module to src/config/modules.ts:

   {
     id: 'your-module',
     name: 'Your Module',
     description: 'Module description',
     category: 'core' | 'feature',
     enabled: true,
     dependencies: [], // if any
     importFn: () => import('../modules/core/your-module'),
   }

3. Create Module Files:

   • Create index.tsx for your module component
   • Add any additional files (styles, utils, etc.)
   • Export your module component as default

4. Test Your Module:

   For testing your module:

   a) Development Testing (Recommended for active development):

   # Start the development server with hot reloading
   npm run dev

   This will start the app in development mode with hot reloading, allowing you to see changes immediately in the simulator.

Module Customization

Module Metadata and API Exports

Each module can define its own metadata and expose an API for other modules to consume. This is done by exporting specific objects from your module's entry point:

// src/modules/core/authentication/index.tsx
import React from 'react';
import { View, Text } from 'react-native';

// The main component
const AuthenticationModule = () => {
  return (
    <View>
      <Text>Authentication Module</Text>
    </View>
  );
};

// Module's API - functions that other modules can call
const AuthModule = {
  login: async (username: string, password: string) => {
    // Login logic
    console.log('Logging in...');
    return { success: true, token: 'mock-token' };
  },
  
  logout: async () => {
    // Logout logic
    console.log('Logging out...');
    return { success: true };
  },
  
  getCurrentUser: () => {
    // Get current user
    return { id: 1, name: 'Test User', email: '[e-mail]' };
  }
};

// Module metadata (optional)
export const metadata = {
  name: 'Advanced Authentication',  // Override default name from config
  version: '1.2.0',                 // Can specify version different from package
  features: ['login', 'logout', 'user-management', 'social-login'],
  api: AuthModule                   // Expose API functions
};

// Alternative: Register callback (optional)
export const register = (moduleLoader: any) => {
  // Direct registration with the module loader
  moduleLoader.registerModuleMetadata('authentication', metadata);
};

// Default export (required) - The React component
export default AuthenticationModule;

Accessing Module APIs

Modules can communicate with each other through their exposed APIs:

// Example: Account module using the Authentication module API
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { moduleLoader } from '../../config/moduleLoader';

const AccountModule = () => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // Get the Authentication module's API
    const authModule = moduleLoader.getModuleAPI('authentication');
    
    if (authModule) {
      // Call the getCurrentUser method
      const currentUser = authModule.getCurrentUser();
      setUser(currentUser);
    }
  }, []);
  
  return (
    <View>
      <Text>Account Module</Text>
      {user && <Text>Welcome, {user.name}</Text>}
    </View>
  );
};

export default AccountModule;

Available Metadata Properties

When defining module metadata, you can specify the following properties:

Property	Type	Description
name	string	Override the module's display name
version	string	Specify the module's version
features	string[]	List of features provided by this module
api	object	Object containing methods that other modules can call
dependencies	string[]	Additional runtime dependencies
settings	object	Module-specific configuration settings

Module Lifecycle Hooks

You can also export lifecycle hooks to respond to module loading events:

// Called when the module is loaded
export const onLoad = () => {
  console.log('Authentication module loaded');
  // Initialize resources, set up listeners, etc.
};

// Called when the module is unloaded
export const onUnload = () => {
  console.log('Authentication module unloaded');
  // Clean up resources, remove listeners, etc.
};

These exports give you fine-grained control over how your modules behave, what they expose to other modules, and how they integrate into the application's module system.

For detailed contribution guidelines, including CLI development, see CONTRIBUTING.md.