How can I implement animations in React Navigation v6?

How can I implement animations in React Navigation v6?

You can use the createStackNavigator and TransitionPresets to add animations. Would you like a code example?

Yes, please provide a code example for a fade transition.

Here's a simple example:

import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

What if I want to customize the animation duration?

You can customize the animation duration by modifying the transitionSpec property in the screen options. Here's how:

<Stack.Navigator
  screenOptions={{
    transitionSpec: {
      open: { animation: 'timing', config: { duration: 500 } },
      close: { animation: 'timing', config: { duration: 500 } },
    },
  }}
>