🚀 React Native Boilerplate Template

A modern, comprehensive React Native template with best practices, modern tools, and a clean architecture. This template provides everything you need to kickstart your React Native project with TypeScript, navigation, state management, and more.

📖 Complete Documentation

🌟 Visit our comprehensive documentation website for detailed guides, examples, and best practices.

The documentation includes:

• 📚 Setup Guides - Step-by-step installation and configuration
• 🏗️ Architecture Guide - Understanding the project structure
• 🎨 Theming System - Customizing colors, typography, and styles
• 🔧 Configuration - API setup, environment variables, and more
• 📱 Component Library - Pre-built components and usage examples
• 🎨 Style Guide - Design system, colors, typography, and best practices
• 🧪 Testing Guide - Unit testing and best practices
• 🚀 Deployment - Build and release your app

✨ Features

🏗️ Architecture & Structure

• TypeScript - Full type safety with latest TypeScript
• Modular Architecture - Well-organized folder structure
• Atomic Design - Component structure following atomic design principles
• Barrel Exports - Clean and organized imports

📱 Navigation & UI

• React Navigation v7 - Stack navigation with type safety
• React Native Screens - Native screen optimization
• React Native Safe Area Context - Safe area handling
• React Native Gesture Handler - Smooth gesture handling
• React Native Reanimated v3 - Performant animations

🔄 State Management & Data

• Zustand - Lightweight state management
• TanStack Query (React Query) - Server state management
• MMKV Storage - Fast key-value storage
• Axios - HTTP client with interceptors

🎨 Styling & Theme

• Custom Theme System - Centralized theming with light/dark mode
• Responsive Design - Screen size adaptation and responsive utilities
• Design System - Comprehensive color palette and typography scale
• Component Library - 20+ pre-built, accessible UI components
• Style Guide - Complete design system documentation

🌍 Internationalization

• i18next - Multi-language support
• React i18next - React Native integration
• Fallback Languages - Graceful language fallbacks

🧪 Developer Experience

• ESLint - Code linting with React Native rules
• Prettier - Code formatting
• Husky - Git hooks for code quality
• Jest - Unit testing framework
• React Native Testing Library - Component testing

📦 Additional Libraries

• React Native SVG - SVG support
• React Native Fast Image - Optimized image loading
• React Native WebView - Web content embedding
• React Native Device Info - Device information
• FlashList - Performant lists
• Zod - Runtime type validation
• React Error Boundary - Error handling

🚀 Quick Start

Create a new project

npx @react-native-community/cli@latest init MyAwesomeApp --template @sohantalukder/react-native-boilerplate

Navigate to your project

cd MyAwesomeApp

The post-init script will automatically:

• Install all dependencies
• Set up iOS CocoaPods (if on macOS)
• Configure Git hooks
• Verify Android SDK setup

Run your app

# iOS
npm run ios
# or
yarn ios

# Android
npm run android
# or
yarn android

🧩 Component Library

Our comprehensive component library follows atomic design principles and provides 20+ pre-built, accessible components:

🔸 Atoms (Basic Components)

• Button - Interactive button with multiple variants and loading states
• IconButton - Icon-only button component
• Text - Typography component with theme integration
• TextInput - Form input with validation and animation support
• Card - Container component with elevation and variants
• Image - Optimized image component with caching
• Badge - Status indicator component
• Checkbox - Selection input component
• Radio - Single selection input
• Switch - Toggle switch component
• Slider - Range input component
• Divider - Visual separator component
• Loader - Loading indicator component
• Skeleton - Content placeholder component
• StatusBar - Status bar configuration
• Toast - Notification component
• Dialog - Modal dialog component
• BottomSheet - Bottom sheet modal

🔹 Molecules (Composite Components)

• Avatar - User profile image with fallback
• PasswordInput - Secure text input with toggle
• PhotoCarousel - Image gallery component
• EmptyContent - Empty state component
• DefaultError - Error state component
• ClickableText - Interactive text component
• TopTabBar - Tab navigation component

🔶 Organisms (Complex Components)

• ErrorBoundary - Error handling wrapper
• SlideModal - Animated modal component
• WebView - Web content component

🔷 Templates (Layout Components)

• SafeScreen - Safe area screen wrapper
• SafeSplashScreen - Splash screen wrapper
• ScreenContainer - Standard screen container

🎨 Style Guide Features

• Color System - Comprehensive palette with light/dark mode support
• Typography - Harmonious font scale with responsive sizing
• Spacing - Consistent 8px-based spacing system
• Accessibility - WCAG 2.1 AA compliant design
• Responsive Design - Adaptive layouts for all screen sizes

📁 Project Structure

src/
├── assets/           # Images, fonts, and other static assets
├── config/           # App configuration (API, storage, etc.)
├── modules/          # Feature modules
├── navigation/       # Navigation configuration
├── services/         # API services and external integrations
├── shared/           # Shared components and utilities
│   ├── components/   # Reusable UI components
│   │   ├── atoms/    # Basic components (Button, Input, etc.)
│   │   ├── molecules/# Composite components
│   │   ├── organisms/# Complex components
│   │   └── templates/# Layout components
│   ├── contexts/     # React contexts
│   ├── hooks/        # Custom hooks
│   └── utils/        # Utility functions
├── state/            # Global state management
├── theme/            # Theme configuration and styles
├── translations/     # Internationalization files
└── types/            # TypeScript type definitions

🚀 Quick Component Examples

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { Button, Text, Card } from '@/shared/components/atoms';
import { Avatar } from '@/shared/components/molecules';
import { SafeScreen } from '@/shared/components/templates';

const ExampleScreen = () => {
  return (
    <SafeScreen>
      <View style={{ flex: 1, padding: 16 }}>
        <Text variant="heading1" weight="bold">
          Welcome to React Native Boilerplate
        </Text>
        
        <Card variant="elevated" padding={20} margin={10}>
          <Avatar imageUrl="https://example.com/avatar.jpg" width={60} height={60} />
          <Text variant="body1" style={{ marginTop: 12 }}>
            This is a sample card with an avatar and text.
          </Text>
          
          <Button
            text="Get Started"
            variant="primary"
            onPress={() => console.log('Button pressed!')}
            style={{ marginTop: 16 }}
          />
        </Card>
      </View>
    </SafeScreen>
  );
};

Theme Integration

import { useTheme } from '@/theme';

const ThemedComponent = () => {
  const { colors, fonts, typographies } = useTheme();
  
  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={[typographies.heading2, { color: colors.text }]}>
        Theme-aware heading
      </Text>
      <Text style={{ color: colors.primary }}>
        Primary colored text
      </Text>
    </View>
  );
};

🛠️ Available Scripts

# Development
npm start              # Start Metro bundler
npm run android        # Run on Android
npm run ios           # Run on iOS

# Building
npm run build:android  # Build Android APK
npm run build:ios     # Build iOS app

# Code Quality
npm run lint          # Run ESLint + Prettier + TypeScript
npm run lint:fix      # Fix linting issues
npm run test          # Run tests

🔧 Configuration

Environment Setup

1. Development Environment: Follow the React Native environment setup guide

2. iOS Setup (macOS only):

   # Install Ruby dependencies
   bundle install
      
   # Install CocoaPods
   cd ios && bundle exec pod install

3. Android Setup:

   • Set ANDROID_HOME environment variable
   • Install Android SDK and required build tools

Theme Customization

Edit src/theme/ files to customize:

• Colors
• Typography
• Spacing
• Component styles

API Configuration

Update src/config/ files for:

• API endpoints
• Environment variables
• App configuration

📚 Documentation

💡 Tip: For the most up-to-date and comprehensive documentation, visit our Documentation Website

Key Concepts

• Atomic Design: Components are organized as atoms → molecules → organisms → templates
• Barrel Exports: Use index files for clean imports
• Type Safety: Leverage TypeScript for better development experience
• State Management: Use Zustand for global state, React Query for server state

Best Practices

1. Components: Keep components small and focused
2. Styling: Use the theme system for consistent styling
3. State: Separate local, global, and server state appropriately
4. Testing: Write tests for critical business logic
5. Performance: Use FlashList for large lists, optimize images

📖 Additional Resources

• 🌐 Live Documentation - Interactive guides and examples
• 📋 Getting Started - Quick setup guide
• 🏗️ Project Structure - Understanding the codebase
• ⚙️ Configuration - Customization options
• 🛠️ Development - Development workflow
• 🧩 Component Library - Complete component reference
• 🎨 Style Guide - Design system and guidelines

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

🙏 Acknowledgments

• React Native Community
• TheCodeingMachine Boilerplate - Inspiration
• All the amazing library authors and contributors

📞 Support

• 🌐 Documentation: https://sohantalukder.github.io/react-native-boilerplate/
• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues

Happy coding! 🎉