2

I'd like to have screen animations from right to left in React Native. I checked a lot in the internet but most of the examples are old and they are using StackNavigator differently and the configurations are also different. I think they are using an old version of React Navigation. I use version 6. I also tried as explained here in docs https://reactnavigation.org/docs/stack-navigator/#animations but it didn't worked in any way.

Could you please help? Here is my code:

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator(); 

function MainScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="To Read" component={ToReadScreen} />
      <Tab.Screen name="Have Read" component={HaveReadScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ReadX"
          component={MainScreen}
        />
        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

So I am trying to configure the screen animation between main screen and setting screen.

Any help would be appreaciated. Thanks.

Feyyaz
  • 561
  • 1
  • 5
  • 12

2 Answers2

1
 <Stack.Navigator initialRouteName='LoginPage' screenOptions={{ headerShown: false, animation: 'slide_from_right' }}>

you have to use animation props in Stack.Navigator in screenOptions

Hitesh Patre
  • 29
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 29 '22 at 14:56
0

Assuming this is a recent react-navigation v6 version, use the animationTypeForReplace option:

<Stack.Screen 
    name="Settings"
    component={SettingsScreen}
    options={{
        animationTypeForReplace: 'pop',
    }}
 />

https://reactnavigation.org/docs/stack-navigator/#animationtypeforreplace

Baast
  • 1
  • 2
  • Thank you for the answer but it doesn't work. Wether I put 'pop' or 'push' I don't see any difference. I actually want to have animation from right to left. – Feyyaz Nov 28 '21 at 16:10