How can I handle errors in React Navigation v5 with TypeScript?

How can I handle errors in React Navigation v5 with TypeScript?

You can handle errors in React Navigation v5 by using try-catch blocks in your navigation logic and defining custom error screens.

Can you show me an example of using try-catch in a navigation function?

Sure! Here's a simple example:

const navigateToScreen = (screen: string) => {
  try {
    navigation.navigate(screen);
  } catch (error) {
    console.error('Navigation error:', error);
    navigation.navigate('ErrorScreen');
  }
};

What about handling errors in async functions?

For async functions, you can also use try-catch. Just ensure your async function is awaited properly:

const fetchData = async () => {
  try {
    const data = await api.getData();
    navigation.navigate('DataScreen', { data });
  } catch (error) {
    console.error('Fetch error:', error);
    navigation.navigate('ErrorScreen');
  }
};

How do I create a custom error screen?

You can create a custom error screen by defining a new component and adding it to your navigator. For example:

const ErrorScreen = () => {
  return <Text>Something went wrong!</Text>;
};