Mobile Framework

React Native Learning Roadmap

React Native lets JavaScript/React developers build native iOS and Android apps using the same component model as React for the web. Used by Facebook, Shopify, Discord, Coinbase, and thousands of startups. If you already know React, React Native is the fastest path to shipping mobile apps — 70% of the knowledge transfers directly. One codebase, two app stores.

Total time

3–5 months

Stages

5 stages

Job-ready at

Stage 3

Career paths

2 paths

Before you start — Prerequisites

✓

React fundamentals

React Native uses the same component model, hooks, state, and props as React web. Without React knowledge, React Native is much harder.

✓

JavaScript (ES6+)

Arrow functions, destructuring, async/await, and modules are used constantly in React Native.

✓

Basic understanding of mobile UX

React Native apps run on phones — understanding navigation patterns, touch targets, and platform conventions helps you build apps that feel native.

Stage 1: React Native Basics

Setup, core components, and styling

2–3 weeks

Topics to cover

Expo CLI and project setupCore components: View, Text, Image, TextInput, ButtonStyleSheet API vs inline stylesFlexbox layout in React NativeScrollView and FlatList for listsTouchable components: TouchableOpacity, PressablePlatform.OS for platform-specific codeSafeAreaView and status bar handlingExpo Go for instant device testingReact Native Debugger tools

Bold = especially important

Milestone

You build a multi-screen React Native app with lists, touch handling, and proper flexbox layout that works on both iOS and Android.

Project to build

Todo list app

FlatList of tasks, add via TextInput + button, mark complete with Pressable, persist state in component, clean styling with StyleSheet.

Stage 2: Navigation

Multi-screen apps with React Navigation

1–2 weeks

Topics to cover

React Navigation: Stack, Tab, Drawer navigatorsNavigating between screens: navigate(), push(), goBack()Passing params between screensuseNavigation and useRoute hooksBottom tab bar with iconsHeader customisation: title, right buttonDeep linking configurationExpo Router as alternative (file-based)Authentication flow (public vs private screens)Nested navigators

Bold = especially important

Milestone

Your app has a bottom tab bar, stack navigation within tabs, and a guarded auth flow — all with clean screen transitions.

Project to build

Recipe browser app

Bottom tabs (Home, Saved, Profile), Stack inside Home for recipe list → detail, pass recipe ID as param, heart icon to save with context state.

Stage 3: APIs & State Management

✓ Min. Job Ready

Network requests and scalable state

2–3 weeks

Topics to cover

fetch / axios for REST API callsLoading, error, and empty statesReact Query / TanStack Query for server stateContext API + useReducer for global stateZustand for simple global stateAsyncStorage for simple persistenceSecure storage for tokens (expo-secure-store)Pagination and infinite scroll with FlatListOptimistic updates for fast UXOffline support patterns

Bold = especially important

Milestone

You fetch data from a real API with React Query, display paginated lists, handle loading/error states, and store auth tokens securely.

Project to build

GitHub profile viewer

Search GitHub users, React Query for API calls, paginated repos list, star/follower counts, secure token storage for authenticated requests.

Stage 4: Device APIs & Native Features

Camera, location, notifications, and sensors

2–3 weeks

Topics to cover

expo-camera: camera access and photo captureexpo-image-picker: photo library accessexpo-location: foreground and background locationexpo-notifications: push and local notificationsexpo-av: audio and video playbackAnimated API: basic animationsReanimated 2/3 for gesture-based animationsHaptics with expo-hapticsBiometric auth with expo-local-authenticationSharing content with expo-sharing

Bold = especially important

Milestone

Your app captures photos, sends push notifications, and includes smooth animations — it feels like a real native app.

Project to build

Photo journal app

Camera capture or gallery pick, photo list with AsyncStorage, push notification reminder to add daily photo, animated transitions between screens.

Stage 5: Production & App Store

Testing, performance, and publishing

2–3 weeks

Topics to cover

Jest + React Native Testing Library for component testsDetox for end-to-end testsTypeScript integration in React NativeExpo EAS Build: cloud build for iOS and AndroidExpo EAS Submit: app store submissionApp icon, splash screen, and metadataOTA updates with expo-updatesCrashlytics / Sentry for crash reportingPerformance: useMemo, useCallback, FlatList optimizationBundle size optimization

Bold = especially important

Milestone

You publish a working React Native app to both the App Store and Play Store via Expo EAS, with crash reporting and TypeScript.

Project to build

Published app

Polish a previous project: TypeScript migration, component tests, EAS build, Crashlytics, custom app icon/splash, submitted to TestFlight + Internal track.

What to learn next with React Native

Skills that pair directly with React Native in job postings

React

Deepen React knowledge — hooks, context, performance — it all applies in React Native

TypeScript

TypeScript is standard in React Native apps and catches bugs before they reach users

Node.js

Build the REST API backend your React Native app talks to

Git

Essential for app versioning and team collaboration

Career paths that use React Native

Mobile Developer Full Stack Developer

Frequently asked questions

React Native vs Flutter — which should I learn?

React Native if you already know JavaScript/React — you can reuse skills and ship faster. Flutter if you want maximum UI consistency, better performance, and don't mind learning Dart. React Native has more existing jobs and a larger ecosystem; Flutter is growing faster in new projects. Both are legitimate choices.

What is Expo and should I use it?

Expo is a framework on top of React Native that removes most of the native setup pain. Expo Go lets you test on a real device instantly. Expo EAS (build service) handles App Store/Play Store submissions. For 90% of apps, use Expo — you get more done faster. Use bare React Native only if you need deep native module customisation that Expo doesn't support.

Is React Native truly cross-platform or does it still need separate code?

Mostly cross-platform. UI looks slightly different on iOS and Android (fonts, status bar, navigation patterns) because React Native uses actual native components per platform. You'll write a little platform-specific code (Platform.OS checks), but typically less than 10% of your codebase is platform-specific. The logic, state management, and API calls are shared 100%.

What is the new architecture and should I care?

React Native's new architecture (Fabric renderer + JSI bridge) is now the default in React Native 0.74+. It removes the asynchronous JSON bridge between JavaScript and native code, improving performance and enabling synchronous native calls. Most library authors have migrated. If you're starting a new project in 2025, you're on the new architecture by default — don't worry about the old one.

How do I handle navigation in React Native?

React Navigation is the standard — it's the library used by 90%+ of React Native apps. Start with Stack Navigator for hierarchical navigation and Tab Navigator for bottom tabs. Expo Router (file-based routing) is the modern alternative for Expo projects, bringing Next.js-style routing to mobile. Learn React Navigation first; Expo Router is worth knowing for new Expo projects.

Ready to start learning?

Browse our curated React Native resources — every course, book, and video ranked by quality.

View React Native Resources →