React-native-router-flux: Very poor performance during transitions on Android (3.0.9)

[Jickelsen]

I version 3 I am still getting so low performance during transitions that my app locks up and is eventually killed. I found a console.log in Reducers.js on line 119, regardless if dev mode is on or not. It seems it isn't great for Android performance, see https://github.com/aksonov/react-native-router-flux/issues/199. However, commenting this out does not seem to affect performance, and neither do any of the other proposed fixes from that issue.

This is in a list<-> detail view in a very simple example app, I even tried it with static data (so no network requests during transitions) and the problem is still there. The only thing I haven't tried yet is to delay rendering of the new view until the transition has completed. No other logging going on from what I can see.

Tested on a Moto G3.

[aksonov]

It is just wrapper around new Navigation API. Check performance within React Native UIExplorer example for that API

[Jickelsen]

You're right, the animated nav example in UIExplorer is rather slow too, though it doesn't freeze up completely. The other examples in that same app run fine however. I'll see if it helps turning off animations, and hope things improve to the official release.

[thessem]

I am getting this too, eventually the app freezes completely and dies. I am having trouble working out what's causing it (I upgraded RNRF 3 with RN 0.22 so it's hard to tell)

@Jickelsen if you figure out a way around this please let me know!

[delta-9]

I'm experiencing the same behaviour, Also when I fill a form the form refuse to loose focus, then the state freeze and the app crash. Tested with 3.1 and tcomb-form-native (also with react-native-stateless-form)

[thessem]

@delta-9 I am experiencing exactly the form focus issue too. Weird

[sylvainbaronnet]

@delta-9 Exactly same issue

[aksonov]

Guys, I don't understand why you are posting it here. The component is just WRAPPER and use new Navigation API, so please complain it here : https://github.com/ericvicenti/navigation-rfc or at react native github.

[sylvainbaronnet]

Sorry.

I think we should report it to the official RN repo since :

NavigationExperimental has recently been moved from here to the open source RN

[delta-9]

Sorry, I see that issue here so I reported here, I'll report it back to the RN repository

[DThink]

my problem
hi, I do not know if because of me or because of a malfunction of the plugin. i have this problems

1)in the router bar if i see a title, this is to bottom of bar and the bar is too big respect you example.

2) if i go to next page in the router bar i dont see the title and if i push the back button the app crashes

i install the last react native version in windows 10, i tested the app in the genymotion emulator with android 6.0, 5.1 and 4.4 but in same case the problems is the sames.
how do I fix this?

[rulatir]

Weirdly enough, this doesn't seem to even be caused by navigating. Basically any component updating inside a scene results in memory being leaked and exponentially so, except when the scene is the very root scene - the problem does not manifest in that case.

[Akimyou]

Very poor performance in adroid 4.0，😭

[caledhwa]

Yep. This is an issue related to React Native 0.22.2, this should be fixed in a few days on React Native 0.24. For more details log into Gitter and look at history

Sent from the 2-6 (Leavenworth, WA 98826)

On Apr 6, 2016, at 18:12, MIKUScallion [email protected] wrote:

Very poor performance in adroid 4.0，😭

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

[caledhwa]

Try react-native 0.24.0-rc2

Sent from the 2-6 (Leavenworth, WA 98826)

On Apr 6, 2016, at 18:12, MIKUScallion [email protected] wrote:

Very poor performance in adroid 4.0，😭

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

[sarovin]

I have upgrade to 0.24.0-rc2 and it's fast but i have another issue.
The custom NavBar is in the bottom ( i have tested on IOS Simulator and Samsung Galaxy S6 Device ):

This is my NavBar Component:

import NavigationBar from 'react-native-navbar'
import React, { Component, StyleSheet, View } from 'react-native'

class NavBarBase extends Component {

  render() {

    return (
      <NavigationBar style={styles.navBar}
        titleColor='white'
        buttonsColor='white'
        statusBar= {this.props.statusBar ? this.props.statusBar : {style:'default'}}
        title= {{title:this.props.title, tintColor:'white', fontSize: 20, fontFamily: 'Avenir-Roman'}}
        leftButton = {this.props.leftButton ? this.props.leftButton : {title:''}}
        rightButton = {this.props.rightButton ? this.props.rightButton : {title:''}}
      />
    );
  }
}

class NavBar extends Component {
   render() {
      return <NavBarBase customNext={<View/>} {...this.props} statusBar= {{style:'light-content', tintColor: '#1db198', hidden: false}} />
   }
}

var styles = StyleSheet.create({
   navBar: {
       backgroundColor: '#1db198',
       height: 56
   },
});


module.exports = {NavBar};

[albo1337]

@caledhwa have you any example app tested with rn-24 and router flux from akosonov? Would be great if you can share

[codyhazelwood]

@albo1337 I've tested with React-Native 0.23 and 0.24-rc2 and router-flux. The transition speed is much faster, but it's unusable because of the layout issues such as #474.

[albo1337]

Damn. Do you now any other Navigation-router which I can use without lose in performance in android or ios @codyhazelwood ?

[caledhwa]

@albo1337 so I finally got my project upgraded to [email protected] - It seems to work fine with the latest router. I'm not using some of the more complex features of the router, however. All of my routing is working fine under that version. I had some weirdness that showed up (views without backgroundColors were acting as if I'd set shadow properties) but I believe that was due to my usage of react-native-linear-gradient - totally unrelated to the router. The routing is working great on Android and there are no performance issues at all.

NOTE: Currently the ONLY version that works with the router is 0.24.0-rc2. There was a bug fixed in that release that was a blocker for the router (regarding images in node_modules packages). That fix is confirmed.

I'm not seeing the issue that is #474, nor am I seeing embedded Scene issues. My usage is very simple. Those things will need to be fixed I'm sure.