Lazy Load Screens in React Navigation to Shrink Bundle Size

Insight

Most developers assume every screen in a React Native app is bundled and parsed at launch, which inflates the initial JavaScript payload. In reality, you can defer the import of heavy or rarely visited screens until the user navigates to them. Combining React.lazy with React Navigation’s lazy: true option lets the engine fetch the module only when needed, reducing start‑up time and memory usage without sacrificing type safety.

Example

// navigation.tsx
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Suspense} from 'react';

const Stack = createNativeStackNavigator();

const SettingsScreen = React.lazy(() => import('./screens/SettingsScreen'));

export default function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{lazy: true}}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Settings">
        {() => (
          <Suspense fallback={null}>
            <SettingsScreen />
          </Suspense>
        )}
      </Stack.Screen>
    </Stack.Navigator>
  );
}

Takeaway

Enable lazy loading for any screen that isn’t part of the critical user flow. The combination of React.lazy, Suspense, and the navigator’s lazy flag can shave seconds off your app’s cold start and keep the bundle lean.