How can I create a custom navigator in React Navigation v6?

How can I create a custom navigator in React Navigation v6?

To create a custom navigator in React Navigation v6, you can extend the existing navigators or create your own. Start by defining your custom navigator component and use the createNavigator function.

What are the main components I need to set up?

You'll need to set up a few key components: a navigation container, your custom navigator, and the screens you want to navigate between.

Can you give me a code example?

Sure! Here's a simple example:

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

const Stack = createStackNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

What if I want to add custom transitions?

You can customize transitions by using the screenOptions prop in your navigator. You can define animations for screen transitions.