React-native-router-flux: General performance question

[blackxored]

Apologies if this has been answered before, or if it's an upstream problem. UI thread drops to ~40fps and lower when switching from one view to another, while it remains on 60 for tab jumps. I'm talking empty views here (as in return null from component). It's noticeable slow on the simulator, and intermittently slow on device (as in was insane fast on a release config build and then a couple of builds after app's unusable).

It seems to me that the animation is the culprit. I'm not entirely sure, as I'm obviously clueless, but setting duration={1} on that same scene makes the FPS stay at 60 again.

EDIT:
react-native: 0.29.1
react-native-router-flux: 3.30.0

[cridenour]

It's very likely upstream, but I'll be interested if anyone else has noticed this behavior.

Is this Android or iOS?

[blackxored]

iOS 10 on device, 9 on Simulator.

[mehcode]

@blackxored This library is built on ex-navigator which is built on Navigator. I've found that if you're doing _anything_ network related or unnecessarily intensive you'll cause the animation to grind to a halt / stutter during the animation as it drops frames to keep up.

The solution is:

InteractionManager.runAfterInteractions(() => {
  // do stuff here
})

You likely have code that is executing on componentDidMount or in a similar location.

[blackxored]

@mehcode Forgive me if I'm wrong, not made myself clear enough, or both :D,

1. This library is not built upon ex-navigator but NavigationExperimental (ok, still JS), right? I think it used to be but not since a while ago, unless I'm mistaken.
2. I'm doing no work on the components I'm using for testing since they're basically () => null.
3. NavigationExperimental example on UI explorer doesn't experience this frame drops .
4. Setting duration to 1 (effect which I'd assume has to do something with Animated) restores the smooth frame rate.

Thanks.

[blackxored]

More specifically, I have a tab view that links to a non tab view (outside of that scene's container) if that'd help.

[blackxored]

Any thoughts on this?

[ms88privat]

@blackxored

More specifically, I have a tab view that links to a non tab view (outside of that scene's container)

this could be a problem. Does your navbar behave strangely if you push/pop the route?

Did you try it as a Modal?

[blackxored]

Sorry for the late response. My root scene is a modal.

On Wed, Jul 20, 2016 at 6:05 PM ms88privat [email protected] wrote:

@blackxored https://github.com/blackxored

More specifically, I have a tab view that links to a non tab view (outside
of that scene's container)

this could be a problem. Does your navbar behave strangely if you push/pop
the route?

Did you try it as a Modal?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/934#issuecomment-233996350,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIIvA7hR9dcdHLsnpVfB1bIv4YZEOCiks5qXkawgaJpZM4JOXhz
.

Best Regards,

Adrian Perez
https://adrianperez.codes

[digitaldavenyc]

I have been experiencing the exact same issue as @blackxored. Animations on our project that animate from a tab view to another view experience a major lag in performance, it's even worse returning to the original tab view. I have made sure that no actions, reducers or other javascript is processing before triggering a RNRF Action animation but the performance hit still persists.

There are other elements in our application that use the React Native Animation package and they do not suffer from any performance issues. The problem seems to be contained to RNRF.

I would be happy to provide any additional information to try and resolve this.

[digitaldavenyc]

I may have solved this issue, sorta. Running RNRF in debug mode will cause major performance hits to Scene transitions, particularly when running on physical device. @blackxored Try running your app as a release and see if that fixes the issue.

[andycodesstuff]

Hi, I also had this problem and running the app as release fixed it.
Thanks @digitaldavenyc!

[blackxored]

That's a workaround that I found pretty early. Still shouldn't be considered correct. One root cause I think I found was that if you're using any sort of redux logging in development, the router send the whole routing state tree to every back action and that slowed it on anything but WebWorker or with Release config (which disables redux-logger obv).

[andycodesstuff]

I don't know if I can ask this question here but...
Do you know how to access the current scene key or title from flux router?
I have created a Material Design Drawer and I have to retrive the current scene to trigger the 'active' state on a Drawer's section to highlight it

[luco]

+1 on this. Transitions drops to ~40fps while on Navigator remains at least ~52

[booboothefool]

+1 driving me nuts

no console.logs, production mode, some InteractionManager/ partial rendering optimizations, still too slow 😢

[blackxored]

Sadly I've been away from using this project but my response remains: make sure that any logging middleware excludes this router's actions as specially the back action, as it sends the whole routing state tree, probably synchronously, and the parsing gets thing significantly slower than it should.
This should be fixed upstream as I don't see any particular reason to send the whole thing to reducers.