React Native — Build Native Mobile Apps with React

Introduction

React Native lets you build mobile applications using React — the same library millions of developers already know. Unlike hybrid frameworks that wrap web content in a webview, React Native renders truly native UI components. Your JavaScript code drives native views, giving users the performance and feel of a native app.

With over 126,000 GitHub stars, React Native powers mobile apps at Meta (Facebook, Instagram, Messenger), Microsoft (Office, Outlook), Shopify, Discord, Bloomberg, and thousands of other companies. It is the most widely used cross-platform mobile framework.

What React Native Does

React Native bridges JavaScript and native platform APIs. You write components using React syntax, and React Native translates them into native iOS (UIKit) and Android (Android Views) components. The new architecture (Fabric renderer + TurboModules) provides direct synchronous access to native APIs for better performance.

Architecture Overview

[React Components (JS/TS)]
        |
   [React Native Runtime]
        |
   [New Architecture]
+-------+-------+
|       |       |
[Fabric]  [Turbo   [JSI]
New       Modules]  Direct
renderer  Native    JS-to-native
Sync UI   modules   bridge
        |
+-------+-------+
|               |
[iOS Native]    [Android Native]
UIKit           Android Views
Swift/ObjC      Kotlin/Java

[Expo]
Managed workflow
OTA updates
EAS Build & Submit

Self-Hosting & Configuration

// App.tsx — React Native component
import { useState, useEffect } from "react";
import { View, Text, FlatList, StyleSheet, ActivityIndicator } from "react-native";

interface Post { id: number; title: string; body: string; }

export default function App() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(r => r.json())
      .then(data => { setPosts(data.slice(0, 20)); setLoading(false); });
  }, []);

  if (loading) return <ActivityIndicator size="large" style={styles.center} />;

  return (
    <FlatList
      data={posts}
      keyExtractor={item => String(item.id)}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.body}>{item.body}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, justifyContent: "center" },
  card: { padding: 16, borderBottomWidth: 1, borderColor: "#eee" },
  title: { fontSize: 16, fontWeight: "bold", marginBottom: 4 },
  body: { fontSize: 14, color: "#666" },
});

Key Features

• Truly Native — renders platform-native components, not webviews
• React Paradigm — use React components, hooks, and state management
• Cross-Platform — share 90%+ code between iOS and Android
• Hot Reloading — see changes instantly during development
• New Architecture — Fabric and TurboModules for better performance
• Expo — managed workflow with OTA updates and cloud builds
• Native Modules — access any native API via custom modules
• Large Ecosystem — thousands of community libraries and tools

Comparison with Similar Tools

FAQ

Q: React Native vs Flutter — which should I choose? A: React Native if your team knows React/JavaScript. Flutter for pixel-perfect custom UI and if you are starting fresh. Both are production-ready and widely adopted.

Q: Should I use Expo or bare React Native? A: Start with Expo — it handles builds, updates, and native configuration. Eject to bare workflow only if you need custom native modules not supported by Expo.

Q: Is React Native performant enough for complex apps? A: Yes. The new architecture (Fabric + TurboModules) eliminates the async bridge bottleneck. Apps like Facebook, Instagram, and Shopify prove React Native handles complex, high-performance use cases.

Q: Can I reuse code between React web and React Native? A: Business logic (hooks, state, API calls) shares directly. UI components need adaptation since React Native uses View/Text instead of div/span. Libraries like react-native-web bridge this gap.

Sources

• GitHub: https://github.com/facebook/react-native
• Documentation: https://reactnative.dev
• Created by Meta (Facebook)
• License: MIT