title: How to make certain tab (screen) skippable in material top bar?
body: <pre><code>import React from "react";
  import { Image } from "react-native";
  import { createMaterialTopTabNavigator } from "react-navigation-tabs";
  import { createAppContainer } from "react-navigation";
  import Profile from "../components/Profile/Profile";
  import Trips from "../components/Trips/MyTrips";
  import Wallet from "../components/Wallet/Wallet";
  import Booking from "../components/Booking/Booking";
  import Summary from "../components/Summary/Summary";
  import Colors from "../Shared/Colors";
  
  bottomBarConfig = {
    Summary: {
      screen: Summary,
      navigationOptions: {
        tabBarIcon: ({ focused }) =&gt; {
          return (
            &lt;Image
              source={
                focused
                  ? require("./../assets/images/home_active.png")
                  : require("./../assets/images/home_notactive.png")
              }
              size={25}
              color={focused ? Colors.Primary : "#808080"}
            /&gt;
          );
        },
  
        title: "Home"
      }
    },
    Trips: {
      screen: Trips,
      navigationOptions: {
        tabBarIcon: ({ focused }) =&gt; {
          return (
            &lt;Image
              source={
                focused
                  ? require("./../assets/images/mytrips_active.png")
                  : require("./../assets/images/mytrips_notactive.png")
              }
              size={25}
              color={focused ? Colors.Primary : "#808080"}
            /&gt;
          );
        },
  
        style: {}
      }
    },
    Booking: {
      screen: () =&gt; null,
      navigationOptions: {
        tabBarIcon: ({ focused }) =&gt; {
          return (
            &lt;Image
              source={require("./../assets/images/book.png")}
              size={55}
              style={{ height: 120 }}
  
              color={focused ? Colors.Primary : "#808080"}
            /&gt;
          );
        },
        showLabel: false,
        gesturesEnabled: false
      }
    },
    Wallet: {
      screen: Wallet,
      navigationOptions: {
        tabBarIcon: ({ focused }) =&gt; {
          return (
            &lt;Image
              source={
                focused
                  ? require("./../assets/images/mywallet_active.png")
                  : require("./../assets/images/mywallet_notactive.png")
              }
              size={25}
              color={focused ? Colors.Primary : "#808080"}
            /&gt;
          );
        }
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarIcon: ({ focused }) =&gt; {
          return (
            &lt;Image
              source={
                focused
                  ? require("./../assets/images/more_active.png")
                  : require("./../assets/images/more_notactive.png")
              }
              size={25}
              color={focused ? Colors.Primary : "#ff00ff"}
            /&gt;
          );
        }
      }
    }
  };
  
  const TabNavigator = createMaterialTopTabNavigator(bottomBarConfig, {
    tabBarPosition: "bottom",
    tabBarOptions: {
      showIcon: true,
      upperCaseLabel: false,
      activeTintColor: Colors.Primary,
      inactiveTintColor: "gray",
      pressColor: Colors.Primary,
      style: {
        backgroundColor: "white",
        border: "none"
      },
      labelStyle: {
        fontSize: 10,
        fontFamily: "Montserrat-Regular"
      },
      indicatorStyle: {
        backgroundColor: Colors.Primary
      }
    }
  });
  const App = createAppContainer(TabNavigator);
  
  export default App;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/FRrAR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FRrAR.jpg" alt="enter image description here"></a></p>
  
  <p>This is a photo of what I want to execute(not what I have right now), bottom bar with big button in the middle. </p>
  
  <p>For that I created screen for it and I will remove the label and style the image. But the problem I want user when swipes from tab 2 to tab 3 he actually goes to tab 4 not 3. I want this button to take user to another route.</p>
  
  <p>So I want tab 3 to be skippable, no screen for it, I want it as just a button.</p>
  
  <p>I am using create <code>createMaterialTopTabNavigator</code> because it has swipe feature and I already configured it to be positioned in bottom and I will be editing style of button in middle, just need to make skippable.</p>