0

I have an app where users can navigate almost endlessly to new screens (I'm using Stack Navigator). There are about 15 different screens, but every screen can be opened with a huge number of different IDs (showing data for different companies, etc). For example in the Company route, the user can open many different Person screens based on employees, and again from Person screens the user can navigate to many different screens, so the navigation is basically endless.

Because React Navigation keeps all screens in memory, after navigating maybe 20-30 different screens, the app becomes very laggy. And because the number of routes is basically endless, it's impossible to keep all screens in memory.

I end up replacing the screen (navigation.replace) instead of pushing it when the user navigates to a new screen. That way there is only one screen in the memory at a time. I also made an array where I push the name and parameters of the new route every time, so when user goes back, I get the previous routes from that array and I replace current screen with the screen from that history array. It works fine, but of course, going back is not as fast as using React Navigation in the standard way.

So the first question: what is the most efficient and CORRECT way of using React Navigation in my case?

Second question: because I have just one screen on React Navigation's history, the swipe back does not work on iOS. Is there an easy way to change swipe back to call my own back function instead of React Navigation's default back?

darx
  • 1,417
  • 1
  • 11
  • 25
  • Maybe this would help? https://stackoverflow.com/questions/67674460/how-to-unmount-screen-on-blur-in-a-stacknavigator – Abe Jan 03 '23 at 16:30

0 Answers0