React Native is a framework for building native mobile apps using JavaScript and React. Instead of rendering HTML, it renders real native UI components.

How React Native Works 

  JavaScript (React components)
        ↓
   React Native Bridge
        ↓
Native UI (UIView on iOS, android.view on Android)

Your JavaScript runs in a separate thread and communicates with native code through a bridge. Newer versions use the New Architecture (Fabric + TurboModules) for faster, direct native calls.

React Native vs React Web

React (Web) React Native
Renders HTML elements (<div>, <p>) Native components (<View>, <Text>)
Styling CSS JavaScript StyleSheet
DOM Browser DOM No DOM — native views
Navigation React Router React Navigation

The mental model is the same: components, props, state, and hooks work identically.

A Minimal Example 

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

export default function App() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Hello, React Native!</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    title: { fontSize: 24, fontWeight: 'bold' },
});

Why React Native?

  • Native performance — Real native widgets, not a WebView
  • Code sharing — Share logic with React web apps
  • Hot reload — See changes instantly during development
  • Large ecosystem — Expo, React Navigation, thousands of libraries
  • Cross-platform — One codebase for iOS and Android

When to Use React Native

Good fit:

  • Social, e-commerce, and content apps
  • Teams already using React
  • Apps needing native look and feel
  • MVPs that ship to both platforms quickly

Consider alternatives when:

  • Heavy 3D/gaming — use Unity or native SDKs
  • Platform-specific UI is paramount — Swift/Kotlin may be better
  • Web-first with light mobile needs — consider Ionic or PWA

Expo vs Bare Workflow

  • Expo — Managed toolchain, easy setup, recommended for beginners
  • Bare workflow — Full native project access, needed for custom native modules

This course uses Expo for simplicity.

Prerequisites

Complete before starting:

Next: set up your development environment with Expo.