Learn React Native
React Native lets you build real iOS and Android apps using JavaScript and React. One codebase. Two platforms. Used by Meta, Microsoft, Shopify and Airbnb. If you know React, you already know half of React Native.
React Native at a Glance
JSX components, StyleSheet, and hooks — React skills transfer directly to mobile.
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello, React Native!</Text>
<Text style={styles.sub}>Building for iOS & Android</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center',
alignItems: 'center', backgroundColor: '#fff' },
title: { fontSize: 24, fontWeight: 'bold' },
sub: { fontSize: 16, color: '#666', marginTop: 8 },
});▶ Output
📱 Screen renders: Hello, React Native! Building for iOS & Android
import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.count}>{count}</Text>
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text style={styles.btn}>Press me</Text>
</TouchableOpacity>
</View>
);
}▶ Output
📱 Screen renders: [0] ← count display [Press me] ← button Each press increments count by 1
import { FlatList, Text, View } from 'react-native';
const DATA = [
{ id: '1', title: 'Learn React Native' },
{ id: '2', title: 'Build an iOS App' },
{ id: '3', title: 'Deploy to Android' },
];
export default function App() {
return (
<FlatList
data={DATA}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text>{item.title}</Text>
)}
/>
);
}▶ Output
📱 Screen renders: Learn React Native Build an iOS App Deploy to Android
What You'll Learn
Six beginner-friendly modules — from your first component to fetching real data.
Core Components
- View, Text, Image
- StyleSheet
- SafeAreaView
- ScrollView
Props & State
- Passing props
- useState hook
- Lifting state
- Re-renders
Lists & Input
- FlatList
- SectionList
- TextInput
- TouchableOpacity
Hooks
- useEffect
- useCallback
- useMemo
- Custom hooks
Navigation
- Stack Navigator
- Tab Navigator
- Passing params
- Deep linking
Networking & Storage
- fetch() API
- async/await
- AsyncStorage
- Loading states
Frequently Asked Questions
Do I need to know React before React Native?
Knowing React first is strongly recommended. React Native uses the same concepts — components, props, state, hooks, and JSX. If you know React for the web, React Native will feel natural within hours. If you are brand new, learn React first, then come back to React Native.
Do I need a Mac to develop for iOS?
To compile and submit a native iOS app to the App Store, yes — you need a Mac with Xcode. However, with Expo Go (the recommended beginner setup), you can preview your iOS app on a physical iPhone from any computer. For Android development, any OS works.
What is Expo and should I use it?
Expo is a set of tools built on top of React Native that removes nearly all the native configuration. For beginners it is the right choice — run expo create-app, scan a QR code, and your app is live on your phone in two minutes. Use bare React Native only when you need custom native modules Expo does not support.
What should I learn after React Native basics?
React Navigation for multi-screen apps, React Query or Zustand for state management, Expo Router for file-based routing (the modern approach), and native module integration with TypeScript for production apps.
Ready to build your first mobile app?
Free. No signup. No downloads. Just start.
Start Learning React NativeNo account required · Always free
The Story of React Native
Real history, real companies, and an honest look at where React Nativeshines and where it doesn't — not just a feature list.
Where it came from
Facebook released React Native in 2015, two years after React itself, built on the insight that the same component model that worked for web UIs could describe mobile UIs too — but rendered using each platform's actual native components rather than a custom drawing engine, which is the key architectural difference from Flutter.
How it’s actually used today
React Native powers large parts of the Facebook and Instagram apps (its original use case), as well as Discord, Shopify's mobile app, and Coinbase. Because it shares React's component model, teams that already have web React developers can often bring them onto mobile work with a much shorter ramp-up than starting from scratch in Swift and Kotlin separately.
Strengths & trade-offs
Using real native components generally means React Native apps feel more 'authentically native' out of the box than some cross-platform alternatives, and the shared codebase with a web React team is a genuine efficiency win. The trade-off is that you'll occasionally need to write small amounts of platform-specific native code (via 'bridging') for features the library doesn't cover directly.
What to learn next
Solid JavaScript or TypeScript first, then React itself, are prerequisites before React Native makes sense — it assumes you already understand components, props and state. From there, Expo is the most common tool for actually building and shipping a React Native app without configuring native build tooling by hand.