How can I customize navigators in React Navigation?

How can I customize navigators in React Navigation?

You can customize navigators in React Navigation by using options like screenOptions, headerStyle, and more.

Can you give me an example of customizing the header?

Sure! You can customize the header by passing a headerStyle object to your Stack.Navigator like this:

<Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: 'blue' } }}>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

What about adding custom buttons to the header?

You can add custom buttons by using the headerRight option. For example:

<Stack.Screen name="Home" component={HomeScreen} options={{
  headerRight: () => (
    <Button onPress={() => alert('Button pressed!')} title="Info" />
  ),
}} />

Is it possible to change the transition animations?

Yes, you can customize transition animations using the animationEnabled option in your navigator's screenOptions.