Animation duration between pages
See original GitHub issueDescription
- After upgrading
Expo
from44
to45
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:
- Created a year ago
- Comments:11 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
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.