Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

switching between screen, the transition is slow #10353

Open
2 of 11 tasks
dotku opened this issue Feb 16, 2022 · 24 comments
Open
2 of 11 tasks

switching between screen, the transition is slow #10353

dotku opened this issue Feb 16, 2022 · 24 comments
Labels
bug package:native-stack platform:ios repro provided

Comments

@dotku
Copy link

dotku commented Feb 16, 2022 •
edited

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
  • 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
  • @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
@dotku dotku added the bug label Feb 16, 2022
@github-actions
Copy link

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

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

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

@github-actions
Copy link

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

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs
  • @react-navigation/stack

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:

  • @react-navigation/native (found: 6.0.6, latest: 6.0.8)

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

@github-actions
Copy link

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

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs
  • @react-navigation/stack

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

@zoobibackups
Copy link

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
  • 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
  • @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
Copy link

aximut commented Apr 9, 2022

Maybe also check if my approach here helps

@vladyslavNiemtsev
Copy link

Could be related to this:
software-mansion/react-native-screens#1453
#10591

@Jamal-ReachFirst
Copy link

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
  • 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
  • @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
Copy link

2023 up

@heekyu-pu
Copy link

heekyu-pu commented Feb 9, 2023 •
edited

Same Problem with RN 0.70.6

@hotaryuzaki
Copy link

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

@GuidoGagliardini
Copy link

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
Copy link

neon010 commented Apr 8, 2023

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
Copy link

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

@arasrezaei
Copy link

same here

@robdubparker
Copy link

robdubparker commented Jun 2, 2023 •
edited

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
Copy link

exist workaround?
this is very slow.
RN 70.6

@FrancoTanzarellaEviivo
Copy link

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
Copy link

Pipi144 commented Sep 15, 2023

I also encounter this in react native 0.72.4

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

@skizzo
Copy link

skizzo commented Sep 15, 2023

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
Copy link

n-ii-ma commented Jan 24, 2024

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

@GoldAndLink
Copy link

I got a significant improvement updating expo-router to 2.0.9
expo/router#834

@JeroenDerks
Copy link

JeroenDerks commented Mar 1, 2024 •
edited

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
Copy link

sinonodd commented Apr 4, 2024

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug package:native-stack platform:ios repro provided
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests