Introduction to React Native

What is React Native?

React Native is an open-source framework developed by Meta (Facebook) that enables developers to build mobile applications for iOS and Android using JavaScript and React. Unlike hybrid apps that run in a WebView, React Native renders using actual native components.

How React Native Works

// The React Native Architecture
┌─────────────────────────────────────────────────────┐
│                   JavaScript Thread                  │
│  ┌─────────────────────────────────────────────────┐│
│  │  Your React Components & Business Logic         ││
│  │  const App = () => <View><Text>Hello</Text></View>││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘
                         │
                         │ Bridge / JSI (New Architecture)
                         ▼
┌─────────────────────────────────────────────────────┐
│                    Native Thread                     │
│  ┌─────────────────────────────────────────────────┐│
│  │  Native UI Components (UIKit / Android Views)   ││
│  │  UIView, UILabel, android.widget.TextView       ││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘

React Native vs Other Approaches

Your First React Native Component

// App.js - A simple React Native app
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';

export default function App() {
  const handlePress = () => {
    Alert.alert('Hello!', 'Welcome to React Native');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native</Text>
      <Text style={styles.subtitle}>
        Build native apps with JavaScript
      </Text>
      
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Get Started</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

React Web vs React Native

// React Web Component
function WebComponent() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <p>This is a paragraph</p>
      <button onClick={() => alert('Clicked!')}>
        Click Me
      </button>
    </div>
  );
}

// React Native Component (equivalent)
import { View, Text, TouchableOpacity, Alert, StyleSheet } from 'react-native';

function NativeComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Hello World</Text>
      <Text style={styles.paragraph}>This is a paragraph</Text>
      <TouchableOpacity 
        style={styles.button}
        onPress={() => Alert.alert('Clicked!')}
      >
        <Text style={styles.buttonText}>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  heading: { fontSize: 24, fontWeight: 'bold' },
  paragraph: { fontSize: 16, marginVertical: 10 },
  button: { backgroundColor: '#007AFF', padding: 10, borderRadius: 5 },
  buttonText: { color: '#fff', textAlign: 'center' },
});

Who Uses React Native?

*Airbnb later moved away from RN but contributed significantly to the ecosystem

The New Architecture (2024+)

// React Native's New Architecture Features
const newArchitecture = {
  // Fabric - New rendering system
  fabric: {
    synchronousRendering: true,  // Better animations
    priorityQueue: true,         // Concurrent rendering
    directNativeAccess: true,    // Faster UI updates
  },
  
  // TurboModules - Faster native modules
  turboModules: {
    lazyLoading: true,           // Load modules on demand
    codegenTypes: true,          // Type-safe native calls
    jsiBindings: true,           // Direct JavaScript-Native calls
  },
  
  // JSI - JavaScript Interface
  jsi: {
    bridgeless: true,            // No more bridge overhead
    synchronousCalls: true,      // Immediate native access
    sharedMemory: true,          // Share data without copying
  },
};

// Benefits of New Architecture
// ✅ 10x faster startup for some modules
// ✅ Smoother animations (60fps)
// ✅ Better TypeScript support
// ✅ Smaller bundle sizes