How can I customize navigation in React Navigation v6?

How can I customize navigation in React Navigation v6?

You can customize navigation in React Navigation v6 by using custom navigators, screens, and options. What specific customization are you looking for?

I want to change the header style and add a logo.

You can customize the header by using the screenOptions prop in your navigator. You can set the headerStyle and headerTitle to include your logo.

Can you show me an example of how to do that?

Sure! Here's a simple example:

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: 'blue' },
    headerTitle: () => <Image source={require('./logo.png')} style={{ width: 40, height: 40 }} />,
  }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

That looks great! How do I add a back button?

The back button is automatically added by React Navigation when you navigate to a new screen. You can customize its behavior using the headerLeft option if needed.