React Native Starter

A clean starter template for React Native with Expo Router, TypeScript, and file-based routing.

Quick Start

# Install dependencies
npm install
# Start development server
npm start

Then press a (Android), i (iOS), or w (web), or scan the QR code with Expo Go.

📖 For detailed setup instructions, see Getting Started Guide

Features

This starter includes everything you need to build a production-ready React Native app:

• ✅ React Native Paper - Material Design 3 components with dark/light mode
• ✅ Dark/Light Mode - Automatic system preference detection
• ✅ API Client - Axios with interceptors for authentication and error handling
• ✅ Storage Service - AsyncStorage wrapper with TypeScript support
• ✅ Custom Hooks - useFetch for data fetching with loading/error states
• ✅ Error Boundary - Global error handling component
• ✅ Loading States - Built-in loading screen component
• ✅ Authentication Example - Complete login flow with token management
• ✅ TypeScript - Full type safety throughout
• ✅ ESLint + Prettier - Code quality and formatting tools
• ✅ Example Screens - See features in action

State Management Options

This starter template provides multiple state management solutions to choose from. Each option is available as a separate branch with a corresponding pull request for easy review and integration:

🔴 Redux Toolkit

Branch:state-management/redux
Pull Request:#2

A complete Redux Toolkit implementation with typed hooks, auth slice, and todos slice. Perfect for large-scale applications requiring predictable state management.

Features:

• Redux Toolkit with typed hooks
• Auth slice for authentication state
• Todos slice for todo management
• Full TypeScript support

🔵 React Context API

Branch:state-management/react-context
Pull Request:#3

Built-in React Context API with useReducer for state management. No external dependencies required, perfect for smaller to medium-sized applications.

Features:

• AuthContext and TodosContext
• useReducer pattern for state updates
• Zero external dependencies
• Native React solution

🟢 Zustand

Branch:state-management/zustand
Pull Request:#4

Lightweight and simple state management library with minimal boilerplate. Great balance between simplicity and power.

Features:

• Minimal boilerplate
• Simple API
• Small bundle size
• Easy to learn

🟡 Jotai

Branch:state-management/jotai
Pull Request:#5

Atomic state management with fine-grained reactivity. Excellent for component-level state that needs to be shared across the app.

Features:

• Atomic state composition
• Fine-grained reactivity
• Great performance
• Flexible architecture

How to Use

To try out any of these state management solutions:

1. Checkout the branch:

   git checkout state-management/redux # or react-context, zustand, jotai

2. Install dependencies:

   npm install

3. Review the Pull Request to see what changes were made

4. Merge or cherry-pick the changes you want into your project

Each branch includes complete implementation examples and updated documentation.

Getting Started

For detailed installation and setup instructions, see the Getting Started Guide.

Quick overview:

1. Prerequisites: Node.js v18+, npm/yarn
2. Install:npm install
3. Run:npm start
4. Code: Start editing app/(tabs)/index.tsx

Navigation

This project uses Expo Router for navigation, which is the recommended approach for Expo projects. Expo Router provides:

• File-based routing - Files in the app directory automatically become routes
• Built on React Navigation - Full access to React Navigation APIs when needed
• Type-safe routes - Automatic TypeScript support for routes
• Deep linking - Automatic deep linking configuration
• Web support - Static rendering and optimized routing for web

React Native doesn't include built-in navigation, so you need a navigation library. Expo Router is built on top of React Navigation and integrates seamlessly with Expo CLI and bundling.

For more information, see:

• Navigation in Expo
• Expo Router Documentation
• App Directory Guide

Available Scripts

• npm start - Start Expo dev server
• npm run android - Run on Android emulator/device
• npm run ios - Run on iOS simulator/device
• npm run web - Run in web browser
• npm run lint - Check code quality
• npm run lint:fix - Fix linting issues automatically
• npm run format - Format code with Prettier
• npm test - Run tests

Project Structure

react-native-starter/
├── app/ # Expo Router screens (file-based routing)
│ ├── (tabs)/ # Tab navigation screens
│ └── _layout.tsx # Root layout with theme provider
├── components/ # Reusable UI components
│ ├── ErrorBoundary.tsx
│ └── LoadingScreen.tsx
├── hooks/ # Custom React hooks
│ └── useFetch.ts # Data fetching hook
├── services/ # API & storage services
│ ├── api.ts # Axios client with interceptors
│ └── storage.ts # AsyncStorage wrapper
├── types/ # TypeScript type definitions
│ └── api.ts # API response types
├── constants/ # App constants
│ ├── Colors.ts # Color definitions
│ └── Theme.ts # React Native Paper theme
├── assets/ # Images, fonts, static files
└── docs/ # Documentation

Key directories:

• app/ - All screens go here. Files automatically become routes (Expo Router).
• components/ - Reusable UI components used across screens.
• hooks/ - Custom React hooks for shared logic (e.g., useFetch).
• services/ - API client and storage utilities.
• constants/ - App-wide constants like colors and theme config.
• types/ - TypeScript interfaces and types.

User Interface

Safe Areas

This project includes react-native-safe-area-context (installed with Expo Router) for handling safe areas on devices with notches and system bars.

Quick example:

import{SafeAreaView}from'react-native-safe-area-context';exportdefaultfunctionScreen(){return<SafeAreaViewstyle={{flex: 1}}>{/* Your content */}</SafeAreaView>;}

See Safe Areas Guide for more information.

UI Components (React Native Paper)

This project includes React Native Paper, a Material Design 3 component library. Paper provides pre-built, accessible components that automatically adapt to light/dark mode.

Quick example:

import{Button,Card,Text}from'react-native-paper';exportdefaultfunctionScreen(){return(<Card><Card.Content><Textvariant="titleLarge">Card Title</Text><Buttonmode="contained"onPress={()=>console.log('Pressed')}>
Press me
</Button></Card.Content></Card>);}

See UI Library Guide for more information on using React Native Paper components and customizing themes.

Assets

Assets (images, fonts, etc.) are stored in the assets/ directory. Import them directly:

import{Image}from'react-native';<Imagesource={require('./assets/icon.png')}/>;

See Assets Guide for more information.

Environment Variables

This project uses environment variables for configuration. Copy .env.example to .env and fill in your values:

cp .env.example .env

All environment variables used in JavaScript must be prefixed with EXPO_PUBLIC_. See Environment Variables Guide for more information.

Development Tools

Expo CLI

Expo CLI is installed automatically with the expo package. Common commands:

Command	Description
npx expo start	Start the development server
npx expo prebuild	Generate native Android and iOS directories
npx expo run:android	Compile and run on Android
npx expo run:ios	Compile and run on iOS
npx expo install <package>	Install a library with compatible versions
npx expo lint	Lint your project files

See Expo CLI documentation for more commands.

EAS CLI

EAS CLI is used for building, submitting, and managing your app. Install it globally:

npm install -g eas-cli

Common commands:

• eas build - Create development, preview, or production builds
• eas submit - Submit your app to app stores
• eas update - Create over-the-air (OTA) updates

See EAS CLI documentation for more information.

Expo Doctor

Diagnose issues in your Expo project:

npx expo-doctor

This command checks for common issues in app config, package.json, dependency compatibility, and overall project health.

Expo Tools for VS Code

Install the Expo Tools VS Code extension for:

• Autocomplete and IntelliSense for app config files
• Debugging with breakpoints and variable inspection

Orbit

Orbit is a macOS and Windows app for:

• Installing and launching builds from EAS
• Installing and launching updates
• Testing on physical devices and emulators

Install with Homebrew (macOS):

brew install expo-orbit

Or download from GitHub releases.

Snack

Snack is an in-browser development environment for:

• Sharing code snippets
• Experimenting with React Native
• Testing prototypes without local setup

Expo Go

Expo Go is a free app for testing your app on physical devices:

• Download from App Store (iOS)
• Download from Google Play (Android)

Note: Expo Go is great for learning and prototyping, but not recommended for production apps. Use development builds instead.

Documentation

Essential Guides

• Getting Started - Complete setup guide (start here!)
• How-To Guides - Common development tasks
• Code Conventions - Project standards and best practices

Feature Guides

• API and Storage - Backend integration guide
• UI Library - React Native Paper components
• Color Themes - Theming and dark mode
• Error and Loading Handling - State management

Additional Guides

• Splash Screen and App Icon
• Safe Areas
• System Bars
• Fonts
• Assets
• Animation
• Store Data
• Environment Variables

Resources

• Expo Documentation
• Expo Router Documentation
• React Native Directory - Search for React Native libraries
• Expo Discord - Community support

License

MIT License - See LICENSE for more information.