Why React Native?

React Native lets you write one codebase and deploy it to both iOS and Android. It uses JavaScript — the world's most popular programming language — and shares concepts with React for the web. For indie developers and small teams, it dramatically reduces the time and cost of shipping a mobile app.

What You'll Need Before Starting

  • Node.js (v18 or later) installed on your machine
  • A code editor — VS Code is recommended
  • For iOS: a Mac with Xcode installed
  • For Android: Android Studio with an emulator configured
  • Basic knowledge of JavaScript or TypeScript

Step 1: Set Up Your Environment

The fastest way to get started is using Expo, a managed framework that handles the native build complexity for you. Open your terminal and run:

npx create-expo-app MyFirstApp
cd MyFirstApp
npx expo start

This launches the Expo development server. You can immediately preview your app on a real device using the Expo Go app (available on the App Store and Google Play) by scanning the QR code in the terminal.

Step 2: Understand the Project Structure

  • app/ — Your screens and navigation (Expo Router uses file-based routing)
  • assets/ — Images, fonts, and static files
  • components/ — Reusable UI components
  • package.json — Dependencies and scripts

Step 3: Build a Simple Screen

Open app/index.tsx and replace the contents with:

import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, World!</Text>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Tap Me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 28, fontWeight: 'bold', marginBottom: 20 },
  button: { backgroundColor: '#5B21B6', padding: 16, borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 16 },
});

Save the file and watch your app update instantly via hot reload — no rebuild required.

Step 4: Add Navigation

Expo Router handles navigation with a file-based system similar to Next.js. Create a new file at app/about.tsx and it automatically becomes a navigable route at /about. Use the Link component or router.push('/about') to navigate between screens.

Step 5: Prepare for Production

When you're ready to publish, Expo provides two paths:

  1. Expo Application Services (EAS Build): Cloud-based build system that generates .ipa and .apk files without needing a Mac or Android Studio locally.
  2. Bare workflow: Eject from Expo for full native control when you need custom native modules.

Key Concepts to Learn Next

  • State management with Zustand or Redux Toolkit
  • Data fetching with React Query (TanStack Query)
  • Styling with NativeWind (Tailwind CSS for React Native)
  • Push notifications with Expo Notifications

Final Thoughts

React Native with Expo is one of the most accessible entry points into mobile development. You can go from zero to a working app in a single afternoon. Focus on building something small and real — even a simple to-do app will teach you more than any tutorial alone.