Left-to-right animation on Android with react-native-navigation when pushing new screen to stack

user_4083279 0
Viewed 4155

On Android with react-native-navigation, when pushing a new screen to the stack, I’d like the transition animation to be from left-to-right (or vice-versa, for RTL layout) In iOS it‘s the default, where as on Android – it seems to be shown with cross-dissolve animation. how can I achieve the horizontal animation as in iOS?

react-native-navigation react-native android
3 Answers

Here is an example stack navigator for you:

import { createStackNavigator, CardStyleInterpolators } from "@react-navigation/stack";

class CompaniesIndex extends React.Component<
  ICompaniesIndexProps,
  ICompaniesIndexState
  > {
  render() {
    return (
      <CompanyStack.Navigator
        mode="modal"
        screenOptions={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
        }}
        initialRouteName="AllCompanies">
        <CompanyStack.Screen
          options={{
            title: "Firma Listesi",
            header: (props) => <Header {...props} />,
          }}
          name="AllCompanies"
          component={CompaniesAll}
        />
        <CompanyStack.Screen
          options={{
            title: "Yeni Firma",
            header: (props) => <Header {...props} />,
          }}
          name="NewCompany"
          component={CompanyNew}
        />
        <CompanyStack.Screen
          options={{
            title: "Firma Detayı",
            header: (props) => <Header {...props} />,
          }}
          name="CompanyDetails"
          component={CompanyDetails}
        />
      </CompanyStack.Navigator>
    );
  }
}

You can achieve that with adding screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS}} in your stack navigator.

user_140553900

For react-navigation@6.0.1, use animation: "slide_from_right" in screenOptions.

 <Stack.Navigator
  screenOptions={{
    headerShown: false,
    animation: "slide_from_right",
  }}
user_76165130

if you use native-stack (@react-navigation/native-stack or react-native-screens/native-stack), just input 'stackAnimation' option in screenOptions of your Navigator!

import { createNativeStackNavigator } from 'react-native-screens/native-stack';

const Stack = createNativeStackNavigator();
<Stack.Navigator screenOptions={{ headerShown: false, stackAnimation: 'slide_from_right' }}>
  <Stack.Screen name="First" component={FirstScreen} />
  <Stack.Screen name="Second" component={SecondScreen} />
</Stack.Navigator>
user_138885830
Related