Navigations between Scene very very slow

[AgNm]

Version

Tell us which versions you are using:

"react": "16.2.0",
"react-native": "0.52.2",
"react-native-router-flux": "^4.0.0-beta.28",

Expected behaviour

Navigations should be fast.

Actual behaviour

I am doing navigation throughout my app using Actions.pageName(); & it is working very slowly.

I checked other links with same issue but I did not find any solution.

[divye11]

Do you have any network requests executed at any scenes? .
Often heavy network requests make it difficult to load, posting the code might help more for me to understand.

[daviscabral]

@AgNm Also, besides what @divye11 has said, pay attention to loggers (the use of console.log) causes this kind of behavior. Try to enable the debug mode on Chrome, and see if it make the scene change faster.

[duhseekoh]

Do you have 'Slow Animations' checked in your ios sim...?

[AgNm]

Thank you for your replies, I have just static data in my code, no API callings, no console log.

I have run the below command:

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache

Due to this, performance is better than earlier but still the navigation took around 2 seconds to move to another scene.

I am checking in Android right now (release build)

[divye11]

Could you show the code? I have built a simple login with facebook auth flow and navigator seems fine here.

[AgNm]

Below is my Code:

package.json

{
  "name": "Test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "lodash": "^4.17.4",
    "native-base": "^2.3.5",
    "react": "16.2.0",
    "react-native": "0.52.2",
    "react-native-action-button": "^2.8.4",
    "react-native-datepicker": "^1.6.0",
    "react-native-easy-grid": "^0.1.17",
    "react-native-modal": "^5.0.0",
    "react-native-router-flux": "^4.0.0-beta.28",
    "react-native-splash-screen": "^3.0.6",
    "react-native-table-component": "^1.1.3",
    "react-native-vector-icons": "^4.5.0",
    "react-navigation": "^1.0.3",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "22.1.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.1.4",
    "react-test-renderer": "16.2.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

Router.js

import React from 'react';
import { Scene, Router, Actions } from 'react-native-router-flux';
import Dashboard from './components/Home/Dashboard';

const RouterComponent = () => {
  return (
    <Router sceneStyle={{ paddingTop: 0 }} headerStyle={styles.header}>
      <Scene hideNavBar>
        <Scene key="main">
          <Scene key="Dashboard" component={Dashboard} hideNavBar />
        </Scene>
      </Scene>
    </Router>
  );
};

const styles = {
  header: {
    backgroundColor: '#5cafec',
  },
}

export default RouterComponent;

SideMenu.js:

import React from 'react';
import {View,TouchableOpacity,ScrollView,Alert,ImageBackground} from 'react-native';
import {Container,Thumbnail,Content,Icon,CardItem,Item,Card,Text,Header,Drawer,Button} from 'native-base';
import {Menus} from './common';
import {Actions} from 'react-native-router-flux';
import _ from 'lodash';

const SideMenu =({children,isMenuActive,onSideMenuChange})=>
{

  const {currentUser} = '';
  return (
    <Drawer
      style={{border:0}}
      ref={(ref) => { drawer = ref; }}
      open={isMenuActive}
      content={MenuComponent(currentUser)}
      >
      {children}
    </Drawer>
  )
}

const onRowPress=(val)=>{

  if(val)
  {

    if(val == "Dashboard")
    {
      Actions.Dashboard();
    }
  }
}

const MenuComponent=(currentUser) => {
  return(
    <ScrollView style={{backgroundColor: '#fbfbfe'}}>
      {
        _.map(Menus.menu,(val)=>{
          if(Actions.currentScene == val.link)
          {
            return(
              <TouchableOpacity style={TouchableLink} onPress={()=>{
                  onRowPress(val.link);
                }}>
                <CardItem style={{backgroundColor:'#fff',borderColor:'#fff'}}>
                  <Icon name={val.icon} style={{marginLeft:10, color:"#626B78"}}   />
                  <Text style={styles.menuTextStyle}>{val.name}</Text>
                </CardItem>
              </TouchableOpacity>
            )
          }
          else
          {
            return(
              <TouchableOpacity style={TouchableLink} onPress={()=>{
                  onRowPress(val.link);
                }}>
                <CardItem style={{backgroundColor:'#fff',borderColor:'#fff'}}>
                  <Icon name={val.icon} style={{marginLeft:10, color:"#626B78"}}   />
                  <Text style={styles.menuTextStyle}>{val.name}</Text>
                </CardItem>
              </TouchableOpacity>
            )
          }
        })
      }
    </ScrollView>
  );
}

const styles = {
  nameStyle : {
    paddingLeft:10,
    color:'#F1BE24',
    fontSize : 20,
  },
  employeeCodeStyle : {
    paddingLeft:10,
    color:'#fff',
    fontSize : 15,
  },
  companyNameStyle : {
    paddingLeft:10,
    color:'#F1BE24',
    fontSize : 15,
  },
  menuTextStyle : {
    color:'#626B78',
    fontSize : 17,
  }
}

const TouchableLink = {
  backgroundColor: '#ebebef'
}

export {SideMenu};

Menu.js

const Menus =
    {
        menu:
            [
                {name: 'Dashboard', link: 'Dashboard',icon:"ios-grid-outline"},
            ]
    }
export {Menus};

Home.js (The page in which I am adding the side menu. I could add the whole code of this file as it is too large)

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { StyleSheet,Text,View,Image,AppRegistry,TouchableHighlight,ListView,TextInput,NativeModules } from 'react-native';
import { Container,Fab,Body,Input,Header,Icon,Content,Right,Button,List,Item,Card,Left,Title, ListItem,Radio } from 'native-base';
import Modal from "react-native-modal";
import {Actions} from 'react-native-router-flux';
import ActionButton from 'react-native-action-button';
import { Col, Row, Grid } from "react-native-easy-grid";
import { SideMenu } from '../SideMenu';

class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      menuActive: false,
      visibleModal: 0,
    };
  }

  componentWillMount() {
  }



render() {
  return (
    <SideMenu isMenuActive={this.state.menuActive}>
      <Container style= {{backgroundColor : "#f3f3f3"}} >
        <Content>
          <Text>Test</Text>
        </Content>
      </Container>
    </SideMenu>
  );
}

onSideMenuChange() {
  this.setState({menuActive: true});
}
}

const styles = {
  textStyle : {
    fontSize: 16,
    marginTop : 10,
    marginLeft : 15,
  },
  actionButtonIcon: {
    fontSize: 28,
    height: 28,
    color: 'white',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 10
  },
  iconStyle : {
    color : '#0F6940',
    fontSize: 23,
  },
};

export default connect(null, {})(Home);

Also Please let me know what should I use router-flux or react-navigation? Which one is better?

[AgNm]

I have observed in my app, when data is more on the page, navigation takes time in router flux.
Currently I have hard coded Cards, ListView, Items, Grid in my app.

[MaxInMoon]

Could the use of PureComponent (instead of functional components) can improve the performance when changing the scene?

[MaxInMoon]

@AgNm did you try to make a prod build and to test it on real devices (both iOS and Android?)

[AgNm]

@MaxInMoon yes I tried on both Android & iOS , I am amazed to see that app is working really well on Simulators but very slow on real devices in both platforms. I am fade up of it now.

[MaxInMoon]

@AgNm indeed it's weird 😩

just two questions

1- why: null, {} in connect(null, {})(Home);

2 - when building on iOS from xCode, did you triple checked that you selected release build scheme? (shortcut: control + < )

[AgNm]

@MaxInMoon 1. Actually I am creating views right now, no redux. That why I have set it to null.
2. Yes, I have checked.

I have used native-base throughout my app.

The issue is I have created Cards, Grid, ListView, Items hardcoded on my page, The page which contains large data is taking around 2 3 seconds to load.

A weird pause is there before every page load.

[JulioOrellana]

you can place duration in <Router duration={50}>

[Blapi]

Be careful if you are not in a release mode because the app could respond very slowly when navigating.

On my end, my app has no worries with the navigation part. It may be slow but only in debug mode, and even more with the remote debugger active but otherwise it's fine.

And I'm working on an Android device.

[k30r88]

@AgNm Have you tried using <Tab> </Tab> instead just <Scene></Scene> ? It will be much faster. I experienced similar issues and found solutions after I checked example code from this repo with <Tab> </Tab>

[daviscabral]

I noticed that depending on what modules you are using - they might have enabled some kind of debugging during dev mode - that if you are not with the chrome inspector opened will for sure cause your app to be laggy - my experience on osx and xcode. Fixed getting rid of console (using a babel transform plugin), opening xcode or keeping the chrome opened all the time.

Could you push a sample app or make the Example app to behave like yours?

Also, could you show which other packages are you using?

[Blapi]

@AgNm what's the status there?

[AgNm]

I have added <Root> tag, the performance is improved somehow but still there is some lagging

<Provider store={store}> <StyleProvider style={getTheme(material)}> <Root> <Router toggle={false}/> </Root> </StyleProvider> </Provider>

[Blapi]

Even in a release mode?

[AgNm]

yes

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

[kuriel-trivu]

still present

[theautobot]

it is really slower than standard TabNavigator of react-native. why did you close the issue? :) you don't want people to use this lib?

[ankur-1989]

I used the example project and when I open the error modal from a tab view, it takes a lot of time to open it. Rendering is very slow in general when using react-native-router-flux. I am using version 4.2.0

[kuriel-trivu]

continues, lag of react native router flux is something important to consider avoiding use this tool.

[vijaychouhan-rails]

The same issue still in 2022