React native works very slow on android

Question

By \'Very slow\' i mean, it loads a single transition about 5 second despite this is just a simple example app.

Here is the whole app RN code

Take a look at

Answer 1

Turn logging off in production

In your entry file try adding the following snippet:

if (!__DEV__) {
  console.log = () => {};
}

This will allow console logs to work during development, but when you release for production it is just an empty function call.

Answer 2

This saved me a lot of time:

• Search your code for "console.log", and comment them before testing.
• 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.

This is how you disable JS Dev Mode on Android:

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 :)

Source: https://github.com/aksonov/react-native-router-flux/issues/199

Answer 3

What version of React Native are you running? And what phone are you running it on?

If you run React Native on an Android Emulator, it'll be pretty slow. Also, if you have chrome debugging on, it slows the app down a LOT.

I'm running a fairly simple React Native app on my Samsung Galaxy s4 device, and it runs fairly quickly (animations run pretty smoothly too).

some example code that I run (a sidedrawer and main view with animation):

_renderCancel: function(){
  if (this.state.showView) {
    return (
      this.props.view
    );
  } else {
     return ;
   }
},

render: function() {

var menu = <Menu 
              closeDrawer={this.closeDrawer}
              navigator={this.props.navigator} 
              modifyOnClose={this.modifyOnClose} />;


return (
  <Drawer
    ref="drawer"
    onClose={this.onClose}
    type={this.state.drawerType}
    animation={this.state.animation}
    openDrawerOffset={this.state.openDrawerOffset}
    closedDrawerOffset={this.state.closedDrawerOffset}
    panOpenMask={this.state.panOpenMask}
    panCloseMask={this.state.panCloseMask}
    relativeDrag={this.state.relativeDrag}
    panStartCompensation={this.state.panStartCompensation}
    openDrawerThreshold={this.state.openDrawerThreshold}
    content={menu}
    styles={drawerStyles}
    disabled={this.state.disabled}
    tweenHandler={this.tweenHandler}
    tweenDuration={this.state.tweenDuration}
    tweenEasing={this.state.tweenEasing}
    acceptDoubleTap={this.state.acceptDoubleTap}
    acceptTap={this.state.acceptTap}
    acceptPan={this.state.acceptPan}
    changeVal={this.state.changeVal}
    negotiatePan={false}
    side={this.state.rightSide ? 'right' : 'left'}
    >
    <View>
      <CustomToolBar onPress={this.openDrawer}/> 
      {this._renderCancel()}   
    </View>
  </Drawer>

);
},

this runs fairly quickly on my device.