Mobile Framework Deep Dive

React Native

"Learn once, write anywhere." React Native lets web developers ship truly native iOS & Android apps using JavaScript or TypeScript and the React mental model.

JavaScript / TypeScriptReactNative UICross-platformMeta
← Back to Client Side
Quick Facts

At a Glance

Language
JS / TypeScript
Created
2015 · Meta
Renders to
Real native UIKit / Android views
Targets
iOS, Android, Windows (community), tvOS, web (RN-Web)
Recommended starter
Expo (managed workflow)
Notable users
Instagram, Discord, Shopify, Microsoft Office, Tesla

Basic Concepts

  • React, on phones: the same components, hooks, and JSX you know — rendering native widgets instead of DOM nodes.
  • Bridge / JSI: JS communicates with native code via Meta's modern JavaScript Interface — direct, synchronous, fast.
  • Fabric & TurboModules are the new architecture (default since RN 0.76) — better performance, smoother concurrent rendering.
  • Native modules let you wrap any platform-specific Swift/Kotlin code as a JS module.
  • Hot reload & fast refresh keep iteration tight despite the native runtime.
Syntax

Taste of React Native

import { useEffect, useState } from "react";
import { FlatList, Text, View, ActivityIndicator } from "react-native";

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading]   = useState(true);

  useEffect(() => {
    fetch("/api/products")
      .then(r => r.json())
      .then(data => { setProducts(data); setLoading(false); });
  }, []);

  if (loading) return <ActivityIndicator />;

  return (
    <FlatList
      data={products}
      keyExtractor={p => p.id}
      renderItem={({ item }) => (
        <View style={{ padding: 12 }}>
          <Text>{item.name} — ${item.price}</Text>
        </View>
      )}
    />
  );
}
Mechanics

Key Features

The New Architecture (Fabric + TurboModules + JSI)
  • JSI replaces the old async bridge — JS can call native synchronously when needed.
  • Fabric is the new renderer — concurrent React on native UI threads.
  • TurboModules are lazily loaded native modules — faster startup.
  • Hermes is Meta's optimized JS engine, default since 0.70.
Expo & the Managed Workflow

Expo is the default way to start a React Native app today — managed builds (EAS Build), OTA updates (EAS Update), file-based routing (Expo Router), config plugins, and a huge SDK of native APIs without ejecting.

Navigation

React Navigation is the de-facto router — stack, tabs, drawer, modal navigators with native gestures and animations. Expo Router layers file-based routing on top.

Ecosystem
LibraryPurpose
NativeWind / Tamagui / RestyleStyling systems (Tailwind, design-system).
Reanimated 360-FPS animations on the UI thread.
React Native Skia2D graphics with the same Skia engine Flutter uses.
TanStack Query / Zustand / ReduxSame data & state libs as React web.
RevenueCat / Stripe / SentryFirst-class native SDKs.
Trade-offs

Strengths & Weaknesses

Strengths
  • Web/React skills transfer directly.
  • Truly native widgets (not custom-rendered).
  • Largest cross-platform community by far.
  • Expo + EAS handles builds, signing, and OTA updates for you.
Weaknesses
  • Native modules add complexity when you "eject" managed Expo.
  • Bridging native APIs requires Swift / Kotlin knowledge.
  • Performance ceiling lower than fully native for heavy graphics / games.
  • Version upgrades historically painful (less so with Expo).
Where It Shines

Sweet Spots

Web Teams Going Mobile

Reuse React skills, JS tooling, and even some code via React Native Web.

Content & Social Apps

Discord, Instagram, Bluesky — chat, feeds, media-heavy UX.

MVPs & Startups

One team ships iOS + Android + web in parallel.

Apps with Frequent Updates

EAS Update / CodePush ship JS-only fixes without app store review.

Continue

Other Mobile Frameworks

SwiftUIJetpack ComposeFlutter.NET MAUIKotlin MultiplatformIonic ↑ Back to Client Side