Lazy‑Load Screens in React Navigation to Shrink Your Bundle

Insight

React Navigation loads every screen component at bundle time, which inflates the initial JavaScript payload. By wrapping infrequently visited screens in React.lazy and rendering them inside a Suspense fallback, you can split those screens into separate chunks. The app only fetches the code when the user navigates there, dramatically reducing start‑up time and memory usage, especially on low‑end devices.

Example

import React, { Suspense } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ActivityIndicator, View } from 'react-native';

const Stack = createNativeStackNavigator();

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

export default function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Settings">
        {() => (
          <Suspense fallback={<View><ActivityIndicator /></View>}> 
            <SettingsScreen />
          </Suspense>
        )}
      </Stack.Screen>
    </Stack.Navigator>
  );
}

Takeaway

Enable screen‑level code‑splitting for any route that isn’t needed immediately. Pair this with enableScreens() from react-native-screens to keep memory footprints low, and you’ll see a noticeable boost in launch performance without sacrificing navigation experience.