Animation duration between pages

[alabsi91]

Description

• After upgrading Expo from 44 to 45 the transition speed between the pages seems to be fixed.
• Before upgrading Expo, the transition speed between pages follows the OS behavior.
• I tuned off the animations completely on Android and the transition speed is still the same.

Expected behavior

• The animation duration between pages to match the OS animation duration.

Actual behavior

• The animation duration between pages does not change even if the OS animation duration is changed.

Reproduction

• I recreated a new simple project for testing.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import PagesList from './pagesList';
import Page from './page';

const Stack = createNativeStackNavigator();

const Page1 = () => <Page name='First Page' />;
const Page2 = () => <Page name='Second Page' />;
const Page3 = () => <Page name='Third Page' />;

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='PageList'>
        <Stack.Screen name='PageList' component={PagesList} />
        <Stack.Screen name='Page1' component={Page1} />
        <Stack.Screen name='Page2' component={Page2} />
        <Stack.Screen name='Page3' component={Page3} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
react-native	0.68.2
@react-navigation/native	6.0.10
@react-navigation/native-stack	6.6.2
react-native-screens	3.11.1
react-native-safe-area-context	4.2.4
react-native-gesture-handler	2.2.1
react-native-reanimated	2.8.0
expo	45.0.0

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps To Reproduce section.

[jsp3536]

I have noticed the same thing after updating to Expo SDK 45. The page transitions are slower than they were in the previous versions on Android using the Pixel 6

[WoLewicki]

I think it is the same problem as stated here: react-navigation/react-navigation#10591. Does the answer provided there solve your issue?

[alabsi91]

I think it is the same problem as stated here: react-navigation/react-navigation#10591. Does the answer provided there solve your issue?

I changed the duration value in all files then runed expo start --clear. nothing changed the animation still the same.

[WoLewicki]

Are you using managed workflow? If you use Expo managed workflow, the native code is included in the client and cannot be changed unfortunately.

[alabsi91]

I couldn't find a solution so I switched to @react-navigation/stack .

[vladyslavNiemtsev]

I can confirm that it's also appears for me.

I'm not in Expo, just React Native

[vladyslavNiemtsev]

@WoLewicki I tried the solution that you mentioned in discussion above.

For me the problem was the screen scaling on transition, the default animation for android.
After I removed scaling - things comes smother but the only one issue is still here.

The slow navigation between screens.
I mean when I press PressableView with callback that run navigation.navigate - I have some delay before navigation.

[WoLewicki]

@vladyslavNiemtsev can you reproduce it in all screens or just the ones with much content in them? Maybe the callback is dispatched after some time? I cannot think of any changes regarding the start of transition from the library's point of view.

[mohammad-goldast]

Same issue with React-Native 0.70.6 and React-Navigation 6.
Only on Android.

[mtushar53]

I am facing the same issue with React-Native 0.70.5 and React Navigation 6. I am using the Nested navigator of Drawer, Tab, and Stack navigation. When I remove the Drawer navigator and nested only Tab and Stack navigator, then the problem is not happening.

I think there has some issue with the Nested Drawer navigator. Waiting for the fixing.

[iraybi]

Anyone found the slow transition solution yet?

[alabsi91]

It was fixed a while ago. Instead of following the OS animation duration, it is now fixed at 350ms, I think.

[hariskhalid366]

you should change the animation to ios and then set the duration to 150 it will work
<Stack.Navigator
screenOptions={{
statusBarStyle: colorScheme === 'dark' ? 'light' : 'dark',
navigationBarColor: Colors[colorScheme ?? 'light'].navBar,
statusBarColor: Colors[colorScheme ?? 'light'].statusBar,
animation: 'ios',
animationDuration: 150,
orientation: 'portrait',
}}>

</Stack.Navigator>