React Native Navigation in 2026: Expo Router v3, Deep Links, and Production Patterns

React Native Navigation in 2026: Expo Router v3, Deep Links, and Production Patterns

Navigation is where mobile apps live or die. A sluggish transition, a broken deep link, or a confusing back-stack ruins otherwise excellent UX. In 2026, the React Native ecosystem has largely converged on two options: Expo Router v3 (file-based, URL-first) for Expo-managed apps, and React Navigation v7 (imperative, highly configurable) for bare and brownfield projects.

This post covers both — when to use each, how to structure production navigation, implement deep links correctly, and handle the edge cases that trip up most teams.

---

File-Based vs. Imperative Navigation

Decision rule: New Expo app? Use Expo Router. Custom native modules or brownfield integration? Use React Navigation.

---

Expo Router v3 Setup

Project Structure

app/
  _layout.tsx          ← Root layout (providers, auth gate)
  index.tsx            ← / (home tab or redirect)
  (tabs)/
    _layout.tsx        ← Tab bar definition
    home.tsx           ← /home
    explore.tsx        ← /explore
    profile.tsx        ← /profile
  (auth)/
    _layout.tsx        ← Auth stack (no tab bar)
    login.tsx          ← /login
    signup.tsx         ← /signup
  orders/
    index.tsx          ← /orders
    [id].tsx           ← /orders/:id
    [id]/
      tracking.tsx     ← /orders/:id/tracking
  +not-found.tsx       ← 404 screen

Root Layout with Auth Gate

// app/_layout.tsx
import { Stack } from 'expo-router';
import { useEffect } from 'react';
import { useRouter, useSegments } from 'expo-router';
import { useAuthStore } from '@/stores/auth';

function AuthGate({ children }: { children: React.ReactNode }) {
  const { user, isLoading } = useAuthStore();
  const segments = useSegments();
  const router = useRouter();

  useEffect(() => {
    if (isLoading) return;

    const inAuthGroup = segments[0] === '(auth)';

    if (!user && !inAuthGroup) {
      // Redirect unauthenticated users to login
      router.replace('/(auth)/login');
    } else if (user && inAuthGroup) {
      // Redirect authenticated users away from auth screens
      router.replace('/(tabs)/home');
    }
  }, [user, isLoading, segments]);

  return <>{children}</>;
}

export default function RootLayout() {
  return (
    <AuthGate>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(auth)" />
        <Stack.Screen
          name="orders/[id]"
          options={{
            presentation: 'modal',
            headerShown: true,
            title: 'Order Details',
          }}
        />
      </Stack>
    </AuthGate>
  );
}

Tab Navigator with Badges

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useCartStore } from '@/stores/cart';

export default function TabLayout() {
  const cartCount = useCartStore((s) => s.items.length);

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#2563EB',
        tabBarInactiveTintColor: '#6B7280',
        tabBarStyle: { borderTopWidth: 1, borderTopColor: '#E5E7EB' },
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home-outline" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search-outline" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="cart"
        options={{
          title: 'Cart',
          tabBarBadge: cartCount > 0 ? cartCount : undefined,
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="bag-outline" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person-outline" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

Type-Safe Navigation with Expo Router

// lib/navigation.ts — typed route helpers
import { router } from 'expo-router';

// Type-safe push functions
export const navigate = {
  toOrder: (id: string) => router.push(`/orders/${id}`),
  toOrderTracking: (id: string) => router.push(`/orders/${id}/tracking`),
  toProfile: () => router.push('/(tabs)/profile'),
  toLogin: () => router.replace('/(auth)/login'),
  back: () => router.back(),
};

// In a screen:
import { navigate } from '@/lib/navigation';

function OrderCard({ order }: { order: Order }) {
  return (
    <Pressable onPress={() => navigate.toOrder(order.id)}>
      <Text>{order.id}</Text>
    </Pressable>
  );
}

---

Deep Links: URL Schemes and Universal Links

Deep links come in two flavors: custom URL schemes (myapp://orders/123) and universal links (https://myapp.com/orders/123). Universal links are strongly preferred — they work when the app isn't installed, they're secure (Apple/Google verify domain ownership), and they don't conflict with other apps.

Expo Router: Zero-Config Deep Links

With Expo Router, every route is automatically a deep link. You only need to configure the scheme in app.json:

// app.json
{
  "expo": {
    "scheme": "myapp",
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "myapp.com",
              "pathPrefix": "/"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

For iOS, add your domain to apple-app-site-association (served at https://myapp.com/.well-known/apple-app-site-association):

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAMID.com.myapp",
        "paths": ["/orders/*", "/profile", "/explore/*"]
      }
    ]
  }
}

Handling Deep Link Parameters

// app/orders/[id].tsx
import { useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
import { fetchOrder } from '@/api/orders';

export default function OrderScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const [order, setOrder] = useState<Order | null>(null);

  useEffect(() => {
    if (id) {
      fetchOrder(id).then(setOrder);
    }
  }, [id]);

  if (!order) return <LoadingSpinner />;
  return <OrderDetail order={order} />;
}

Deep Link Testing

# iOS Simulator
xcrun simctl openurl booted "myapp://orders/order-123"
xcrun simctl openurl booted "https://myapp.com/orders/order-123"

# Android Emulator
adb shell am start -W -a android.intent.action.VIEW \
  -d "myapp://orders/order-123" com.myapp

# Expo Go (development)
npx uri-scheme open myapp://orders/order-123 --ios

---

React Navigation v7: Bare Workflow Patterns

For teams on bare React Native or brownfield apps, React Navigation v7 with the native stack is the right choice.

Typed Navigation with React Navigation

// navigation/types.ts
import { NavigatorScreenParams } from '@react-navigation/native';

export type TabParamList = {
  Home: undefined;
  Explore: undefined;
  Cart: undefined;
  Profile: undefined;
};

export type RootStackParamList = {
  MainTabs: NavigatorScreenParams<TabParamList>;
  OrderDetail: { orderId: string };
  OrderTracking: { orderId: string; trackingNumber: string };
  ImageViewer: { uri: string; title?: string };
};

// Augment the module for global type safety
declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

Stack + Tab Navigator Setup

// navigation/RootNavigator.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import type { RootStackParamList, TabParamList } from './types';

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<TabParamList>();

function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarIcon: ({ focused, color, size }) =>
          tabIcon(route.name, focused, color, size),
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Explore" component={ExploreScreen} />
      <Tab.Screen name="Cart" component={CartScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

export function RootNavigator() {
  const linking = {
    prefixes: ['myapp://', 'https://myapp.com'],
    config: {
      screens: {
        MainTabs: {
          screens: {
            Home: 'home',
            Explore: 'explore',
          },
        },
        OrderDetail: 'orders/:orderId',
        OrderTracking: 'orders/:orderId/tracking',
      },
    },
  };

  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="MainTabs" component={MainTabs} />
        <Stack.Screen
          name="OrderDetail"
          component={OrderDetailScreen}
          options={{
            presentation: 'modal',
            headerShown: true,
            title: 'Order',
          }}
        />
        <Stack.Screen
          name="OrderTracking"
          component={OrderTrackingScreen}
          options={{ headerShown: true }}
        />
        <Stack.Screen
          name="ImageViewer"
          component={ImageViewerScreen}
          options={{ presentation: 'fullScreenModal' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

Modal Patterns and Sheet Navigation

Bottom sheet navigation is increasingly common in e-commerce and fintech apps. Use @gorhom/bottom-sheet integrated with your navigator:

// components/ProductSheet.tsx
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
import { useCallback, useRef } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface ProductSheetProps {
  product: Product;
  onAddToCart: (product: Product, quantity: number) => void;
  onClose: () => void;
}

export function ProductSheet({ product, onAddToCart, onClose }: ProductSheetProps) {
  const sheetRef = useRef<BottomSheet>(null);
  const insets = useSafeAreaInsets();
  const snapPoints = ['50%', '90%'];

  const handleSheetChange = useCallback((index: number) => {
    if (index === -1) onClose();
  }, [onClose]);

  return (
    <BottomSheet
      ref={sheetRef}
      snapPoints={snapPoints}
      enablePanDownToClose
      onChange={handleSheetChange}
      bottomInset={insets.bottom}
    >
      <BottomSheetScrollView contentContainerStyle={{ padding: 16 }}>
        <ProductDetail product={product} onAddToCart={onAddToCart} />
      </BottomSheetScrollView>
    </BottomSheet>
  );
}

---

Navigation Performance: What Actually Matters

1. Lazy Load Tab Screens

// React Navigation — lazy load all tab screens
<Tab.Navigator screenOptions={{ lazy: true }}>
  ...
</Tab.Navigator>

// Expo Router — screens are lazy by default

2. Avoid Heavy Work in Navigation Handlers

// ❌ Bad — doing async work inline
onPress={() => {
  const order = await fetchOrder(id); // blocks navigation
  navigation.navigate('OrderDetail', { order });
}}

// ✅ Good — navigate immediately, fetch on screen mount
onPress={() => navigation.navigate('OrderDetail', { orderId: id })}
// Then fetch in OrderDetailScreen's useEffect

3. Memoize Screen Components

// Prevent re-renders on parent state changes
const HomeScreen = React.memo(function HomeScreen() {
  return <HomeContent />;
});

4. Use InteractionManager for Expensive Post-Navigation Work

import { InteractionManager } from 'react-native';

useEffect(() => {
  const task = InteractionManager.runAfterInteractions(() => {
    // Only runs after navigation animation completes
    fetchHeavyData();
  });
  return () => task.cancel();
}, []);

---

Cost and Timeline Estimates

Costs include design, development, QA. Viprasol team based in India; rates 40–60% lower than US/UK agencies.

---

Working With Viprasol

Our mobile team builds production React Native apps across fintech, e-commerce, and logistics — with deep links, custom navigators, and App Store-ready submissions from day one.

What we deliver:

• File-based Expo Router apps with full deep link support
• Type-safe navigation without runtime errors
• Bottom sheet patterns, custom transitions, gesture navigation
• CI/CD with Fastlane and EAS Build for automated App Store submissions

→ Talk to us about your mobile app → Mobile development services

---

See Also

• Mobile CI/CD with Fastlane and GitHub Actions
• Mobile App Performance Optimization
• React Server Components vs. Client Components
• TypeScript Patterns for Production Code