Skip to main content
React Native Architecture

​
Introduction to React Native

React Native is an open-source framework for building mobile applications using JavaScript and React. Created by Facebook in 2015, it allows developers to build truly native mobile apps for iOS and Android using a single codebase.

​
What is React Native?

React Native lets you build mobile apps using only JavaScript. Unlike hybrid frameworks that use WebViews, React Native renders actual native UI components, giving you the performance and look-and-feel of a native app.

True Native

Renders to real native components, not web views

Cross-Platform

One codebase for iOS and Android (90%+ code reuse)

Hot Reloading

See changes instantly without rebuilding

JavaScript

Use the language you already know

​
How React Native Works

┌─────────────────────────────────────────────────────────────────────┐
│                   React Native Architecture                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│   JavaScript Thread                   Native Thread                 │
│   ─────────────────                   ─────────────                 │
│                                                                      │
│   ┌──────────────────┐               ┌──────────────────┐           │
│   │   Your React     │               │   Native UI      │           │
│   │   Components     │               │   Components     │           │
│   └────────┬─────────┘               └─────────▲────────┘           │
│            │                                   │                    │
│            │        ┌──────────────┐           │                    │
│            ├───────►│   Bridge     │───────────┤                    │
│            │        │  (Async)     │           │                    │
│            │        └──────────────┘           │                    │
│            │                                   │                    │
│   ┌────────▼─────────┐               ┌─────────┴────────┐           │
│   │  Metro Bundler   │               │  Native Modules  │           │
│   │  (JS Bundle)     │               │  (Camera, GPS)   │           │
│   └──────────────────┘               └──────────────────┘           │
│                                                                      │
│   JavaScriptCore (iOS)              iOS: UIKit, SwiftUI             │
│   or Hermes (Opt-in)                Android: Views, Kotlin          │
│                                                                      │
└─────────────────────────────────────────────────────────────────────┘

​
The Bridge

The Bridge is the heart of React Native. It’s an asynchronous communication layer between JavaScript and native code:
  1. JavaScript writes what UI should look like
  2. Bridge serializes messages (JSON)
  3. Native renders actual UI components
  4. Native sends events back through bridge
Performance Consideration: The bridge is asynchronous and serializes data. For high-frequency updates (animations, gestures), React Native provides ways to bypass it using the Reanimated library or JSI (JavaScript Interface).

​
React Native vs Alternatives

FeatureReact NativeNative (Swift/Kotlin)FlutterIonic/Cordova
LanguageJavaScriptSwift/KotlinDartHTML/CSS/JS
UI RenderingNative componentsNativeCustom renderingWebView
PerformanceNear-nativeBestNear-nativeSlower
Code Reuse90%+0%95%+95%+
Hot Reload✅ Yes❌ No✅ Yes✅ Yes
CommunityHugeLargestGrowingDeclining
Learning CurveEasy (if you know React)SteepMediumEasy
App SizeMedium (10-20MB)SmallLarger (20-30MB)Small
AnimationsGood (with libs)ExcellentExcellentPoor
✅ You already know JavaScript/React✅ Need to ship iOS and Android quickly✅ Want near-native performance✅ Need access to huge npm ecosystem✅ Team has web development background

​
Development Environment Setup

​
Prerequisites

1

Install Node.js

Download and install Node.js 18+ from nodejs.org
# Verify installation
node --version  # Should be v18.0.0 or higher
npm --version   # Should be 9.0.0 or higher
2

Install Watchman (macOS/Linux)

File watcher for better performance
# macOS
brew install watchman

# Linux
# Follow instructions at https://facebook.github.io/watchman/
3

Choose Your Path

Option A: Expo (Recommended for Beginners)
  • Faster setup, no native tooling required
  • Great for learning and prototyping
  • Limited access to native modules
Option B: React Native CLI (Recommended for This Course)
  • Full access to native code and modules
  • Required for existing native projects
  • More setup, but more control

​
Setup for iOS (macOS Only)

1

Install Xcode

Download Xcode from the Mac App Store (16GB+)
# Install Xcode Command Line Tools
xcode-select --install
2

Install CocoaPods

iOS dependency manager
sudo gem install cocoapods

# Verify
pod --version
3

Install iOS Simulator

Open Xcode → Preferences → Components → Install simulators

​
Setup for Android

1

Install JDK

Install Java Development Kit 17
# macOS
brew install openjdk@17

# Windows - Download from Oracle/Adoptium
# Linux
sudo apt install openjdk-17-jdk
2

Install Android Studio

Download from developer.android.com/studioDuring installation, ensure these are selected:
  • Android SDK
  • Android SDK Platform
  • Android Virtual Device (AVD)
3

Configure Android SDK

Open Android Studio → More Actions → SDK ManagerInstall:
  • Android 13 (Tiramisu) - API Level 33
  • Android SDK Build-Tools 33.0.0
  • Google Play Intel x86 Atom System Image
4

Set Environment Variables

Add to your ~/.bashrc, ~/.zshrc, or Windows Environment Variables:
# macOS/Linux
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Windows (PowerShell)
[System.Environment]::SetEnvironmentVariable('ANDROID_HOME', 'C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk', 'User')

​
Creating Your First React Native App

​
Option 1: Using React Native CLI

# Install React Native CLI globally
npm install -g react-native-cli

# Create new project
npx react-native@latest init MyFirstApp

# Navigate to project
cd MyFirstApp

# Start Metro bundler
npx react-native start

# In a new terminal, run on iOS
npx react-native run-ios

# Or run on Android
npx react-native run-android

​
Option 2: Using Expo (Faster for Learning)

# Create Expo app
npx create-expo-app MyFirstApp

cd MyFirstApp

# Start development server
npx expo start

# Scan QR code with Expo Go app on your phone
# Or press 'i' for iOS simulator
# Or press 'a' for Android emulator
For this course, we’ll use React Native CLI to have full control over native code. But Expo is excellent for learning and prototyping!

​
Project Structure

MyFirstApp/
├── android/              # Android native code
│   ├── app/
│   │   ├── src/main/
│   │   │   ├── java/      # Native Android code
│   │   │   └── res/       # Android resources
│   │   └── build.gradle   # Android dependencies
│   └── gradle.properties
│
├── ios/                  # iOS native code
│   ├── MyFirstApp/
│   │   ├── AppDelegate.mm # App entry point
│   │   └── Info.plist     # iOS configuration
│   ├── MyFirstApp.xcodeproj
│   └── Podfile           # iOS dependencies
│
├── node_modules/         # JavaScript dependencies
│
├── src/                  # Your app code (create this)
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   └── utils/
│
├── App.tsx              # Root component
├── index.js             # App entry point
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript config
├── babel.config.js      # Babel configuration
└── metro.config.js      # Metro bundler config

​
Understanding the Entry Point

​
index.js

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

// Register the root component
AppRegistry.registerComponent(appName, () => App);

​
App.tsx (TypeScript)

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';

function App(): React.JSX.Element {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Hello, React Native!</Text>
          <Text style={styles.sectionDescription}>
            Welcome to your first app
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#000',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: '#666',
  },
});

export default App;

​
Metro Bundler

Metro is the JavaScript bundler for React Native. It:
  1. Transforms your code (JSX → JS, TypeScript → JS)
  2. Bundles all files into a single JavaScript file
  3. Serves the bundle to your app
  4. Watches for file changes and hot reloads
┌──────────────────────────────────────────────────────────────┐
│                    Metro Bundler Flow                         │
├──────────────────────────────────────────────────────────────┤
│                                                               │
│   Your Code (JSX/TS)                                          │
│         │                                                     │
│         ▼                                                     │
│   ┌──────────────┐                                            │
│   │  Transform   │  → Babel (JSX → JS)                       │
│   │              │  → TypeScript (TS → JS)                   │
│   └──────┬───────┘                                            │
│         │                                                     │
│         ▼                                                     │
│   ┌──────────────┐                                            │
│   │  Resolution  │  → Find all imports/requires              │
│   │              │  → Build dependency graph                 │
│   └──────┬───────┘                                            │
│         │                                                     │
│         ▼                                                     │
│   ┌──────────────┐                                            │
│   │   Bundle     │  → Combine all modules                    │
│   │              │  → Minify (production)                    │
│   └──────┬───────┘                                            │
│         │                                                     │
│         ▼                                                     │
│   JavaScript Bundle → Sent to app                            │
│                                                               │
└──────────────────────────────────────────────────────────────┘

​
Hot Reloading vs Fast Refresh

​
Debugging Your App

​
Opening Dev Menu

  • iOS Simulator: Cmd+D
  • Android Emulator: Cmd+M (Mac) or Ctrl+M (Windows/Linux)
  • Physical Device: Shake the device

​
Dev Menu Options

┌────────────────────────────────────┐
│        Developer Menu              │
├────────────────────────────────────┤
│  Reload                            │
│  Debug                             │
│  Change Bundle Location            │
│  Toggle Inspector                  │
│  Toggle Performance Monitor        │
│  Show Perf Monitor                 │
│  Settings                          │
└────────────────────────────────────┘

​
Remote Debugging

# 1. Open Dev Menu → Debug
# 2. Opens Chrome DevTools at http://localhost:8081/debugger-ui
# 3. Use console.log, breakpoints, network tab

// In your code
console.log('User data:', userData);
console.warn('This is a warning');
console.error('Something went wrong');
Performance Impact: Remote debugging runs JavaScript in Chrome (V8), not on device (JavaScriptCore/Hermes). This can affect performance and timing. Use Flipper or console logs for production debugging.

​
Using Flipper

Flipper is Facebook’s debugging platform for React Native: 
# Install Flipper desktop app
# https://fbflipper.com/

# Features:
# - Layout inspector
# - Network requests
# - Logs and crashes
# - Redux DevTools
# - React DevTools
# - Database inspector

​
Common Commands

# Start Metro bundler
npx react-native start

# Run on iOS
npx react-native run-ios
npx react-native run-ios --simulator="iPhone 15 Pro"

# Run on Android
npx react-native run-android

# Clear cache and rebuild
npx react-native start --reset-cache

# Install iOS dependencies
cd ios && pod install && cd ..

# Build release version (Android)
cd android && ./gradlew assembleRelease

# Build release version (iOS)
# Use Xcode → Product → Archive

​
Your First App: Hello World++

Let’s build a simple but complete app: 
import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

function App(): React.JSX.Element {
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('');

  const handlePress = () => {
    setGreeting(`Hello, ${name || 'Stranger'}! 👋`);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>Welcome to React Native!</Text>
        
        <TextInput
          style={styles.input}
          placeholder="Enter your name"
          value={name}
          onChangeText={setName}
        />
        
        <TouchableOpacity style={styles.button} onPress={handlePress}>
          <Text style={styles.buttonText}>Say Hello</Text>
        </TouchableOpacity>
        
        {greeting ? (
          <Text style={styles.greeting}>{greeting}</Text>
        ) : null}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 30,
  },
  input: {
    width: '100%',
    height: 50,
    backgroundColor: '#fff',
    borderRadius: 10,
    paddingHorizontal: 15,
    fontSize: 16,
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 20,
  },
  button: {
    width: '100%',
    height: 50,
    backgroundColor: '#007AFF',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  greeting: {
    fontSize: 24,
    color: '#007AFF',
    fontWeight: '500',
  },
});

export default App;
Try it now!
  1. Replace your App.tsx with the code above
  2. Save the file
  3. See Fast Refresh update your app instantly
  4. Type your name and click the button

​
Troubleshooting Common Issues

# Clear watchman cache
watchman watch-del-all

# Clear Metro cache
npx react-native start --reset-cache

# Delete node_modules and reinstall
rm -rf node_modules
npm install

# Clean iOS build
cd ios
pod deintegrate
pod install
cd ..

# Clean Xcode build folder
# In Xcode: Product → Clean Build Folder (Shift+Cmd+K)

# Clean Android build
cd android
./gradlew clean
cd ..

# Delete build folders
cd android
rm -rf app/build
cd ..

# iOS Pods issue
cd ios
pod deintegrate
pod cache clean --all
pod install
cd ..

​
What’s Next?

Now that you have React Native set up and running, you’re ready to dive into building real apps! In the next module, we’ll explore:
  • Core UI components (View, Text, Image, Button)
  • Styling with StyleSheet
  • TouchableOpacity and user interaction
  • TextInput and forms
  • Platform-specific code

Next: Core Components

Learn the building blocks of React Native UIs

​
Summary

In this module, you learned: ✅ What React Native is and how it works under the hood ✅ React Native architecture and the Bridge ✅ Setting up development environment for iOS and Android ✅ Creating your first React Native app ✅ Understanding Metro bundler and Fast Refresh ✅ Debugging tools and techniques ✅ Building a simple interactive app Next up: Master the core components that form every React Native app!