Setting Up React Native
Getting started with React Native requires setting up your development environment. Let's walk through the process step by step for both iOS and Android development.
Prerequisites
Before you begin, make sure you have:
- Node.js: Version 18 or newer
- npm or yarn: Package manager for installing dependencies
- Git: For version control
Installation Options
┌─────────────────────────────────────────────────┐
│ React Native Setup Options │
├─────────────────────────────────────────────────┤
│ │
│ Option 1: Expo (Recommended for Beginners) │
│ ┌──────────────────────────────────────┐ │
│ │ npx create-expo-app MyApp │ │
│ │ cd MyApp │ │
│ │ npx expo start │ │
│ └──────────────────────────────────────┘ │
│ │
│ Option 2: React Native CLI (Advanced) │
│ ┌──────────────────────────────────────┐ │
│ │ npx react-native init MyApp │ │
│ │ cd MyApp │ │
│ │ npx react-native run-android │ │
│ └──────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
Using Expo (Recommended)
Expo is the easiest way to get started with React Native. It handles all the native configuration for you:
# Create a new Expo project
npx create-expo-app@latest MyFirstApp
# Navigate to your project
cd MyFirstApp
# Start the development server
npx expo start
Scan the QR code with your phone's camera (iOS) or Expo Go app (Android) to see your app running!
Project Structure
MyFirstApp/
├── app/ # App screens (Expo Router)
├── components/ # Reusable components
├── assets/ # Images, fonts, etc.
├── node_modules/ # Dependencies
├── app.json # Expo configuration
├── package.json # Project dependencies
└── tsconfig.json # TypeScript config