CODEWITHSUNDEEP
react-nativereact-navigation
BeHappy
BeHappy

Reputation: 3998

Pop animation in React navigation

I'm using cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS for animation transition, the problem is animation for pop must be reverse of pushing but not the animation for push and pop is the same and screen transition is in the same way.

How can I change animation for pop so, transition animation is reverse of poping??

I try using it in stack that contains topbar but not works:

<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>
    );
}

Upvotes: 0

Views: 2515

Answers (1)

Rafael Tavares
Rafael Tavares

Reputation: 6471

A way to achieve a Right to Left animation on navigation (and Left to Right when going back) is using the 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>

You can see it working in this Snack. Works both on iOS and Android.

Upvotes: 1

Related Questions