So I have this requirement. To make tab navigation with this exact appearance:

[![This is the goal](https://i.stack.imgur.com/Yv8Ja.png)](https://i.stack.imgur.com/Yv8Ja.png)
I had no problem styling the tab bar with the gradient and the buttons. I created my own custom one with this code:

```
export default createBottomTabNavigator({
  (... routes here)
}, {
  initialRouteName: "Inspiration",
  tabBarComponent: props => <BottomTabBar {...props} />
})

```

But now I'm having trouble with the middle button. My bar looks like this:

[![This is how it looks now](https://i.stack.imgur.com/IMVAD.png)](https://i.stack.imgur.com/IMVAD.png)

If I remove the custom tab bar removing this line:

```
tabBarComponent: props => <BottomTabBar {...props} />

```

Then now my middle button looks how it should, but of course, all of the other styles are missing:

[![Not close enough](https://i.stack.imgur.com/9SEww.png)](https://i.stack.imgur.com/9SEww.png)

This is how my BottomTabBar component looks right now:

```
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

const iconBag = require("./images/bag.png");

export default function BottomTabBar(props: TabBarBottomProps) {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { routes, index: activeRouteIndex } = navigation.state;

  function renderTabBarButton(routeIndex, route) {
    const isRouteActive = routeIndex === activeRouteIndex;
    const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;

    if (route.key == "Bag")
      return <Image style={{ width: 100, height: 100 }} source={iconBag} />;
    return (
      <TouchableOpacity
        key={routeIndex}
        style={styles.tabButton}
        onPress={() => onTabPress({ route })}
        onLongPress={() => onTabLongPress({ route })}
        accessibilityLabel={getAccessibilityLabel({ route })}
      >
        {renderIcon({ route, focused: isRouteActive, tintColor })}
        <Text style={styles.tabText}>{getLabelText({ route })}</Text>
      </TouchableOpacity>
    );
  }

  return (
    <LinearGradient colors={["#FFFFFF", "#DEDEDE"]} style={styles.container}>
      {routes.map((route, routeIndex) => renderTabBarButton(routeIndex, route))}
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#C4C4C4"
  },
  tabButton: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  tabText: {
    fontFamily: "Source Sans Pro",
    fontSize: 11,
    color: "#454545",
    marginTop: 1
  }
});

```

What can I do? Any help will be really much appreciated!