Lazy‑load heavy screens in React Navigation to shrink bundle size

Insight

When a React Native app contains a few heavyweight screens—think charts, maps, or rich media—the initial JavaScript bundle can balloon, hurting launch time. React Navigation works nicely with React.lazy and Suspense to defer loading those modules until the user actually navigates to them. This pattern keeps the start‑up bundle lean while still preserving type‑safety and navigation ergonomics.

Example

import { createStackNavigator } from '@react-navigation/stack';
import React, { Suspense } from 'react';
import HomeScreen from './screens/HomeScreen';

// Lazy‑load the heavy screen
const AnalyticsScreen = React.lazy(() => import('./screens/AnalyticsScreen'));

const Stack = createStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name="Analytics"
        // Wrap lazy component in Suspense with a fallback UI
        component={() => (
          <Suspense fallback={null}> {/* you can show a spinner */}
            <AnalyticsScreen />
          </Suspense>
        )}
      />
    </Stack.Navigator>
  );
}

Takeaway

Only import heavy screens on demand: wrap them with React.lazy and Suspense inside your navigator. The result is a noticeably faster cold start and a smaller initial bundle, while the user still gets a seamless navigation experience when the screen is finally needed.