Stacknavigator transition extremely slow

[natashache]

Hi,

I use nested navigator structure and have noticed that the transition between some screens are very, very slow.

Here's the setup:

export const MainNavigator = TabNavigator({
  Search: { screen: Search},
  Explore: { screen: Explore },
  CourseNavigator: { screen: CourseNavigator },
  MyProfile: { screen: MyProfile }
}, {
  initialRouteName: 'CourseNavigator',
  navigationOptions: {
    tabBar: {
      visible: false
    },
    header: {
      visible: false
    }
  },
})

export const CourseNavigator = StackNavigator({
    MyCourses: { screen: MyCourses },
    PlayerNavigator: { screen: PlayerNavigator }
  }, {
  headerMode: 'screen'
})

export const PlayerNavigator = StackNavigator({
    CoursePage: { screen: CoursePage },
    Player: { screen: Player }
  }, {
    headerMode: 'screen',
    mode: 'modal'
})

So PlayerNavigator is nested under CourseNavigator, which is under MainNavigator.

What's moving very slow is the transition between the Mycourses screen in CourseNavigator and the CoursePage screen in PlayerNavigator. It takes two full seconds for the screen to change.

The code for the transitioning is very straightforward:

  goToCourse(course) {
    const {navigate} = this.props.navigation
    navigate('PlayerNavigator')
    this.props.setCurrentCourse(course)
  }

// And then in the render function...

        <Button transparent small
          onPress={ () => this.goToCourse(course) }>
          <Icon name='ios-arrow-forward' />
        </Button>

Wondering if anybody has experienced similar slowness and what could be the potential cause?

[chandu0101]

Wondering if anybody has experienced similar slowness

I am also facing similar issue now (iOS Simulator) , it used to be fast :s

[GertjanReynaert]

Without reading to much into the issue, you might want to check debug > slow animations in your ios simulator. cmd+t activates it, and so you could have triggered it by accident when you meant to create a new tab in a browser for example.

[natashache]

@GertjanReynaert Thanks. Unfortunately this is not the issue. Slow animations is turned off. And I'm experiencing the same slowness on both ios simulator and iphone. In general, I've found the transition of stackNavigator to be slower than tabNavigator. But this particular transition mentioned above is slow to the extreme. If I don't find a solution, I'll just have to abandon this library all together, because this creates terrible user experience.

[jurassix]

@natashache - I'm having similar performance issues and am able to workaround them by disabling Remote JS Debugging. I'm not seeing the issue with Hot or Live Reloading turned on.

Hope that helps.

[natashache]

@jurassix thanks for the suggestion. Unfortunately this is not related to remote debugging. The slowness is present no matter whether I use remote debug or not.

[sercanov]

Having the same, TabNavigator is fast as flash but StackNavigator like kind a have delay before pushing screens. Same on pressing the Back button, but have no issues when swiping back.

Behaving like doing a lot of calculations on JS thread, perf monitor also show tremendous FPS drop when pushing screens.

• tested on iOS only
• RN - 0.42.3
• RNav - beta7
• using with redux

[nico1510]

#706 may be related

[sercanov]

I dont think it's related @nico1510

I have performance problems on simulator too, here are some key points;

• Have 3 StackNavigators nested in TabNavigator with 3 tabs.
• Have a redux action call in one of StackNavigator route's componentWillUnmount that resets the component to initialState.
• If I comment out this line it seems to fast a bit. But the reset action is very light, don't think it has impact, doing fine with NavigationExperimental
• I think componentWillUnmount doesn't fire immediately and if I navigate to another screen before it fires, the StackNavigation becomes completely unresponsive. Logs shows that it fires the navigate action but doesn't mount the component so touch responders are not responding.
• TabNavigator still works when these freezes happen.

I'll try to make an isolated project to show this.

[cbrevik]

I agree that it navigates very slow.

Even with a simple setup that only includes one or two views, that navigates to each other or to themselves. Even with something as simple as the one in this test app: https://github.com/cbrevik/react-navigation-test

[vishim]

The Tab bar and the header are horribly slow to update on Android. Slow, even on a real device with a release build 😞

I have a Stack -> Tab -> Stack nesting and using Icons from native-base

ios is better

Any help would be appreciated !

[vinhtq]

On Android it even renders page twice

[joncursi]

I'm getting the same slowness on Android. iOS is decently fast, but Android takes has 2+ second delays

[edo1493]

I have a particularly slow transition on a single screen (iOS), which is rendering a chart with svg (but this is on the js thread, so why would be a problem?).

[andfs]

I'm facing the same problem on a real android device...