React Native Developer Roadmap 2025 (Step-by-Step Guide)

React Native lets you build real iOS and Android apps in JavaScript with ~95% shared code between platforms. It powers apps at Meta, Microsoft, Shopify, and thousands of startups. This roadmap shows exactly what to learn, in what order, and what to build along the way.

At a glance

Phase 0 — Prerequisites: JavaScript + React (Weeks 1–4)

React Native is JavaScript + React. Skip this if you already know both.

JavaScript you must know

// Arrow functions, destructuring, spread
const greet = ({ name, age = 25 }) => `Hello ${name}, ${age}`;

// Array methods
const doubled = [1, 2, 3].map(n => n * 2);
const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);

// Promises and async/await
async function fetchUser(id) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// Modules
import { useState } from 'react';
export default function App() { /* ... */ }

React concepts you must know

Phase 1 — React Native core (Weeks 5–7)

Setting up your environment

Expo (recommended for beginners)

npx create-expo-app MyApp
cd MyApp
npx expo start

React Native CLI (for advanced native work)

npx @react-native-community/cli@latest init MyApp
cd MyApp
npx react-native run-android   # or run-ios

Core components

import {
  View, Text, TextInput, Button, TouchableOpacity,
  FlatList, ScrollView, Image, StyleSheet, Platform
} from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native</Text>
      <TouchableOpacity style={styles.btn} onPress={() => alert('Tap!')}>
        <Text style={styles.btnText}>Press me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title:     { fontSize: 24, fontWeight: 'bold' },
  btn:       { backgroundColor: '#6366f1', padding: 12, borderRadius: 8, marginTop: 16 },
  btnText:   { color: '#fff', fontWeight: '600' },
});

Core component cheat sheet

Phase 2 — Styling & layouts (Weeks 8–9)

React Native uses a subset of CSS properties via StyleSheet. No real CSS — no classes, no cascade.

Flexbox in React Native

Flexbox is the only layout system. Default flexDirection is column (not row like web).

// Horizontal centering
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

// Fill remaining space
<View style={{ flex: 1 }}>  {/* takes all remaining space */}
  <Text>Fills the screen</Text>
</View>

Platform-specific styles

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOpacity: 0.15,
      shadowRadius: 8,
      shadowOffset: { width: 0, height: 2 },
    },
    android: {
      elevation: 4,
    },
  }),
});

Responsive design

import { Dimensions, useWindowDimensions } from 'react-native';

// Static (doesn't update on orientation change)
const { width, height } = Dimensions.get('window');

// Dynamic (updates on rotate — preferred)
function MyComponent() {
  const { width, height } = useWindowDimensions();
  const isLandscape = width > height;

  return (
    <View style={{ flexDirection: isLandscape ? 'row' : 'column' }}>
      {/* ... */}
    </View>
  );
}

Phase 3 — Navigation (Weeks 10–11)

React Navigation is the de facto standard.

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

# Stack navigator
npm install @react-navigation/native-stack

# Tab navigator
npm install @react-navigation/bottom-tabs

# Drawer navigator
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

Stack navigator

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Item Details' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Navigate
function HomeScreen({ navigation }) {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Details', { id: 42 })}>
      <Text>Go to details</Text>
    </TouchableOpacity>
  );
}

// Receive params
function DetailsScreen({ route }) {
  const { id } = route.params;
  return <Text>Item {id}</Text>;
}

Bottom tab navigator

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator screenOptions={({ route }) => ({
      tabBarIcon: ({ color, size }) => {
        const icons = { Home: 'home', Profile: 'person', Settings: 'settings' };
        return <Ionicons name={icons[route.name]} size={size} color={color} />;
      },
    })}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Navigation patterns

Phase 4 — State management (Weeks 12–14)

When to use what

Zustand (recommended for most apps)

npm install zustand

import { create } from 'zustand';

interface CartStore {
  items: { id: number; qty: number }[];
  add: (id: number) => void;
  remove: (id: number) => void;
  total: () => number;
}

const useCart = create<CartStore>((set, get) => ({
  items: [],
  add: (id) => set(state => ({
    items: state.items.find(i => i.id === id)
      ? state.items.map(i => i.id === id ? { ...i, qty: i.qty + 1 } : i)
      : [...state.items, { id, qty: 1 }],
  })),
  remove: (id) => set(state => ({ items: state.items.filter(i => i.id !== id) })),
  total: () => get().items.reduce((sum, i) => sum + i.qty, 0),
}));

// In a component
function CartIcon() {
  const total = useCart(s => s.total());
  return <Text>{total} items</Text>;
}

Redux Toolkit (enterprise / large teams)

npm install @reduxjs/toolkit react-redux

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
  },
});

export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

Phase 5 — Networking & APIs (Weeks 15–16)

Fetch with error handling

async function apiFetch<T>(url: string, options?: RequestInit): Promise<T> {
  const res = await fetch(url, {
    ...options,
    headers: { 'Content-Type': 'application/json', ...options?.headers },
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
  return res.json();
}

React Query (best practice for server state)

npm install @tanstack/react-query

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => apiFetch<User[]>('https://api.example.com/users'),
  });

  if (isLoading) return <ActivityIndicator />;
  if (error)    return <Text>Error: {error.message}</Text>;

  return (
    <FlatList
      data={data}
      keyExtractor={u => String(u.id)}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

Offline storage

import AsyncStorage from '@react-native-async-storage/async-storage';

await AsyncStorage.setItem('token', jwt);
const token = await AsyncStorage.getItem('token');
await AsyncStorage.removeItem('token');

Phase 6 — Device features & native modules (Weeks 17–19)

Expo modules (zero native config)

Location example

import * as Location from 'expo-location';

async function getCurrentLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    alert('Location permission denied');
    return;
  }
  const loc = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.High });
  return { lat: loc.coords.latitude, lng: loc.coords.longitude };
}

Push notifications with Expo

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';

async function registerForPushNotifications() {
  if (!Device.isDevice) return null; // must run on real device

  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  const finalStatus = existingStatus === 'granted'
    ? existingStatus
    : (await Notifications.requestPermissionsAsync()).status;

  if (finalStatus !== 'granted') return null;

  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token; // send this to your backend
}

Phase 7 — Testing (Weeks 20–22)

Testing pyramid for React Native

Jest + React Native Testing Library

npm install --save-dev @testing-library/react-native jest-expo

import { render, screen, fireEvent } from '@testing-library/react-native';
import Counter from './Counter';

test('increments count on press', () => {
  render(<Counter />);
  const btn = screen.getByText('+');
  fireEvent.press(btn);
  expect(screen.getByText('1')).toBeTruthy();
});

test('shows loading state', async () => {
  render(<UserProfile userId={1} />);
  expect(screen.getByTestId('spinner')).toBeTruthy();
  await screen.findByText('John Doe');
});

Mocking native modules

// __mocks__/@react-native-async-storage/async-storage.ts
const store: Record<string, string> = {};
export default {
  getItem: jest.fn(key => Promise.resolve(store[key] ?? null)),
  setItem: jest.fn((key, val) => { store[key] = val; return Promise.resolve(); }),
  removeItem: jest.fn(key => { delete store[key]; return Promise.resolve(); }),
};

Phase 8 — Performance (Weeks 23–24)

Common performance pitfalls

FlatList optimisation

<FlatList
  data={items}
  keyExtractor={item => item.id.toString()}
  renderItem={renderItem}            // memoize with useCallback
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
  removeClippedSubviews={true}
  getItemLayout={(_, index) => ({    // only if item height is fixed
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

Animations with Reanimated

npm install react-native-reanimated

import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';

function SpringBox() {
  const offset = useSharedValue(0);
  const style = useAnimatedStyle(() => ({
    transform: [{ translateY: offset.value }],
  }));

  return (
    <>
      <Animated.View style={[{ width: 60, height: 60, backgroundColor: '#6366f1' }, style]} />
      <Button title="Bounce" onPress={() => { offset.value = withSpring(-100); }} />
    </>
  );
}

Phase 9 — CI/CD & publishing (Weeks 25–28)

EAS Build (Expo Application Services)

npm install -g eas-cli
eas login
eas build:configure

# Build for both platforms
eas build --platform all --profile preview

# Submit to stores
eas submit --platform ios
eas submit --platform android

EAS profiles in eas.json

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": { "buildType": "apk" }
    },
    "production": {
      "autoIncrement": true
    }
  }
}

GitHub Actions for Expo

name: EAS Build
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - uses: expo/expo-github-action@v8
        with:
          expo-version: latest
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: eas build --platform all --non-interactive

App store requirements

Phase 10 — Advanced topics (Weeks 29–36)

New Architecture (Fabric + JSI)

React Native 0.71+ ships with the new architecture enabled by default. Key improvements:

TypeScript best practices

// Type your navigation params
type RootStackParamList = {
  Home: undefined;
  Details: { id: number; title: string };
  Profile: { userId: string };
};

// Type-safe navigation prop
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
type HomeNavProp = NativeStackNavigationProp<RootStackParamList, 'Home'>;

function HomeScreen({ navigation }: { navigation: HomeNavProp }) {
  navigation.navigate('Details', { id: 1, title: 'Test' }); // fully typed
}

Monorepo with Expo + web

npx create-expo-app --template tabs
# Add Next.js for web in a Turborepo / pnpm workspace

Custom native module (Expo Modules API)

// modules/my-module/src/index.ts
import MyModule from './MyModuleModule';
export function getDeviceName(): string {
  return MyModule.getDeviceName();
}

// iOS: MyModuleModule.swift
// Android: MyModuleModule.kt
// Both implement getDeviceName() returning a String

Full technology map

Language      → JavaScript / TypeScript
Runtime       → React Native (Hermes engine)
UI            → Core components, Expo UI, NativeWind (Tailwind)
Navigation    → React Navigation, Expo Router
State         → Zustand, Redux Toolkit, Context API
Server state  → TanStack Query, SWR
Forms         → React Hook Form + Zod
HTTP          → Fetch, Axios
Storage       → AsyncStorage, MMKV, SQLite, WatermelonDB
Auth          → Clerk, Firebase Auth, Supabase Auth
Push          → Expo Notifications, Firebase FCM
Animations    → Reanimated, Moti, Lottie
Testing       → Jest, RNTL, Detox, Maestro
Build         → Expo EAS, Fastlane
CI/CD         → GitHub Actions, Bitrise, CircleCI
Maps          → react-native-maps, MapLibre

36-week timeline

Portfolio project ideas

React Native developer roles & salary

React Native developers who also know Expo, TypeScript, and CI/CD (EAS) typically command a 10–20% premium over developers who know vanilla RN only.

Common mistakes

React Native vs Flutter vs Kotlin Multiplatform

Frequently asked questions

Should I start with Expo or React Native CLI? Start with Expo. It removes 80% of setup complexity, supports all common native APIs via Expo modules, and lets you publish with EAS Build without Xcode or Android Studio for most use cases. Switch to bare workflow when you need a custom native module that Expo doesn't support.

Do I need to know iOS/Android development? Not to start. You can build and ship a production app with only JavaScript. But as you advance — debugging native crashes, writing custom modules, configuring provisioning profiles — knowledge of Swift/Objective-C (iOS) or Kotlin/Java (Android) becomes valuable.

Is React Native dead / dying? No. Meta actively maintains it, and the New Architecture (Fabric + JSI) shipped in 0.71+, making it significantly faster. Shopify, Microsoft, and hundreds of Fortune 500 companies use it in production.

React Native vs Flutter — which should I learn? If you already know React/JavaScript, React Native is faster to learn and shares a huge npm ecosystem. If you're starting fresh and want best-in-class UI performance and a unified rendering engine, Flutter is excellent. Both are solid choices with strong job markets.

Can React Native build for web? Yes, via react-native-web. Some teams maintain a single codebase for iOS, Android, and web. Expo also has first-class web support. However, the web story is secondary — if web is your primary target, use Next.js or Remix instead.

What's the best way to handle auth? Clerk (@clerk/clerk-expo) or Supabase Auth are the fastest paths to production-ready auth with social login, MFA, and session management. For full control, implement JWT + refresh token rotation yourself with Axios interceptors and MMKV storage.