title: React Native - React Navigation slow transitions when nesting navigators
body: <p>I am building a cross-platform native application using react-native and using react-navigation for navigating to and from screens and managing navigation state using redux. The problem arises when I am nesting my navigators.</p>
  
  <p>For example, I am using Stack Navigator as the default navigator for my app. </p>
  
  <pre><code>export const DefaultNavigate = new StackNavigator(
  {
          Login: {
              screen: LoginScreen,
          },
          Home: {
              screen: AppDrawerNavigate,
          },
          AppTabNav: {
              screen: AppTabNavigator,
          },
      }
  );
  </code></pre>
  
  <p>where my first screen is loginscreen and home screen is a drawer navigator.</p>
  
  <pre><code>const AppDrawerNavigate = new DrawerNavigator(
  {
          InProcess: {
               screen: InProcess,
          },
          Machine: {
               screen: Machine
          },
          Settings: {
               screen: Settings
          },
          Logout: {
               screen: Logout
          },
          ContactUs: {
               screen: ContactUs
          }
      }
  );
  </code></pre>
  
  <p>When the user clicks on the Machine in the Drawer Navigator I am navigating the screen to AppTabNav declared in DefaultNavigator. </p>
  
  <pre><code>const AppTabNavigator = new TabNavigator(
      {
          MachineList: {
              screen: MachineList,
          },
          CalendarView: {
              screen: CalendarView,
          }
      },
  );
  </code></pre>
  
  <p>which is a tab navigator with two screens as the name suggests one is using listview to display list and the other is using the calendarview to display calendar. There are around only 30-40 items in my dataSource of listview so rendering them is a piece of cake for listview. But when there is navigation from any screen to Machine screen from DrawerNavigator there is lag of 1-2sec and js thread drops to -2.1 which is really slowing down the transition.<a href="https://i.stack.imgur.com/0r2pG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0r2pG.png" alt="This drop is frequent whenever I am nesting tab navigator within drawer navigator"></a></p>
  
  <p>and if someone need the code for Machine screen in drawer navigator here it is,</p>
  
  <pre><code>componentDidMount() {
      if(this.state.loaded)
          this.props.navigation.dispatch({ type: MACHINE});
  }
  render() {
      return &lt;AppActivityIndicator /&gt;
  }
  </code></pre>
  
  <p>the following is my reducer code which is handling navigation of the screen,</p>
  
  <pre><code>case types.MACHINE:
    nextState = DefaultNavigate.router.getStateForAction(
      NavigationActions.reset({
        index: 1,
        actions: [
          NavigationActions.navigate({ routeName: 'Home' }),
          NavigationActions.navigate({ routeName: 'AppTabNav' })
        ]
      }),
      state
    );
  </code></pre>
  
  <p>the following is the render method of MachineList screen in drawer navigator,</p>
  
  <pre><code>render() {
      return (
          &lt;View style={styles.container}&gt;
              &lt;AppStatusBar /&gt;
              &lt;ListView
                  initialListSize={10}
                  dataSource={this.state.dataSource}
                  renderRow={this.renderRow.bind(this)}
                  enableEmptySections={true}
              /&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>Please help me out of this one. What am I doing wrong?</p>
  
  <p>dependemcies</p>
  
  <pre><code>"dependencies": {
      "native-base": "^2.3.1",
      "react": "16.0.0-alpha.12",
      "react-devtools": "^2.5.0",
      "react-native": "0.47.1",
      "react-native-calendars": "^1.5.8",
      "react-native-vector-icons": "^4.3.0",
      "react-navigation": "^1.0.0-beta.11",
      "react-redux": "^5.0.6",
      "redux": "^3.7.2",
      "redux-logger": "^3.0.6",
      "redux-persist": "^4.9.1",
      "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
      "babel-jest": "20.0.3",
      "babel-preset-react-native": "3.0.0",
      "jest": "20.0.4",
      "react-test-renderer": "16.0.0-alpha.12"
  },
  </code></pre>