How to make certain tab (screen) skippable in material top bar? - react-native

Question

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 }) => {
return (
<Image
source={
focused
? require("./../assets/images/home_active.png")
: require("./../assets/images/home_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#808080"}
/>
);
},
title: "Home"
}
},
Trips: {
screen: Trips,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/mytrips_active.png")
: require("./../assets/images/mytrips_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#808080"}
/>
);
},
style: {}
}
},
Booking: {
screen: () => null,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={require("./../assets/images/book.png")}
size={55}
style={{ height: 120 }}
color={focused ? Colors.Primary : "#808080"}
/>
);
},
showLabel: false,
gesturesEnabled: false
}
},
Wallet: {
screen: Wallet,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/mywallet_active.png")
: require("./../assets/images/mywallet_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#808080"}
/>
);
}
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ focused }) => {
return (
<Image
source={
focused
? require("./../assets/images/more_active.png")
: require("./../assets/images/more_notactive.png")
}
size={25}
color={focused ? Colors.Primary : "#ff00ff"}
/>
);
}
}
}
};
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;
This is a photo of what I want to execute(not what I have right now), bottom bar with big button in the middle.
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.
So I want tab 3 to be skippable, no screen for it, I want it as just a button.
I am using create createMaterialTopTabNavigator 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.