Otto

Posted on Mar 26

React Native with Expo in 2026 — Build Your First Mobile App This Weekend

#reactnative #expo #javascript #mobile

Why React Native with Expo Is Dominating Mobile in 2026

Building a mobile app used to mean learning two codebases — Swift for iOS, Kotlin for Android. Today, React Native with Expo lets you ship a production-quality app for both platforms in a single weekend, with JavaScript you already know.

Here is the honest guide to getting started in 2026.

What Is Expo and Why It Changed Everything

Expo is a framework built on top of React Native that eliminates 90% of the native tooling pain:

No Xcode required to build an iOS app (on most workflows)
OTA updates — push bug fixes without going through the App Store review
Expo Router — file-based routing that mirrors Next.js, landing in Expo SDK 52+
EAS Build — cloud build service, free tier available

The 2026 stack is Expo SDK 52, React Native 0.75, and the New Architecture (JSI) enabled by default.

Step 1: Bootstrap in 3 Minutes

npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo start

Scan the QR code with the Expo Go app on your phone. That is it — live reload on your physical device in under 5 minutes.

Step 2: File-Based Routing with Expo Router

The biggest productivity unlock of 2026. Structure your screens like pages:

app/
  (tabs)/
    index.tsx      # Tab 1 — Home
    explore.tsx    # Tab 2 — Explore
  profile/
    [id].tsx       # Dynamic route: /profile/123
  _layout.tsx      # Root layout with navigation config

No more manually registering stacks. It just works.

// app/(tabs)/index.tsx
import { View, Text, StyleSheet } from "react-native";

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome 👋</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  title: { fontSize: 24, fontWeight: "bold" },
});

Step 3: Data Fetching with TanStack Query

The community has standardized on TanStack Query (React Query) for server state:

npx expo install @tanstack/react-query

import { useQuery } from "@tanstack/react-query";

function ProductList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["products"],
    queryFn: () => fetch("https://api.yourapp.com/products").then(r => r.json()),
  });

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error loading data</Text>;

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <ProductCard product={item} />}
    />
  );
}

Step 4: State Management — Keep It Simple

For local/global UI state, Zustand has won in the React Native world:

npm install zustand

import { create } from "zustand";

interface CartStore {
  items: string[];
  addItem: (id: string) => void;
  removeItem: (id: string) => void;
}

const useCartStore = create<CartStore>((set) => ({
  items: [],
  addItem: (id) => set((state) => ({ items: [...state.items, id] })),
  removeItem: (id) => set((state) => ({ items: state.items.filter(i => i !== id) })),
}));

No boilerplate, no reducers, no context hell.

Step 5: Authentication with Clerk or Supabase

Clerk now has first-class Expo support:

npx expo install @clerk/clerk-expo expo-secure-store

// app/_layout.tsx
import { ClerkProvider } from "@clerk/clerk-expo";
import * as SecureStore from "expo-secure-store";

const tokenCache = {
  async getToken(key: string) { return SecureStore.getItemAsync(key); },
  async saveToken(key: string, value: string) { return SecureStore.setItemAsync(key, value); },
};

export default function RootLayout() {
  return (
    <ClerkProvider 
      publishableKey={process.env.EXPO_PUBLIC_CLERK_KEY!} 
      tokenCache={tokenCache}
    >
      <Slot />
    </ClerkProvider>
  );
}

Sign-in with Google, Apple, and Email — all in 30 lines.

Step 6: Over-the-Air Updates with EAS Update

The killer feature for indie developers. Push a fix without App Store review:

npx eas-cli update --message "Fix crash on profile screen" --channel production

Your users get the update silently on next app launch. For bug fixes and content changes, this is a game changer.

Common Mistakes to Avoid in 2026

Using expo-av for video — use expo-video instead (new in SDK 52, much better performance)
Ignoring the New Architecture — JSI + Fabric is default now; avoid old bridge-only libraries
Not testing on a real device early — the simulator lies about scroll performance
Skipping TypeScript — strict: true will save you hours of debugging
Building locally instead of with EAS — EAS Build handles certificates, signing, and provisioning profiles automatically

The Honest State of React Native in 2026

React Native with Expo is genuinely production-ready in 2026. Apps like Shopify, Discord, and Coinbase ship with it. The New Architecture (enabled by default in SDK 52) closes the last performance gap with native code for 95% of use cases.

Is it perfect? No. Complex animations and camera-heavy apps still sometimes need a native module. But for the vast majority of mobile apps — CRUD apps, e-commerce, dashboards, productivity tools — Expo + React Native delivers native performance with JavaScript speed of development.

Quick Start Checklist

[ ] npx create-expo-app@latest my-app --template blank-typescript
[ ] Install Expo Go on your phone
[ ] Set up Expo Router for navigation
[ ] Add TanStack Query for data fetching
[ ] Add Zustand for state management
[ ] Set up EAS for builds and OTA updates
[ ] Test on physical device from day 1

Build fast, ship faster. The mobile-first era is not ending — it is accelerating.

Want to go further? Check out the Freelancer OS Notion Template — the productivity system built for solo developers and indie hackers.

DEV Community