React-native: NavigationExperimental slow/freeze on Android compiled from Windows

[bosung90]

https://goo.gl/photos/X4xmbXJFGXtbvg389
Using Windows 10 x64
Pushing/popping causes JS frame to go to -2 and freezes eventually crashing.
Happens on RN 0.22
On RN 0.23 the frame drops very low (0~20) on push/pop but usually recovers after a short delay, due to low JS frame animation is not smooth.

Note that JS frame rate dropping happens regardless of navigation animation (ex. tabbar).

Also tried on latest master branch and same thing occurs. (Commit: 235b16d)

Occurs 100% of the time on physical device Galaxy S6 on Android 5.1.1 and emulator nexus 5 x64 Android 6.

[satya164]

@bosung90 Are you connected to the debugger by any chance?

[terrysahaidak]

I have the similar issue as well. With production build of 0.22 on my Galaxy S4 i9505 Android 5.1.1 it's super slow and sometimes it freezes and crashes. Thought it's only the problem with an android, but it also can be related to operation system I'm using - windows 10.

[rulatir]

Same issue here. Setup: developing on linux, running on Android emulator on the same machine. This probably indicates that the bug is not platform specific.

Also, very weirdly, while this appears to be caused by the _involvement_ of NavigationExperimental (via react-native-router-flux in my case), it is apparently not related to _navigating_. I am not navigating at all, but merely clicking on a hello world component that displays a number incremented on every click (stored in component's state), and that is literally all it does. After each click memory is leaked, and exponentially so. Here is grepped output of consecutive cat /proc/$pid/status on adb shell:

VmData: 154092 kB
VmData: 154356 kB
VmData: 154568 kB
VmData: 154972 kB
VmData: 157032 kB
VmData: 158480 kB
VmData: 167032 kB
VmData: 198712 kB
VmData: 332040 kB
VmData: 818432 kB

The corresponding diffs are:

264
212
404
2060
1448
8552
31680
133328
486392

Additional observations:

• After the 7th click and all subsequent clicks there is noticeable CPU grinding.
• Weirdly, the grinding happens after the component is re-rendered. During the grinding memory usage goes up rapidly, and eventually the app OOMs several seconds after the 10th click, while the number 10 is already being displayed.

[bosung90]

@satya164 I am not using chrome debugger.
I was using dev=true and minify=false but I just tried dev=false and minify=true and I still get non-smooth navigation animation during push/pop but not as bad.

[agrass]

I'm with same problem of @rulatir after upgrading to RN 0.22.2 on Linux running in genymotion emulator of Android nexus 5 and also in not emulated device. I'm working with react-native-router-flux 3.2.3, but if more people are with this issue without react-native-router-flux may be is problem of NavigationExperimental. Someone with some workaround for this?

[rulatir]

The author of react-native-router-flux maintains that the problem is indeed in NavigationExperimental.

[delta-9]

I confirm this issue, the app freeze and crash after 5-10 scene rendering with the new NavigationExperimental. I'm using RN 0.22 on linux.

[thessem]

This is a problem for me with through react-native-router-flux, though the author says the issue is with NavigationExperimental. This is with and without debug on a real device from osx with RN 0.22.2

[satya164]

cc @ericvicenti @hedgerwang

[satya164]

Can anybody give a simple reproducible example?

[thessem]

The example project over at https://github.com/aksonov/react-native-router-flux/tree/master/Example on an android device should do it, although I haven't personally run it and seen this bug, I've also seen on a few other issues that this happens on the RN UIExplorer project on android without using RNRF (e.g. https://github.com/aksonov/react-native-router-flux/issues/355 for UIExplorer and https://github.com/aksonov/react-native-router-flux/issues/401 for somebody having the issue with RNRF example)

Apologies for these being RNRF based but that's how I'm interacting with the navigator

[satya164]

@thessem The example provided there is not strictly NavigationExperimental, even if it uses it. So it's difficult to pinpoint the issue from there. It'll be useful to have a simpler example just using NavigationExperimental and no other libraries.

About other issues you've seen, can you file separate bug reports for them?

[terrysahaidak]

@satya164 you can check also my attempt to use it, but it's pretty complex:
https://github.com/terrysahaidak/GitterMobile/tree/experimental-navigator
Simple navigation module, main routes file, and simple navigation animated view with opacity. It freezes after several pushes, also app crashes even without animation view and any transitions.

Tested on my Galaxy s4 i9505

[albo1337]

how is the status here? I have the same problem

[bosung90]

@albo1337 0.23rc seems to solve a lot of problems with freezing so I think you can start using 0.23rc and just hope it will be fixed in future releases.

[caledhwa]

I also have this same issue. I'm running on MacOSx and using Genymotion for testing. No noticeable issues in iOS Simulator - only Genymotion. I am also using react-native-router-flux. This seems like a pretty serious issue IMHO. Going to switch to 0.23.0-rc4 to see if there's any improvement there.

[bosung90]

@caledhwa Let me know how it goes

[caledhwa]

So, definite improvement of navigation performance on Android with react-native-router-flux AND 0.23.0-rc4.

However, it broke many other things. I'm also using https://github.com/brentvatne/react-native-linear-gradient - and it stopped rendering those components altogether on android.

But the worst problem? It's related to this issue: https://github.com/aksonov/react-native-router-flux/issues/416 - this completely stops my app on iOS. So, if I can't run it on iOS and Android with success, I'm a bit hosed. For now, I'm doing most of my dev back on 0.22.2 and am just not testing on Android with hopes for a fix here.

[sylvainbaronnet]

seems fixed with 0.24.0-rc3

[caledhwa]

It was fixed for me (the slowness) on 0.24.0-rc2

On Sat, Apr 9, 2016 at 7:24 AM, Sylvain Baronnet [email protected]
wrote:

seems fixed with 0.24.0-rc3

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/6666#issuecomment-207795118

[devux]

Thanks all I have same problem fixed now after upgrading to 0.24.0 but now the screens or overriding when moving to another screen any solutions for that?

[satya164]

Closing since this seems to be fixed.

[satya164]

@devux What do you mean by that?