How can I implement lazy loading in React Navigation v5 with TypeScript?

How can I implement lazy loading in React Navigation v5 with TypeScript?

To implement lazy loading in React Navigation v5 with TypeScript, you can use React's React.lazy and Suspense. This allows you to load screens only when they are needed.

Can you show me a code example?

Sure! Here's a simple example:

import React, { Suspense, lazy } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeScreen = lazy(() => import('./HomeScreen'));
const DetailsScreen = lazy(() => import('./DetailsScreen'));

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Suspense fallback={<Text>Loading...</Text>}>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      </Suspense>
    </NavigationContainer>
  );
};

This code uses React.lazy to load the HomeScreen and DetailsScreen components lazily.

What if I want to add error handling for the lazy loading?

You can add error boundaries to handle errors during lazy loading. Here's an example:

import React, { Component, Suspense, lazy } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error loading component:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <Text>Something went wrong.</Text>;
    }
    return this.props.children;
  }
}

const App = () => {
  return (
    <NavigationContainer>
      <ErrorBoundary>
        <Suspense fallback={<Text>Loading...</Text>}>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </Stack.Navigator>
        </Suspense>
      </ErrorBoundary>
    </NavigationContainer>
  );
};

This way, if there's an error while loading a component, the ErrorBoundary will catch it.