Search code examples
react-nativereact-navigationdelaytransition

React stack navigation transition takes way too long when passing large data


I'm using react naviagation for navigating between different screens, in particular, stack navigator. I've been having an issue with some of the navigation transitions taking too long. This delay can be as huge as 4-5 seconds. And the magnitude of the delay is directly proportional to the weight of the data I pass to the navigate function. I've tried using InteractionManager.runAfterInteractions function to accelerate offline loading but that didn't help as it seems offline loading itself needs to handle the passed data and only after that does it transition.

I do all the data fetching right at the app start. So when I navigate to another screen, there's no further fetching of data. For now, the only workaround I can think of is using AsyncStorage instead of passing it during navigation. Has anybody had this problem? If so, did you ever manage to solve it?


Solution

  • I eventually ended up loading everything to redux and then just reading from it, instead of passing loads of data through navigation bag. As another option, I could've used AsyncStorage too, but that would be abuse, as actions with AsyncStorage are async, which means I needed to await to get my hands on the needed data. And after all, it's not what AsyncStorage is designed for. Redux actions, on the other hand, are synchronous, which makes life easy in this particular situation and its main purpose is to serve needs like this one.