create-rn-base

A CLI tool to quickly scaffold React Native projects with a pre-configured base setup including Firebase, Axios, TypeScript, and more.

Features

✨ Pre-configured Setup

• TypeScript support with path aliases (@/, @api/, @components/, etc.)
• Firebase Cloud Messaging integration
• Axios instances for API calls (regular and multipart)
• Token storage with Keychain security
• Utility functions (date formatting, currency, etc.)
• Well-organized folder structure

🚀 Quick Start

• One command to scaffold your entire project
• Automatic dependency installation with Yarn/npm
• iOS pods installation (macOS only)

Installation & Usage

You don't need to install this package globally. Use npx to run it directly:

# Create a new React Native project
npx create-rn-base my-awesome-app

# Or use npm create
npm create rn-base my-awesome-app

# Skip dependency installation
npx create-rn-base my-app --skip-install

What's Included

Project Structure

my-app/
├── App.tsx                 # Main app component with SafeAreaProvider
├── index.js                # Entry point with FCM background handler
├── package.json            # Dependencies and scripts
├── tsconfig.json           # TypeScript config with path aliases
├── babel.config.js         # Babel config with module resolver
├── src/
│   ├── api/
│   │   ├── services/
│   │   │   └── fcmTokenService.ts
│   │   ├── axiosInstance.ts           # Standard Axios instance
│   │   ├── axiosMultiPartInstance.ts  # Multipart/FormData instance
│   │   ├── authEvents.ts              # Auth event emitter
│   │   ├── routes.ts                  # API routes and environments
│   │   └── index.ts
│   ├── assets/            # Images, fonts, etc.
│   ├── components/        # Reusable components
│   ├── notification/
│   │   └── useNotification.ts         # FCM notification hook
│   ├── screens/           # App screens
│   ├── types/             # TypeScript types
│   └── utils/
│       ├── tokenStorage.ts            # Secure token storage
│       ├── fcmNotification.ts         # FCM utilities
│       ├── currencyUtils.ts           # Currency formatting
│       ├── dateUtils.ts               # Date formatting
│       └── index.ts
├── android/               # Android native code
└── ios/                   # iOS native code

Dependencies Included

Core:

• React Native 0.83.0
• React 19.2.0
• TypeScript 5.8.3

Features:

• Firebase Cloud Messaging
• Axios for API calls
• React Native Safe Area Context
• Path alias support (@/, @api/, etc.)

Dev Tools:

• ESLint
• Prettier
• Jest
• Babel module resolver

Path Aliases

Use clean imports throughout your project:

// Instead of: import { api } from '../../../api'
import { api } from '@api';

// Instead of: import Component from '../../components/Component'
import Component from '@components/Component';

// Other available aliases:
import { useNotification } from '@/notification/useNotification';
import Screen from '@screens/HomeScreen';
import { formatDate } from '@utils';
import { UserType } from '@types';

Available Scripts

After creating your project:

cd my-app

# Start Metro bundler
yarn start

# Run on Android
yarn android

# Run on iOS (macOS only)
yarn ios

# Run linter
yarn lint

# Run tests
yarn test

Publishing Your CLI (For Maintainers)

1. Prepare for Publishing

cd create-rn-base

# Install dependencies
npm install

# Login to npm
npm login

# Update version in package.json if needed
npm version patch  # or minor, or major

2. Publish to npm

# Publish to npm registry
npm publish

# Or publish publicly if scoped package
npm publish --access public

3. Test Your Published Package

# Clear npm cache
npm cache clean --force

# Test with npx
npx create-rn-base test-project

Development

Local Testing

To test the CLI locally before publishing:

# In the create-rn-base directory
cd create-rn-base

# Install dependencies
npm install

# Link globally
npm link

# Now you can use it locally
create-rn-base my-test-app

# Unlink when done
npm unlink -g create-rn-base

Updating the Template

1. Make changes to your base React Native project
2. Run the copy script: .\copy-template-files.ps1
3. Update version in create-rn-base/package.json
4. Publish the new version

Requirements

• Node.js >= 18.0.0
• Yarn (recommended) or npm
• For iOS development: macOS with Xcode and CocoaPods
• For Android development: Android Studio and JDK

Configuration

Firebase Setup

After creating your project:

1. Android:
   • Add your google-services.json to android/app/
2. iOS:
   • Add your GoogleService-Info.plist to ios/YourAppName/
   • Run cd ios && pod install

API Configuration

Update src/api/routes.ts with your API endpoints:

export const API_BASE_URLS: Record<Environment, string> = {
  development: 'http://your-dev-server:8080/api',
  staging: 'https://staging-api.yourapp.com/api',
  production: 'https://api.yourapp.com/api',
};

Troubleshooting

iOS Pods Installation Failed

cd ios
pod deintegrate
pod install
cd ..

Metro Bundler Issues

# Clear Metro cache
yarn start --reset-cache

Android Build Issues

cd android
./gradlew clean
cd ..

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Author

Your Name

Happy coding! 🚀