-
-
Notifications
You must be signed in to change notification settings - Fork 5k
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.
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
react navigation very slow for react-native 0.71.0 #11167
Comments
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? |
Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link, a www.typescriptlang.org/play link or link to a GitHub repo under your username). Can you provide a minimal repro which demonstrates the issue? Please try to keep the repro as small as possible and make sure that we can run it without additional setup. A repro will help us debug the issue. The issue will be closed automatically after a while if you don't provide a repro. |
I had the same problem and it got much faster after v0.71.1. Please upgrade RN to 0.71.1 (#35828) |
It's still slow when using nested navigation, I'm using stack together with tab navigation. |
@ralppppy Can you share the code how you use stack with tab navigation? In DEV mode on Android, when switching tabs, fps drops to about 50-55 fps in my project |
@devoren I've tried the example code in the documentation
The SettingsScreen has a Button that navigates to "Home". The transition itself is not slow, it's just you need to press the button at least twice to navigate. It only happens when newArch is enabled |
@ralppppy With newArch enabled I also have issues, maybe we need to wait for updates from react navigation. |
I can confirm that upgrading from 0.71.0 to 0.71.1 has solved the issue. |
upgrading to version 0.71.1 solve the issue |
Upgrading to RN version 0.71.1 didn't work for me, but I figured out two solutions that did: You can disable hermes in your gradle.properties file
or you can use the following prop if you are using @react-navigation/drawer
|
Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro. |
Noting that rendering performance seems to have dropped for all react native versions above ^0.7 - with hermes having the worst performance. See the following issues: facebook/react-native#36296 In our case, whether due to the combination of synchronous effect flushing, or slower rendering performance on both jsc and hermes, we need to move away from useFocusEffect for any data fetching due to its halting of the UI on transition. This was not an issue in RN ^0.68. |
is there any progress on this? I am currently waiting for 1 or 2 seconds on page transitions in android. |
Same here, is there any workaround? |
The issues still persist, even v0.71.0. |
I also experience the same problem, I have tried debugging but unsuccessful, has anyone been able to solve it? |
facing same issue? any solution? |
there is a noticable lag/delay while navigating ... |
Does anyone have a mre repo? So we can start working on that? |
Why is there no improvement when there is such an obvious performance problem in the current React version? Especially on Android, page transitions are so slow. If the page is already full (for example if I have 2 horizontal flatlists with 20 products). If the page data is blank, the page loads a bit faster. But if I'm fetching from cache like react query or redux, I wait for at least 2 3 seconds for the page to be drawn. There is no solution I haven't tried. Converting the flatlist to flashlist didn't help. I'm sure there are places in the React navigation library that need to be resolved. |
@hasanaktas / @arasrezaei / @DavideSegullo and anyone facing the same issue here: have you tried profiling your application as e.g. described in https://www.youtube.com/watch?v=5Q3VCgKV0GE ? We faced the same issues and had the hypothesis that this was caused by react-navigation. After profiling however, we learned that on every route change (aka navigation state change), a context changed, which triggered a re-rendering all of our screens that were previously visited before screen transition. On a 5 year old Android phone this resulted in 2-3 seconds delay. The root cause in our case, was a custom hook introducing the context that changed on every route change. The context contained the current route which obviously always changes. Every screen used that hook so it was re-rendered on route change. The fix was to make the hook more granular so that only components actually reacting to route changes would re-render. |
@danbim |
I am also trying to debug the hit on performance since moving to anything after 0.71 - specifically Android. |
I'm facing the same issue! After reading the replies, it looks like the topic is abandoned... so.... is there a temporary solution? |
@danbim already gave the perfect answer for this issue.. i had the same 2 days ago with 3sec delay when navigating in a custom navigation. i used flipper to see wich components take to much time to render and i fixed them. now i navigate with 300ms to a huge contentpage. my issue was that i used 5 horizontal scrollview to list components. i replaced all with a flatlist and used initialNumToRender and maxToRenderPerBatch |
Does someone have a solution for this? tried all without success |
I also feel that screen transitions are more laggy/expensive after upgrading to 72 from 67. It might be due to the issues with react native itself, but maybe there were some changes included in react-navigation or react-native-screens which are causing issues too? As the example, I have a screen placed in native stack navigator and presented modally. I see a delay between pressing button opening it and transition start and js FPS drops to ~45 sometimes. But on the other hand, if I open exactly the same screen inside react native Modal component, it reacts much faster and FPS is dropping to ~56/58. |
@emzet93 yeah you are right very slow. in my case around 10fps |
This seemed to fix my issue: for reference, I have StackNavigator with nested BottomTab's. Previously the bottom-tab transitions were slowwww |
any solution for navigation when newArchEnabled=true guys , its very slow |
Hello, |
Same issue here. On Android transitions take 2-4 seconds! On iOS it works at an acceptable speed (~500ms). I've noticed that if I don't include a component in the
Has anyone been able to find a workaround or a root-cause of this and how to fix it? |
@Georg7 FWIW I experienced this issue and it was particularly noticeable on an old Android device when I was rendering complex components (SVGs), storing state in screen components/context and doing data fetching in screen component useEffects. Per this comment I optimised my components by breaking the screen up into smaller components, used useCallback, useMemo, and memoised my components which improved things. Probably the biggest improvement came from introducing zustand and connecting the child components to the relevant part of store, rather than storing my state using context or useState on the screens (ie at the top of the component tree) which was causing rerenders of the entire screen |
I'm also having this issue on Android only with Expo SDK 49. I'm using a Drawer Navigator and once the Drawer opens which is very laggy it cannot be closed again. Seems to only be an issue when using Hermes, JSC works fine. |
Having the same issue both on Android and IOS on native stack navigation at |
@satya164 This is not solved issue, Please reopen |
if you are using react native multiple drawer navigation(nested) dont worry in production there is not speed problem all be fast :) |
Expo 49 and RN 0.72, I have slow issue on production build, no issue on dev mode, after the drawer is opened, it cant be close.
|
Just upgraded RN to 0.73.3. Tab-Navigator is noticeably lagging in release build. There is no lag when I am debugging on the same android phone. All the react-navigation packages are up-to date. |
I am experiencing lots of issues with slow navigation on React Native v0.72.5 for Android devices. The navigation is slow in release mode for some devices and very slow in debug mode for all devices. Mainly just hangs up for up to a minute when trying to tap the back button or tap on a tab. |
For us with Fabric turned on, navigation is slow, without it everything is fine. We have nested tab and stack navigators. Would like to get solution for fabric variant 😕 |
I found that this is happening because of mounting the component on the page so I added a Step 1) Create a custom hook // It will run when component is mounted, return status of mounting
|
Its working with RN 0.73.4. Thanks @vijaychouhan-rails I know its hack but make my navigation page transition from 3 second to milisecond, navigation working like native navigation. I am really happy with that solution. Thanks again |
still error 0.71.3 |
Is it really effective? My project is really running.
Vào Th 3, 26 thg 3, 2024 vào lúc 09:33 TAE HONG LEE <
***@***.***> đã viết:
… still error 0.71.3
@anhnguyen123 <https://github.com/anhnguyen123> you can update 0.73.x
—
Reply to this email directly, view it on GitHub
<#11167 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AENKDLTCM5Q7B266I2KGDNDY2DM7ZAVCNFSM6AAAAAAUBBONCWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJZGI3TKNZWGE>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Hi, I have an expo app with react-native 0.73.4 and react-navigation/native 6.1.9. Ofc I'm using Hermes but not the new architecture. I don't think my routes setup is special or broken :
I'm open to optimize it but I'm sure that the performance issue I'm experiencing is not related to my routes setup. Do we have any news about it ? It's really a pity having a professional app with poor performances and no solution to fix it :( |
Same exact issue^. react-native 0.74.1 SDK 51 and bottom tabs are especially slow. Often delayed. |
Reproduce the issue on snack also add the device details that you are using to test |
Hi anything new here, My app becomes slow everywhere after upgrading react-native to 0.74.2 and enabling new arc |
How is this thread marked as closed without any resolution? |
My project has been uploaded to the store but it's still slow on Android. iOS is very fast. |
Same issue in my project. Slow on Android but fast on iOS. |
Current behavior
If you proceed with login and press the button, it is too slow than the previous version of RN 0.71.0.
Expected behavior
proceed very fast
Reproduction
not repo
Platform
Packages
Environment
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"android:dev": "yarn set-env:dev && react-native run-android --variant=developmentDebug",
"ios:dev": "yarn set-env:dev && ENVFILE=.env.development react-native run-ios --scheme "app-dev" -
"start": "react-native start",
},
"dependencies": {
"@amplitude/react-native": "^2.11.0",
"@native-html/iframe-plugin": "^2.6.1",
"@notifee/react-native": "^5.5.0",
"@ptomasroos/react-native-multi-slider": "^2.2.2",
"@react-native-async-storage/async-storage": "^1.17.3",
"@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/netinfo": "^9.3.0",
"@react-native-community/push-notification-ios": "^1.10.1",
"@react-native-firebase/analytics": "^16.5.0",
"@react-native-firebase/app": "^16.5.0",
"@react-native-firebase/messaging": "^16.5.0",
"@react-native-firebase/remote-config": "^16.5.0",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/elements": "^1.3.3",
"@react-navigation/material-top-tabs": "^6.2.2",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"@sentry/react-native": "^4.1.0",
"@types/react-native-version-check": "^3.4.4",
"appcenter": "4.4.5",
"appcenter-analytics": "4.4.5",
"appcenter-crashes": "4.4.5",
"axios": "^0.27.2",
"dayjs": "^1.11.2",
"deprecated-react-native-prop-types": "^2.3.0",
"graphql": "^16.5.0",
"hangul-js": "^0.2.6",
"immer": "^9.0.15",
"jotai": "^1.7.6",
"lodash": "^4.17.21",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"react": "18.2.0",
"react-native": "0.71.0",
"react-native-appboy-sdk": "^1.41.0",
"react-native-appsflyer": "^6.5.21",
"react-native-bootsplash": "^4.4.1",
"react-native-channel-plugin": "^0.7.4",
"react-native-code-push": "^7.0.5",
"react-native-config": "^1.4.12",
"react-native-date-picker": "^4.2.1",
"react-native-device-info": "^9.0.2",
"react-native-exit-app": "^1.1.0",
"react-native-fast-image": "^8.5.11",
"react-native-haptic-feedback": "^1.14.0",
"react-native-heic-converter": "^1.3.0",
"react-native-image-pan-zoom": "^2.1.12",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.6.2",
"react-native-masked-text": "^1.13.0",
"react-native-orientation-locker": "^1.5.0",
"react-native-pager-view": "^5.4.25",
"react-native-parsed-text": "^0.0.22",
"react-native-permissions": "^3.6.1",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.19.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-tab-view": "^3.1.1",
"react-native-version-check": "^3.4.3",
"react-native-webview": "^11.26.0",
"react-native-wrapped-text": "^1.2.2",
"react-query": "^3.39.1",
"sendbird": "^3.1.14"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.14.0",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^3.0.0",
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/lodash": "^4.14.182",
"@types/react": "^18.0.24",
"@types/react-native": "^0.71.0",
"@types/react-native-snap-carousel": "^3.8.5",
"@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"appcenter-cli": "^2.10.10",
"babel-jest": "^29.2.1",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^21.0.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-react-native": "^4.0.0",
"husky": "^8.0.0",
"jest": "^26.6.3",
"lint-staged": "^12.4.1",
"metro-react-native-babel-preset": "^0.73.5",
"prettier": "^2.8.2",
"react-native-flipper": "^0.144.0",
"react-query-native-devtools": "^4.0.0",
"react-test-renderer": "18.2.0",
"rn-flipper-async-storage-advanced": "^1.0.4",
"typescript": "^4.8.4"
},
"resolutions": {
"@types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
The text was updated successfully, but these errors were encountered: