title: React-navigation: how to style a big middle button in tab navigation?
body: <p>So I have this requirement. To make tab navigation with this exact appearance:</p>
  
  <p><a href="https://i.stack.imgur.com/Yv8Ja.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Yv8Ja.png" alt="This is the goal"></a>
  I had no problem styling the tab bar with the gradient and the buttons. I created my own custom one with this code:</p>
  
  <pre><code>export default createBottomTabNavigator({
    (... routes here)
  }, {
    initialRouteName: "Inspiration",
    tabBarComponent: props =&gt; &lt;BottomTabBar {...props} /&gt;
  })
  </code></pre>
  
  <p>But now I'm having trouble with the middle button. My bar looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/IMVAD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IMVAD.png" alt="This is how it looks now"></a></p>
  
  <p>If I remove the custom tab bar removing this line:</p>
  
  <pre><code>tabBarComponent: props =&gt; &lt;BottomTabBar {...props} /&gt;
  </code></pre>
  
  <p>Then now my middle button looks how it should, but of course, all of the other styles are missing:</p>
  
  <p><a href="https://i.stack.imgur.com/9SEww.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9SEww.png" alt="Not close enough"></a></p>
  
  <p>This is how my BottomTabBar component looks right now:</p>
  
  <pre><code>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 &lt;Image style={{ width: 100, height: 100 }} source={iconBag} /&gt;;
      return (
        &lt;TouchableOpacity
          key={routeIndex}
          style={styles.tabButton}
          onPress={() =&gt; onTabPress({ route })}
          onLongPress={() =&gt; onTabLongPress({ route })}
          accessibilityLabel={getAccessibilityLabel({ route })}
        &gt;
          {renderIcon({ route, focused: isRouteActive, tintColor })}
          &lt;Text style={styles.tabText}&gt;{getLabelText({ route })}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  
    return (
      &lt;LinearGradient colors={["#FFFFFF", "#DEDEDE"]} style={styles.container}&gt;
        {routes.map((route, routeIndex) =&gt; renderTabBarButton(routeIndex, route))}
      &lt;/LinearGradient&gt;
    );
  }
  
  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
    }
  });
  </code></pre>
  
  <p>What can I do? Any help will be really much appreciated!</p>