React-native-router-flux: Extremely slow on android

The problem I don't have android. Maybe community could help. Have you tried to debug? This component is just wrapper around exNavigator. Does ExNavigator work well on android?

@timsuchanek, did you test it without live reloading and chrome debugging? For me it's only (extremely) slow when I have live reloading or chrome debugging on ;)

Hey, yes I tried it without debugger enabled. But what I found:
If it has already been opened once, it's a lot faster.
Only the first 1-2 times it's slow.
I'll check ExNavigator standalone

Hey @timsuchanek thanks for reporting this. Is it slow without animations (i.e. a <Scheme> with no animation config)? I am willing to compromise animations for performance if worse comes to worse. I don't have an Android either, or else I would try it myself.

I can confirm the example app slowed down on Android 4.4 (It takes ~2s from clicking a button to any route changes). And the exNavigator examples don't have the same issue.

Edit: After enabling chrome debugging the delay magically disappear -__________-

@sbycrosz Is it slow for tab bar or for all pages?

I've been testing this library on Android today and it appears to be working fine as long as I don't use the chrome debugging.

There does seem to be a delay in 'switch' animations between tabs. I'm looking into it.

I have test the 'switch' on tab, it's too slow, about 1.5s to change the tab. I have turn off the chrome debug and live reload, it's the same.

Could you check latest version? Also please uncomment console logging within debug.js and check.

I've tried to debug Example app from version 2.3.1 on Android tablet. Animations were extremely slow.
Here is console output with debug.js uncommented
I also made a release build of simple app (using version 2.3.1) and ran it on Samsung Galaxy S3. Again everything was very slow.
Maybe updating "@exponent/react-native-navigator": "^0.3.5" to latest will fix it?

Please check core exnavigator code

Pavel.

24 февр. 2016 г., в 21:18, doomsower [email protected] написал(а):

I've tried to debug Example app from version 2.3.1 on Android tablet. Animations were extremely slow.
Here is console output with debug.js uncommented
I also made a release build of simple app (using version 2.3.1) and ran it on Samsung Galaxy S3. Again everything was very slow.
Maybe updating "@exponent/react-native-navigator": "^0.3.5" to latest will fix it?

—
Reply to this email directly or view it on GitHub.

Hi,

I am also experiencing slowness. However, when chrome debugging is enabled, it is faster .
Behaviour in simulator (android and iOS) and physical device is the same as when chrome debugging is disabled.

Is there anyway to disabled "@exponent/react-native-navigator" completely to isolate the problem?

Doddy

Hi,

I had this problem too, but I solved it by disabling the dev mode.

Here the issue on react-native github :
https://github.com/facebook/react-native/issues/3049

I tried another router and it was exactly the same on android. The demo was
very slow. So, I'm not sure that it comes to react-native-router-flux :)

Tony

Le ven. 26 févr. 2016 à 03:10, doddys [email protected] a écrit :

Hi,

I am also experiencing slowness. However, when chrome debugging is
enabled, it is faster .
Behaviour in simulator (android and iOS) and physical device is the same
as when chrome debugging is disabled.

Is there anyway to disabled "@exponent/react-native-navigator" completely
to isolate the problem?

Doddy

—
Reply to this email directly or view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment-189078772
.

Hi,

I finally found why it was slow on my device/simulator. I was due to my own mistake.
I was doing a console.log(action) in the reducers. That turns out slow things a lot. Especially when executed on the device. It was ok when chrome debugging was turned on because it is executed using the chrome javascript engine which is much more powerful (laptop vs device).

After removing all the log(action), its much better now.

Doddy

@doddys works for me 👍

@doddys I'm using console.log in my logger middleware😂😂

I'm going to close this. For future reference make sure to not have console.log anywhere in the code, whether it is your redux middleware or in the debug for this library

Hello.
I am experiencing this. I tried removing all calls to console.log throughout the project, tried turning dev mode off, tried using/not-using chrome debug... even tried to build a release APK and run your react-native-router-flux demo as is... and the problem still persists.
Transitions may look ok for a while but if you stress the navigator out by going back and forward, the app will eventually slow down and sometimes will even freeze.
There is a comment on the related react-native issue https://github.com/facebook/react-native/issues/3049#issuecomment-143505930 that describes a workaround.
On the React Native official notes about Android performance, this workaround is also mentioned: https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions
Would it be possible to integrate the InteractionManager workaround on react-native-router-flux somehow?
Until then I feel I cannot really use the module on Android devices, which is a real pity.

I was trying the Example updated as of today with both a real Android devide and simulator and it was simply unusable.
I tried to update package.json so to use the latest react-native "react-native": "^0.25.1", and now it runs pretty smooth.

When runing on actual Android device that is
plugged into usb you need to run the following
from the command line.

$ react-native start
$ adb reverse tcp:8081 tcp:8081
$ react-native run-android

turn off "JS Dev Mode

You will want to make sure that you turn off "JS Dev Mode," or else it
will run painfully slow on device.

After running "react-native run-android" you should "shake" your device
to bring up the menu. Select "Dev Settings" then uncheck "JS Dev Mode."

After that run "react-native run-android" again and it should be more
performant, at least I hope for you :)

The above didn't fix. My Nexus 6 runs extreme slow can not be used in debug.
Who can tell how you debug your android version...
The issue is not fix for a long time...

For nexus 5x not fixed too.

It looks like there's a pull request from RN (https://github.com/facebook/react-native/pull/10289) that updates NavigationExperimental to offload animations from the JS thread, which should resolve this issue.

However, react-native-router-flux is using a forked version of NavigationExperimental (react-native-navigation-experimental), which has some deprecated files (e.g. NavigationAnimatedView is now NavigationTransitioner) so it's probably worth updating that.

@aksonov is it possible to unfork react-native-navigation-experimental? It seems dubious to maintain a forked copy given the frequency of changes.

on nexus 5 very slow with remote debugging turned on

I've got the same issue. On an emulator it works okay. But on a device, the animations are extremely laggy (routing between screens that animate horizontally/vertically) when remote js debugging is enabled. too bad, will have to switch it on and off a lot.
Wiko Lenny 2

Just for information:

A days ago, I'm figure that when I run "react-native run-android" to install in my device, for no aparently reason, it's taking about 15/20 minutes to finish (yes, I'm a hero for waiting). So after painfully run and run, changing somethings I figure out that my problem was that I'm behind a proxy and in I've commented my proxy configurations on gradle.properties file. So I uncomment the configurations and everything runs faster again. I really don't know why, but works for me, and to be sure I comment this configurations again and everything run slowly again. So, if someone is having this issue and any others solutions works, try put this lines in yout gradle.properties file (Only if you are behind proxy, of course):

systemProp.http.proxyHost=192.168.X.XX //put your server IP here
systemProp.http.proxyPort=8888 //put your server PORT here
systemProp.http.proxyUser=xxxxxxx //put your PROXY USER here
systemProp.http.proxyPassword=xxxxxxx //put your PROXY USER PASSWORD here

systemProp.https.proxyHost=192.168.X.XX //put your server IP here
systemProp.https.proxyPort=8888 //put your server PORT here
systemProp.https.proxyUser=xxxxxxx //put your PROXY USER here
systemProp.https.proxyPassword=xxxxxxx //put your PROXY USER PASSWORD here

I hope this help someone.

Hey guys, this is what have the most impact to me (aside from dev=false and disabling remote js debugging)

The problem

Router transitions + android + react-native-svg

The solution

Obviously try to avoid Svg, but if you have to use them, then delay rendering them until the transition is made. You can use a variation of this technique: https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

In my case, the svg images are quite a few, but luckily they are rendered on the bottom of the screen, so the user needs to scroll in order to see them. So only delaying rendering those svgs had a huge impact in performance (initially it was about 4s and after it was about less than 1s).

Delaying is quite tricky in it's own way so I created a HOC to do it. Here is the gist (take in account that I wrote in TS and I just striped the type information so it becomes JS but I have not tried it):

import React from 'react'
import { InteractionManager } from 'react-native';

const MAX_DELAY = 500;

export default function providePartialRender(Component) {
  return class PartialRenderProvider extends React.Component {
    // initialize state (same as inside the constructor, just syntax sugar)
    state = {
      partialRender: true,
    };

    componentDidMount() {
      const updatePartialRender = () => {
        this.setState(state => {
          state.partialRender = false
          return state;
        });
      }
      // workaround https://github.com/facebook/react-native/issues/8624
      let called = false;
      const timeout = setTimeout(() => { called = true; updatePartialRender() }, MAX_DELAY);
      InteractionManager.runAfterInteractions(() => {
        if (called) return;
        clearTimeout(timeout);
        updatePartialRender();
      });
    }

    render() {
      const props = Object.assign(
        {},
        this.props,
        { partialRender: this.state.partialRender }
      );

      return <Component {...props}/>
    }
  }
}

So now, the components that you enhance with this HOC will have a new prop called partialRender that will tell them whether to render a lighweight version of the component (partialRender = true) or to render everything (partialRender = false).

See https://reactnavigation.org/ for the new "official" navigator from Facebook, which uses native animations for transitions.

@Jickelsen How official is it?

@adambene check collaborators list.

just switch off your Chrome Debugger and everything would be fast :)

@doddys You are a great man! You know it?

@doddys Thanks man , you saved the day !

not solved

"react-native-router-flux": "4.0.6",