React Native Awesome Boilerplate

A production-ready React Native template with TypeScript, modern tooling, and best practices built-in. Start building your cross-platform mobile app in minutes.

✨ Features

• 📱 Cross-platform: iOS and Android support out of the box
• 🔷 TypeScript: Full type safety across the codebase
• 🎨 Theming: Built-in theme system with context API
• 🌍 i18n Ready: Multi-language support (EN, ES, HI)
• 🧭 Navigation: React Navigation with typed routes
• 🗃️ State Management: Redux Toolkit with typed slices
• 🔌 API Client: Pre-configured Axios instance
• 🧪 Testing: Jest setup with TypeScript support
• 📏 Code Quality: ESLint + Prettier pre-configured
• 🎯 Modern Architecture: Feature-based folder structure

🚀 Quick Start

Prerequisites

• Node.js 16+
• React Native development environment (setup guide)
• iOS: Xcode 14+ and CocoaPods
• Android: Android Studio and JDK 11+

Installation (Recommended)

npx @react-native-community/cli init MyApp --template rn-awesome-boilerplate

Tip: Use --skip-git-init if initialization is slow:

npx @react-native-community/cli init MyApp --template rn-awesome-boilerplate --skip-git-init

Alternative: From GitHub (slower if repo has large history)

npx @react-native-community/cli init MyApp --template https://github.com/wadekar9/rn-awesome-boilerplate

Post-Installation Setup

1. Install iOS dependencies

   cd ios && pod install && cd ..
   

2. Configure environment

   cp .env.example .env
   # Edit .env with your configuration
   

3. iOS setup

   cd ios && pod install && cd ..
   

4. Configure environment

   cp .env.example .env
   # Edit .env with your configuration
   

5. Run the app

   # iOS
   npm run ios
   
   # Android
   npm run android
   

📁 Project Structure

template/
├── app/                    # Application source code
│   ├── components/        # Reusable UI components
│   ├── screens/          # Screen components
│   ├── navigation/       # Navigation configuration
│   ├── store/           # Redux store & slices
│   ├── hooks/           # Custom React hooks
│   ├── helpers/         # Utility functions
│   ├── constants/       # App constants (colors, endpoints, etc.)
│   ├── locales/         # Translation files
│   ├── types/           # TypeScript type definitions
│   ├── context/         # React Context providers
│   └── utils/           # Core utilities (API, storage, etc.)
├── ios/                 # iOS native project
├── android/             # Android native project
├── patches/             # Package patches (patch-package)
└── App.tsx             # Application entry point

🛠️ Tech Stack

Category	Technology
Framework	React Native
Language	TypeScript
State Management	Redux Toolkit
Navigation	React Navigation
HTTP Client	Axios
Testing	Jest
Linting	ESLint
Formatting	Prettier
Build Tool	Metro
iOS Dependencies	CocoaPods

🔧 Available Scripts

npm run android          # Run on Android
npm run ios             # Run on iOS
npm run start           # Start Metro bundler
npm run test            # Run tests
npm run lint            # Lint code
npm run lint:fix        # Fix linting issues
npm run format          # Format code with Prettier

🏗️ Key Directories

/app/components

Reusable UI components organized by feature or type. Keep components small, focused, and well-typed.

/app/screens

Screen-level components representing app pages. Organized into public (auth) and private (authenticated) flows.

/app/store

Redux store configuration with feature-based slices. Uses Redux Toolkit for simplified Redux logic.

/app/navigation

Navigation structure using React Navigation. Includes auth flow, main app flow, and root navigator.

/app/locales

i18n translation files in JSON format. Currently supports English, Spanish, and Hindi.

/app/helpers

Pure utility functions for common operations (API calls, file handling, data transformation).

/app/constants

App-wide constants including colors, API endpoints, screen names, and storage keys.

🌐 Internationalization

The template includes built-in i18n support with the following languages:

• 🇬🇧 English (en)
• 🇪🇸 Spanish (es)
• 🇮🇳 Hindi (hi)

Translation files are located in /app/locales/. Add new languages by creating a new JSON file and registering it in the i18n configuration.

🔐 Environment Variables

Copy .env.example to .env and configure your environment-specific variables:

API_BASE_URL=https://api.example.com
API_TIMEOUT=30000
# Add your variables here

🧪 Testing

The template includes Jest configuration for unit testing:

# Run all tests
npm run test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

🐛 Troubleshooting

Metro cache issues

npx react-native start --reset-cache

iOS build failures

cd ios
pod deintegrate
pod install --repo-update
cd ..
npm run ios

Android build failures

cd android
./gradlew clean
cd ..
npm run android

Clear all caches

npm run clean
npm install
cd ios && pod install && cd ..

📝 Next Steps

After setting up the template, consider:

1. Configure app metadata: Update app.json with your app name, bundle ID, and version
2. Set up CI/CD: Add GitHub Actions, Bitrise, or Fastlane for automated builds
3. Add analytics: Integrate Firebase Analytics or similar
4. Configure error tracking: Add Sentry or similar error monitoring
5. Set up deep linking: Configure URL schemes and universal links
6. Implement authentication: Build on the auth flow scaffold
7. Add splash screen: Customize the launch screen for your brand

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ❤️ using the best tools and practices from the React Native community.

---

Need help? Check out the React Native documentation or open an issue in this repository.