search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.33k stars 4.98k forks source link

switching between screen, the transition is slow #10353

Open dotku opened 2 years ago

dotku commented 2 years ago

Current behavior

I have a simple project here: https://github.com/dotku/dk-i18n-trading-calculator feel that switching between screen, the transition is slow. It might take 1 sec to switch between different screen. Any performance tune up hint? or performance tracking tool to help the issue?

Could related to the issue: https://github.com/react-navigation/react-navigation/issues/7756

Expected behavior

should switching screen under 300 msec

Reproduction

https://github.com/dotku/dk-i18n-trading-calculator

Platform

Packages

Environment

package version
@react-navigation/native 6.0.8
@react-navigation/bottom-tabs -
@react-navigation/drawer -
@react-navigation/material-bottom-tabs -
@react-navigation/material-top-tabs -
@react-navigation/stack -
@react-navigation/native-stack 6.5.0
react-native-safe-area-context 3.3.2
react-native-screens 3.11.1
react-native-gesture-handler 2.2.0
react-native-reanimated -
react-native-tab-view -
react-native-pager-view -
react-native 0.64.3
expo 5.1.3
node 16.6.2
npm or yarn yarn
github-actions[bot] commented 2 years ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

github-actions[bot] commented 2 years ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] commented 2 years ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

zoobibackups commented 2 years ago

Current behavior

I have a simple project here: https://github.com/dotku/dk-i18n-trading-calculator feel that switching between screen, the transition is slow. It might take 1 sec to switch between different screen. Any performance tune up hint? or performance tracking tool to help the issue?

Could related to the issue: #7756

Expected behavior

should switching screen under 300 msec

Reproduction

https://github.com/dotku/dk-i18n-trading-calculator

Platform

  • [ ] Android
  • [x] iOS
  • [ ] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [ ] @react-navigation/bottom-tabs
  • [ ] @react-navigation/drawer
  • [ ] @react-navigation/material-bottom-tabs
  • [ ] @react-navigation/material-top-tabs
  • [ ] @react-navigation/stack
  • [x] @react-navigation/native-stack

Environment

  • [] I've removed the packages that I don't use

package version @react-navigation/native 6.0.8 @react-navigation/bottom-tabs - @react-navigation/drawer - @react-navigation/material-bottom-tabs - @react-navigation/material-top-tabs - @react-navigation/stack - @react-navigation/native-stack 6.5.0 react-native-safe-area-context 3.3.2 react-native-screens 3.11.1 react-native-gesture-handler 2.2.0 react-native-reanimated - react-native-tab-view - react-native-pager-view - react-native 0.64.3 expo 5.1.3 node 16.6.2 npm or yarn yarn

I am using material top tab, it takes longer than 1sec to switch b/w tabs

aximut commented 2 years ago

Maybe also check if my approach here helps

vladyslavNiemtsev commented 2 years ago

Could be related to this: https://github.com/software-mansion/react-native-screens/issues/1453 https://github.com/react-navigation/react-navigation/discussions/10591

Jamal-ReachFirst commented 1 year ago

Current behavior

I have a simple project here: https://github.com/dotku/dk-i18n-trading-calculator feel that switching between screen, the transition is slow. It might take 1 sec to switch between different screen. Any performance tune up hint? or performance tracking tool to help the issue?

Could related to the issue: #7756

Expected behavior

should switching screen under 300 msec

Reproduction

https://github.com/dotku/dk-i18n-trading-calculator

Platform

  • [ ] Android
  • [x] iOS
  • [ ] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [ ] @react-navigation/bottom-tabs
  • [ ] @react-navigation/drawer
  • [ ] @react-navigation/material-bottom-tabs
  • [ ] @react-navigation/material-top-tabs
  • [ ] @react-navigation/stack
  • [x] @react-navigation/native-stack

Environment

  • [] I've removed the packages that I don't use

package version @react-navigation/native 6.0.8 @react-navigation/bottom-tabs - @react-navigation/drawer - @react-navigation/material-bottom-tabs - @react-navigation/material-top-tabs - @react-navigation/stack - @react-navigation/native-stack 6.5.0 react-native-safe-area-context 3.3.2 react-native-screens 3.11.1 react-native-gesture-handler 2.2.0 react-native-reanimated - react-native-tab-view - react-native-pager-view - react-native 0.64.3 expo 5.1.3 node 16.6.2 npm or yarn yarn

I am facing the issue when pressing the tabbar (using material top tab), while swipe is faster

thanhloc-17 commented 1 year ago

2023 up

heekyu-pu commented 1 year ago

Same Problem with RN 0.70.6

hotaryuzaki commented 1 year ago

i have same issue, i found that if i have a lot of images the transition in or out will lag

GuidoGagliardini commented 1 year ago

same problem RN 0.70.6 

    "@react-navigation/bottom-tabs": "^6.5.4",
    "@react-navigation/native": "^6.1.3",
    "@react-navigation/stack": "^6.3.12",

Switch the tabs and navigation is very slow.

neon010 commented 1 year ago

I am also facing the same problem . initially i thought it may be happening due to app logic but even after changing my code it persist. below are the version i am using

"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"react": "18.2.0",
"react-native": "0.71.5",
robdubparker commented 1 year ago

This issue seems apparent, even in the snack example within documentation: Try this example on Snack

arasrezaei commented 1 year ago

same here

robdubparker commented 1 year ago

Ok, in my case it looks to be user error. I'm using the ui-kitten library and had one of my components wrapped with <ApplicationProvider> by mistake. Once I removed this from the the component, navigate functionality performed normally, without delay.

GuidoGagliardini commented 1 year ago

exist workaround? this is very slow. RN 70.6

FrancoTanzarellaEviivo commented 11 months ago

Same. It is very slow. After removing all components with just a button to switch screens takes 1 second RN 0.71.11 "@react-navigation/native": "6.1.2", "@react-navigation/native-stack": "6.9.8", @react-navigation/stack": "6.3.11",

Pipi144 commented 8 months ago

I also encounter this in react native 0.72.4

"@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12",

skizzo commented 8 months ago

This library is getting worse and worse. I'm on RN 0.71.7, doing everything by the book (docs) and the frame rate while transitioning between screens on Android is about 4 frames per second.

n-ii-ma commented 4 months ago

I'm also experiencing this issue on Expo Router v2 with fade animation.

GoldAndLink commented 3 months ago

I got a significant improvement updating expo-router to 2.0.9 https://github.com/expo/router/issues/834

JeroenDerks commented 3 months ago

I'm using Expo and the stack navigator. After disabling the animations on android, it looks a lot better for me.

import { Platform } from 'react-native';

<Stack screenOptions={{ animation: Platform.OS === 'android' ? 'none' : 'default' }}>
 ... your stack  
</Stack>
sinonodd commented 1 month ago

I experianced the same issue and then I changed the presentation to 'modal' and it was significantly improved

<Stack.Screen name='someWhere' component={someWhere} options={{ presentation: 'modal' }} />

not a fix but at least there is that 🤏

jacopo-ferroni commented 2 weeks ago

hi guys, I have the exact same problem which seems to go away only by putting screenOptions={{animation: 'none'}} in the Stack.Navigator.

Clearly I want the animations, but for now the only way found to temporarily solve the problem is precisely the one listed previously.

I hope someone finds the solution.