How can I implement advanced navigation in React Native using TypeScript?

How can I implement advanced navigation in React Native using TypeScript?

You can use React Navigation v5 with TypeScript by defining your navigators and screens with type safety. Would you like a code example?

Yes, please provide a code example for a stack navigator.

Sure! Here's a basic example:

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

How do I pass parameters between screens?

You can pass parameters using the navigation.navigate method. For example:

navigation.navigate('Details', { itemId: 42 });

Then, in the Details screen, you can access it via route.params.itemId.

What about using TypeScript interfaces for the route parameters?

You can define an interface for your route parameters like this:

interface DetailsParams {
  itemId: number;
}

function DetailsScreen({ route }: { route: { params: DetailsParams } }) {
  const { itemId } = route.params;
  // Use itemId here
}