Environment Setup & Project Structure

Development Environment Setup

There are two main ways to develop React Native apps: Expo (managed workflow) and React Native CLI (bare workflow). Each has its advantages.

Expo vs React Native CLI

Setting Up with Expo

# Create a new Expo project
npx create-expo-app@latest MyApp
cd MyApp

# Start the development server
npx expo start

# Project options:
npx create-expo-app@latest MyApp --template blank     # Minimal setup
npx create-expo-app@latest MyApp --template tabs      # Tab navigation
npx create-expo-app@latest MyApp --template blank-typescript  # TypeScript

Expo Project Structure

my-expo-app/
├── app/                    # File-based routing (Expo Router)
│   ├── (tabs)/             # Tab group layout
│   │   ├── _layout.tsx     # Tab navigator config
│   │   ├── index.tsx       # Home tab (/)
│   │   └── explore.tsx     # Explore tab (/explore)
│   ├── _layout.tsx         # Root layout
│   └── +not-found.tsx      # 404 page
├── assets/                 # Images, fonts, etc.
│   ├── images/
│   └── fonts/
├── components/             # Reusable components
│   ├── ThemedText.tsx
│   └── ThemedView.tsx
├── constants/              # Theme, colors, etc.
│   └── Colors.ts
├── hooks/                  # Custom hooks
│   └── useColorScheme.ts
├── app.json                # Expo configuration
├── babel.config.js         # Babel configuration
├── package.json
└── tsconfig.json           # TypeScript config

app.json Configuration

// app.json - Expo configuration
{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourcompany.myapp"
    },
    "web": {
      "bundler": "metro",
      "output": "static"
    },
    "plugins": [
      "expo-router",
      ["expo-camera", { "cameraPermission": "Allow camera access" }]
    ]
  }
}

Setting Up React Native CLI

# Prerequisites for React Native CLI

# macOS (for iOS development)
# 1. Install Xcode from App Store
# 2. Install Xcode Command Line Tools
xcode-select --install

# 3. Install CocoaPods
sudo gem install cocoapods

# 4. Install Watchman (optional but recommended)
brew install watchman

# Android (for Android development)
# 1. Install Android Studio
# 2. Install Android SDK (via Android Studio)
# 3. Set environment variables in ~/.zshrc or ~/.bashrc:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Create a new React Native CLI project
npx react-native@latest init MyApp
cd MyApp

# Run on iOS
npx react-native run-ios

# Run on Android
npx react-native run-android

React Native CLI Project Structure

my-rn-app/
├── android/                # Android native code
│   ├── app/
│   │   ├── build.gradle
│   │   └── src/main/
│   ├── build.gradle
│   └── settings.gradle
├── ios/                    # iOS native code
│   ├── MyApp/
│   │   ├── AppDelegate.mm
│   │   └── Info.plist
│   ├── MyApp.xcodeproj
│   └── Podfile
├── src/                    # Your source code (create this)
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   ├── hooks/
│   ├── utils/
│   └── services/
├── App.tsx                 # Entry component
├── index.js                # Entry point
├── metro.config.js         # Metro bundler config
├── babel.config.js
├── package.json
└── tsconfig.json

Recommended Folder Structure

src/
├── components/           # Reusable UI components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.styles.ts
│   │   └── index.ts
│   └── Card/
├── screens/              # Screen components
│   ├── HomeScreen/
│   │   ├── HomeScreen.tsx
│   │   ├── HomeScreen.styles.ts
│   │   └── components/   # Screen-specific components
│   └── ProfileScreen/
├── navigation/           # React Navigation setup
│   ├── RootNavigator.tsx
│   ├── TabNavigator.tsx
│   └── types.ts
├── hooks/                # Custom hooks
│   ├── useAuth.ts
│   └── useApi.ts
├── services/             # API, storage, etc.
│   ├── api/
│   │   ├── client.ts
│   │   └── endpoints.ts
│   └── storage/
├── store/                # State management
│   ├── slices/
│   └── store.ts
├── utils/                # Helper functions
│   ├── formatting.ts
│   └── validation.ts
├── constants/            # App constants
│   ├── colors.ts
│   ├── typography.ts
│   └── spacing.ts
├── types/                # TypeScript types
│   └── index.ts
└── assets/               # Images, fonts, etc.

Development Tools

# Essential development tools

# Expo Go App (for Expo projects)
# Download from App Store / Play Store
# Scan QR code to preview your app

# React Native Debugger (for RN CLI)
brew install --cask react-native-debugger

# Flipper (Meta's debugging platform)
brew install --cask flipper

# VS Code Extensions
# - React Native Tools
# - ES7+ React/Redux/React-Native snippets
# - Prettier
# - ESLint

# Useful commands
npx expo start --clear          # Clear cache and start
npx expo start --ios            # Start and open iOS simulator
npx expo start --android        # Start and open Android emulator

# React Native CLI
npx react-native start --reset-cache
npx react-native doctor         # Check environment setup