Поп-анимация в React Navigation

Question

• 1000 *

Как я могу изменить анимацию для всплывающего окна, чтобы анимация перехода была обратной всплывающей ??

Я пытаюсь использовать его в стеке, который содержит верхнюю панель, но не работает:

<Stack.Navigator
  screenOptions={{
    ...TransitionPresets.SlideFromRightIOS,
  }}
  mode="card"
  headerMode="screen"
>
  <Stack.Screen
    name="HOME"
    component={HomeStack}
    options={{
      ...TransitionPresets.SlideFromRightIOS,
    }}
  />
</Stack.Navigator>

const Tab = createMaterialTopTabNavigator();

export default function HomeStack({
    navigation,
    route,
}: {
    navigation: StackNavigationProp<any>;
    route: any;
}) {
    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,
        });
    }, [navigation, route]);
    useFocusEffect(
        React.useCallback(() => {
            const onBackPress = () => {
                BackHandler.exitApp();
                return true;
            };

            BackHandler.addEventListener("hardwareBackPress", onBackPress);

            return () => BackHandler.removeEventListener("hardwareBackPress", onBackPress);
        }, []),
    );
    return (
        <Tab.Navigator tabBar={props => <CentralTab {...props} />} tabBarPosition="bottom" lazy>
            <Tab.Screen name="GROUPS" component={GroupsScreen} />
            <Tab.Screen name="FEED" component={FeedStack} />
            <Tab.Screen name="NEW" component={NewStack} />
        </Tab.Navigator>
    );
}

Answer 1

Способ добиться анимации справа налево при навигации (и слева направо при возврате) использует TransitionPresets.SlideFromRightIOS:

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

<NavigationContainer>
  <MainStack.Navigator>
    <MainStack.Screen name="ScreenA" component={ScreenA} />
    <MainStack.Screen
      name="ScreenB"
      component={ScreenB}
      options={{ ...TransitionPresets.SlideFromRightIOS }}
    />
  </MainStack.Navigator>
</NavigationContainer>

Вы можете увидеть, как он работает в этой закуске . Работает как на iOS, так и на Android.