React Navigation - custom screen navigate

Question

I'm using react navigation for navigate screen. I used nested navigation, TabNavigator and StackNavigator .

As I know when swiping around, the screen are follow by what we set at on TabNavigator .

Normally Screen Followed

One > Two > Three > Four > Five

What I need

One > Two > Four > Five

Reason I skip Three is I want this screen is call by this.props.navigation.navigate('ThreeScreen') , but I still wanted it on the navigation bar. Is it possible ? or have any other suggestion can do like this ?

const mainNav = TabNavigator({
  One: { 
    screen: OneScreen,
  },
  Two: {
   screen: TwoScreen,
  },
  Three: {
   screen: ThreeScreen,
  },
  Four: {
   screen: FourScreen,
  },
  Five: {
   screen: FiveScreen,
  },
} );

export const mainStack = StackNavigator({
  Home: { screen: mainNav},
  Content: { screen: ContentScreen },
});

Answer 1

Add gesturesEnabled in navigationOptions either :

Inside component

class ThreeScreen extends React.Component {

     static navigationOptions= {
       gesturesEnabled: false
     };

}

Or directly, inside the routing configuration

const mainNav = TabNavigator({
   //....
  Three: {
   screen: ThreeScreen,
   navigationOptions: {
      gesturesEnabled: false,
   }
  },
 //....

} );