How can I implement animations in React Navigation?

How can I implement animations in React Navigation?

You can use the react-native-reanimated library along with React Navigation to create smooth animations. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

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

const Stack = createStackNavigator();

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

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

This sets up a basic stack navigator. You can customize transitions using screenOptions.

How do I customize the transition animations?

You can customize transitions by using the screenOptions prop in your navigator. For example:

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    animationEnabled: true,
    cardStyleInterpolator: ({ current, layouts }) => {
      return {
        cardStyle: {
          transform: [{ translateX: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [layouts.screen.width, 0],
          }) }],
        },
      };
    },
  }}
>
</Stack.Navigator>