⚠️ DEPRECATION NOTICE

This package is being renamed and restructured. Please use create-dn-starter-kit instead.

Not recommended for production use - This package is experimental and subject to breaking changes without notice.

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 using pre-configured templates for rapid prototyping.

Features

• 🏗️ Template-Based Architecture: Choose from basic, auth, or full-featured templates
• 📦 Pre-built Modules: Core and feature modules ready to use
• 🛠️ Interactive CLI: Easy project setup with template selection
• 📱 Rapid Prototyping: Get started quickly with pre-configured setups
• 🔧 Expo Integration: Built on Expo's reliable foundation

Getting Started / Installation

1# Create a new project
2npx create-rn-starter-kit my-app
3
4# Navigate to the project directory
5cd my-app
6
7# Start the development server
8npm start

Usage

Basic Usage

1create-rn-starter-kit my-app

The CLI will prompt you to select which template you want to use for your project.

Skip Prompts (Use Full Template)

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

Available Templates

Basic Starter

• Description: Simple app with basic navigation and components
• Best for: Minimal setup, custom development from scratch
• Modules: None (clean slate)

Auth Starter

• Description: Includes authentication and user management
• Best for: Apps requiring user authentication
• Modules: Splash Screen, Main Navigator, Account Overview

Full Featured

• Description: Complete starter with theming, auth, and all modules
• Best for: Complex apps, rapid prototyping
• Modules: Splash, Authentication, Combined Auth, Summary, Everyday Banking, Cards, Applications

Generated Project Structure

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

Module System

The project uses a template-based module system defined in src/config/modules.ts. Each template includes a pre-selected set of modules that work together seamlessly.

Available Modules

Core Modules

• Splash: App startup and loading screens
• Authentication: User login and authorization
• Combined Auth: Complete authentication flow
• Main Navigator: React Navigation integration

Feature Modules

• Account Overview: Dashboard components
• Summary: Account summary and overview
• Everyday Banking: Daily banking operations
• Cards: Credit and debit card management
• Applications: Apply for banking products
• Statements: Transaction history and timelines
• Payments: Payment processing forms

Adding Custom Modules

Want to add your own modules? Here's how:

1. Create Module Structure

1# For core modules
2mkdir -p src/modules/core/your-module
3
4# For feature modules
5mkdir -p src/modules/feature/your-module

2. Create Module Files

Create your module component:

1// src/modules/feature/your-module/index.tsx
2import React from 'react';
3import { View, Text, StyleSheet } from 'react-native';
4
5const YourModule = () => {
6  return (
7    <View style={styles.container}>
8      <Text style={styles.title}>Your Custom Module</Text>
9      {/* Add your module content here */}
10    </View>
11  );
12};
13
14const styles = StyleSheet.create({
15  container: {
16    flex: 1,
17    justifyContent: 'center',
18    alignItems: 'center',
19  },
20  title: {
21    fontSize: 18,
22    fontWeight: 'bold',
23  },
24});
25
26export default YourModule;

3. Add Module to Configuration

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

1{
2  id: 'your-module',
3  name: 'Your Module',
4  description: 'Description of what this module does',
5  category: 'feature', // or 'core'
6  enabled: true,
7  dependencies: [], // List any required modules
8  priority: 10, // Loading priority (lower numbers load first)
9  importFn: () => import('../modules/feature/your-module'),
10}

4. Import and Use Your Module

Import and use your module in your App component:

1// App.tsx (or your specific App.<template>.tsx)
2import React from 'react';
3import YourModule from './src/modules/feature/your-module';
4
5const App = () => {
6  return (
7    <YourModule />
8    // Or integrate it into your navigation/layout
9  );
10};
11
12export default App;

5. Test Your Module

Start the development server to test your changes:

1npm start

Module Communication

Modules communicate through standard React patterns:

• Props: Pass data down to child modules
• Context: Share state across multiple modules
• Direct imports: Import utilities or components from other modules
• Navigation: Use React Navigation to navigate between module screens

Example using React Context:

1// src/context/AppContext.tsx
2import React, { createContext, useContext } from 'react';
3
4const AppContext = createContext(null);
5
6export const AppProvider = ({ children }) => {
7  const [user, setUser] = useState(null);
8  
9  return (
10    <AppContext.Provider value={{ user, setUser }}>
11      {children}
12    </AppContext.Provider>
13  );
14};
15
16export const useApp = () => useContext(AppContext);

Then use it in your modules:

1// In your module
2import { useApp } from '../../context/AppContext';
3
4const YourModule = () => {
5  const { user } = useApp();
6  
7  return (
8    <Text>Welcome, {user?.name}</Text>
9  );
10};

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