question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation duration between pages

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jsp3536commented, May 23, 2022

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

0reactions
mtushar53commented, Dec 19, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

animation-duration - CSS: Cascading Style Sheets | MDN
Setting animation duration​​ This animation has an animation-duration of 0.7 seconds.
Read more >
Executing UX Animations: Duration and Motion Characteristics
Animation Duration ​​ In general, the duration of most animations should be in the range of 100–500 ms, depending on complexity and on...
Read more >
How to add the delay between the pages?
- Click "Pages" on the right-hand side of the artboard and then click "New page" to add a page/slide; - open page 2...
Read more >
Optimal duration for animating transitions - UX Stack Exchange
You have a window between 100ms to 1 second for transitions. At 100ms, animations happen so fast as to appear instantaneous, defeating their ......
Read more >
CSS animation-duration Property - W3Schools
The animation-duration property defines how long an animation should take to complete one cycle. Default value: 0. Inherited: no. Animatable: no. Read about ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found