react native - How to disable push animation when using Expo router replace()? - Stack Overflow

I am using Expo Router for my React Native application. I am trying to navigate to a page within my app without any animations; in React Navigation, there is an option to set the animation, but seems like expo router hides this parameter. Is there a way to do this?

router.replace({
  pathname: '/my-link',
  params: {},
});

I am using Expo Router for my React Native application. I am trying to navigate to a page within my app without any animations; in React Navigation, there is an option to set the animation, but seems like expo router hides this parameter. Is there a way to do this?

router.replace({
  pathname: '/my-link',
  params: {},
});

• react-native
• expo
• react-navigation
• expo-router

Share Improve this question Follow asked Jan 31 at 19:48 ZorayrZorayr 25k88 gold badges146146 silver badges138138 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

If you're using expo-router, animation should be defined in screenOptions, for any specific screen try the following,

<Stack.Screen
  name="details"
  options={{ animation: "none" }}
/>

On your _layout.tsx file you can have something like this

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        animation: "none"
      }}
    >
      <Stack.Screen name="screen1" />
      <Stack.Screen name="screen2" />
    </Stack>
  );
}

You can set animation to none in the options object of the screen:

<Stack>
  <Stack.Screen name="screen" options={{ animation: 'none' }} />
</Stack>