Interactive CLI for creating modular React Native apps with Expo
npm install @dankupfer/create-dn-starter> ā ļø Experimental package: This is a development package not recommended for production use. APIs are subject to breaking changes without notice.
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.
- šļø 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
``bashCreate a new project
npx @dankupfer/create-dn-starter my-app
Usage
$3
`bash
@dankupfer/create-dn-starter my-app
`The CLI will prompt you to select which template you want to use for your project.
$3
`bash
@dankupfer/create-dn-starter my-app --yes
`Available Templates
$3
- Description: Simple app with basic navigation and components
- Best for: Minimal setup, custom development from scratch
- Modules: None (clean slate)$3
- Description: Includes authentication and user management (!!not implemented - only placeholders!!)
- Best for: Apps requiring user authentication (!!not implemented - only placeholders!!)
- Modules: Splash Screen, Main Navigator, Account Overview$3
- Description: Complete starter with theming, auth (placeholder only), and all modules
- Best for: Complex apps, rapid prototyping
- Modules: Splash, Authentication, Combined Auth, Summary, Everyday Banking, Cards, ApplicationsGenerated 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.$3
#### 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
$3
Want to add your own modules? Here's how:
#### 1. Create Module Structure
`bash
For core modules
mkdir -p src/modules/core/your-moduleFor feature modules
mkdir -p src/modules/feature/your-module
`#### 2. Create Module Files
Create your module component:
`typescript
// src/modules/feature/your-module/index.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';const YourModule = () => {
return (
Your Custom Module
{/ Add your module content here /}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 18,
fontWeight: 'bold',
},
});
export default YourModule;
`#### 3. Add Module to Configuration
Add your module to
src/config/modules.ts:`typescript
{
id: 'your-module',
name: 'Your Module',
description: 'Description of what this module does',
category: 'feature', // or 'core'
enabled: true,
dependencies: [], // List any required modules
priority: 10, // Loading priority (lower numbers load first)
importFn: () => import('../modules/feature/your-module'),
}
`#### 4. Import and Use Your Module
Import and use your module in your App component:
`typescript
// App.tsx (or your specific App..tsx)
import React from 'react';
import YourModule from './src/modules/feature/your-module';const App = () => {
return (
// Or integrate it into your navigation/layout
);
};
export default App;
`#### 5. Test Your Module
Start the development server to test your changes:
`bash
npm start
`$3
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:
`typescript
// src/context/AppContext.tsx
import React, { createContext, useContext } from 'react';const AppContext = createContext(null);
export const AppProvider = ({ children }) => {
const [user, setUser] = useState(null);
return (
{children}
);
};
export const useApp = () => useContext(AppContext);
`Then use it in your modules:
`typescript
// In your module
import { useApp } from '../../context/AppContext';const YourModule = () => {
const { user } = useApp();
return (
Welcome, {user?.name}
);
};
``For detailed contribution guidelines, including CLI development, see CONTRIBUTING.md.