# React Native — Build Native Mobile Apps with React

> React Native is the leading framework for building native iOS and Android apps using React. Write once in JavaScript/TypeScript, get truly native mobile apps — not webviews — with shared business logic and platform-specific UI when needed.

## Install

Save as a script file and run:

# React Native — Build Native Mobile Apps with React

## Quick Use
```bash
# Create a new React Native app (Expo recommended)
npx create-expo-app@latest my-app
cd my-app && npx expo start

# Or bare React Native (without Expo)
npx @react-native-community/cli init MyApp
cd MyApp
npx react-native run-ios   # or run-android
```

## 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
```tsx
// 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
| Feature | React Native | Flutter | Expo | Ionic | .NET MAUI |
|---|---|---|---|---|---|
| Language | JS/TS | Dart | JS/TS | JS/TS | C# |
| Rendering | Native components | Custom engine (Skia) | Native (via RN) | WebView | Native |
| Performance | Near-native | Near-native | Near-native | Web-level | Native |
| Code Sharing | 90%+ | 95%+ | 95%+ | 95%+ | 90%+ |
| Web Support | react-native-web | Yes | Yes | Yes | Blazor |
| Learning Curve | Low (React devs) | Moderate (Dart) | Very Low | Low | Moderate |
| GitHub Stars | 126K | 178K | 40K | 51K | 22K |

## 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

---
Source: https://tokrepo.com/en/workflows/f7fe0477-3712-11f1-9bc6-00163e2b0d79
Author: Script Depot