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.

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

Closed
5 of 13 tasks
ko-devHong opened this issue Jan 20, 2023 · 65 comments
Closed
5 of 13 tasks

react navigation very slow for react-native 0.71.0 #11167

ko-devHong opened this issue Jan 20, 2023 · 65 comments

Comments

@ko-devHong
Copy link

ko-devHong commented Jan 20, 2023

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

  • 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
  • react-native-tab-view
  • flipper-plugin-react-navigation

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"
]
}
}

@github-actions
Copy link

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

  • @react-navigation/bottom-tabs (found: 6.3.1, latest: 6.5.3)
  • @react-navigation/material-top-tabs (found: 6.2.2, latest: 6.5.2)
  • @react-navigation/native (found: 6.0.10, latest: 6.1.2)
  • react-native-tab-view (found: 3.1.1, latest: 3.3.4)

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

@github-actions
Copy link

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.

@devoren
Copy link

devoren commented Jan 20, 2023

I had the same problem and it got much faster after v0.71.1. Please upgrade RN to 0.71.1 (#35828)

@ralppppy
Copy link

It's still slow when using nested navigation, I'm using stack together with tab navigation.

@devoren
Copy link

devoren commented Jan 22, 2023

@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

@ralppppy
Copy link

ralppppy commented Jan 23, 2023

@devoren I've tried the example code in the documentation

import AccountScreen from './AccountScreen';
import FeedScreen from './FeedScreen';
import ProfileScreen from './ProfileScreen';
import SettingsScreen from './SettingsScreen';
import {NavigationContainer} from '@react-navigation/native';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Settings" component={SettingsScreen} />

        <Stack.Screen name="Home" component={HomeTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

@devoren
Copy link

devoren commented Jan 23, 2023

@ralppppy With newArch enabled I also have issues, maybe we need to wait for updates from react navigation.

@shemseddine
Copy link

I had the same problem and it got much faster after v0.71.1. Please upgrade RN to 0.71.1 (#35828)

I can confirm that upgrading from 0.71.0 to 0.71.1 has solved the issue.

@Yassine-Chraa
Copy link

I had the same problem and it got much faster after v0.71.1. Please upgrade RN to 0.71.1 (#35828)

upgrading to version 0.71.1 solve the issue

@satya164 satya164 closed this as completed Feb 2, 2023
@jqn
Copy link

jqn commented Mar 3, 2023

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

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=false

or you can use the following prop if you are using @react-navigation/drawer

useLegacyImplementation={true}

@github-actions
Copy link

github-actions bot commented Mar 3, 2023

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.

@conoremclaughlin
Copy link

conoremclaughlin commented Mar 18, 2023

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
facebook/react-native#36123
facebook/react-native#35778
wix/react-native-calendars#2138

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.

@hasanaktas
Copy link

is there any progress on this? I am currently waiting for 1 or 2 seconds on page transitions in android.

@rodrigolourenco
Copy link

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?

@ThePlatinum
Copy link

The issues still persist, even v0.71.0.

@DavideSegullo
Copy link

DavideSegullo commented May 16, 2023

I also experience the same problem, I have tried debugging but unsuccessful, has anyone been able to solve it?

@jotilohana
Copy link

facing same issue? any solution?

@arasrezaei
Copy link

arasrezaei commented May 26, 2023

there is a noticable lag/delay while navigating ...
specially on android phones

@DavideSegullo
Copy link

Does anyone have a mre repo? So we can start working on that?

@hasanaktas
Copy link

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.

@danbim
Copy link

danbim commented Jun 19, 2023

@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.

@hasanaktas
Copy link

@danbim
I will test it as you said today and report back.

@dbankier
Copy link

dbankier commented Jul 6, 2023

I am also trying to debug the hit on performance since moving to anything after 0.71 - specifically Android.
I am finding that running setOptions (in useLayoutEffect/useEffect) is one significant performance hit.
Not sure if that helps narrow down the issue.

@pandora-bdo
Copy link

I'm facing the same issue!
I've just upgraded to RN 0.71.3 / SDK 48, and now navigation seems pretty slow, especially when navigating from nested navigators(2 seconds delay after closing the drawer menu on Android).

After reading the replies, it looks like the topic is abandoned... so.... is there a temporary solution?
For now I'll keep my current project on SDK 45 & RN 0.68.

@CaarLo1337
Copy link

@pandora-bdo,

@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.
try using more useCallbacks and memo on the right components.

my issue was that i used 5 horizontal scrollview to list components. i replaced all with a flatlist and used initialNumToRender and maxToRenderPerBatch

@CloudGTMain
Copy link

Does someone have a solution for this? tried all without success

@devoren
Copy link

devoren commented Aug 11, 2023

@emzet93
Copy link

emzet93 commented Aug 23, 2023

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.

@devoren
Copy link

devoren commented Aug 28, 2023

@emzet93 yeah you are right very slow. in my case around 10fps

@chyde
Copy link

chyde commented Sep 15, 2023

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

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=false

or you can use the following prop if you are using @react-navigation/drawer

useLegacyImplementation={true}

This seemed to fix my issue: disable hermes in your gradle.properties file

for reference, I have StackNavigator with nested BottomTab's. Previously the bottom-tab transitions were slowwww

@thang997
Copy link

thang997 commented Oct 14, 2023

any solution for navigation when newArchEnabled=true guys , its very slow

@jordann93
Copy link

Hello,
Do we have news about this problem ? Same problem as everyone....

@Georg7
Copy link

Georg7 commented Dec 13, 2023

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 headerTitle the performance increases slightly but is still unacceptable from a UX perspective.

<Stack
	screenOptions={(route) => ({
		headerShown: true,
		animationEnabled: true,
		animation: Platform?.OS === "ios" ? "simple_push" : "slide_from_right",

		headerStyle: {
			backgroundColor: "transparent",
		},

		headerShadowVisible: false,
		headerTitle: () => <CommonHeader showHeader={showHeader} numSteps={numSteps} stepNum={stepNum} />

Has anyone been able to find a workaround or a root-cause of this and how to fix it?

@HieronymusLex
Copy link

HieronymusLex commented Dec 23, 2023

@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

@ewein
Copy link

ewein commented Jan 6, 2024

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.

@asgarovf
Copy link

Having the same issue both on Android and IOS on native stack navigation at "@react-navigation/native-stack": "6.9.17", and "react-native": "0.71.8". The animation is a bit slow but affects end users.

@ko-devHong
Copy link
Author

@satya164 This is not solved issue, Please reopen

@mmahdibyt
Copy link

mmahdibyt commented Jan 20, 2024

if you are using react native multiple drawer navigation(nested) dont worry in production there is not speed problem all be fast :)

@daywong1119
Copy link

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.

    "@react-navigation/drawer": "6.6.6",
    "react-native": "0.72.6",

@mollyOver
Copy link

mollyOver commented Feb 8, 2024

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.
The older RN 0.64.4 release build is working well.

@ipoogleduck
Copy link

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.

@rogerkerse
Copy link

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 😕

@vijaychouhan-rails
Copy link

vijaychouhan-rails commented Feb 16, 2024

I found that this is happening because of mounting the component on the page so I added a hack to solve the issue

Step 1) Create a custom hook

// It will run when component is mounted, return status of mounting

export function useOnMounted() {
  const onMounted = useRef(false);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    onMounted.current = true;
    setTimeout(() => {
      setLoading(false);
    });

    return () => {
      onMounted.current = false;
    };
  }, []);

  return {onMounted: useCallback(() => onMounted.current, []), isLoading};
}

In component users.js

const Users = ({navigation}) => {
  const {onMounted} = useOnMounted();
  
  if (!onMounted()) {
    return null //OR <LoaderComponent />;
  }
  
  // Else return original component
  
  return (
    <Text>This is the main component</Text>
  )
  
}

@forever-sumit
Copy link

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

@anhnguyen123
Copy link

still error 0.71.3

@anhnguyen123
Copy link

anhnguyen123 commented Mar 27, 2024 via email

@yonitou
Copy link

yonitou commented May 2, 2024

Hi,
I'm banging my head to find a solution that I can't find so I'm asking here.

I have an expo app with react-native 0.73.4 and react-navigation/native 6.1.9.
The navigation especially across tabs feels really sluggish, not smooth .. When I press on a tab, I've to wait 1 second for the tab to switch and render the screen.

Ofc I'm using Hermes but not the new architecture.

I don't think my routes setup is special or broken :

  • I've a StackNavigator nesting multiple stack screens and a DrawerNavigator.
  • This DrawerNavigator is nesting a TabNavigator
  • This TabNavigator is rendering 4 simple screens tabs

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 :(

@priedejm
Copy link

Same exact issue^. react-native 0.74.1 SDK 51 and bottom tabs are especially slow. Often delayed.

@raajnadar
Copy link
Member

Reproduce the issue on snack also add the device details that you are using to test

@doublelam
Copy link

Hi anything new here, My app becomes slow everywhere after upgrading react-native to 0.74.2 and enabling new arc

@sankparatkar
Copy link

How is this thread marked as closed without any resolution?

@anhnguyen123
Copy link

My project has been uploaded to the store but it's still slow on Android. iOS is very fast.

@Mikail-snipez13
Copy link

Same issue in my project. Slow on Android but fast on iOS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests