CODEWITHSUNDEEP
react-native
stkvtflw
stkvtflw

Reputation: 13587

React native works very slow on android

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 onPressFeed

Upvotes: 17

Views: 24125

Answers (3)

Asleepace
Asleepace

Reputation: 3745

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.

Upvotes: 7

Tiberiu Mihai
Tiberiu Mihai

Reputation: 721

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

Upvotes: 14

Randy Song
Randy Song

Reputation: 583

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.

Upvotes: 2

Related Questions