title: React native Bottom Tab Bar style adding bump
body: <p>Does someone know how to style the Bottom Tab Bar , in order to have something like this ?</p>
  
  <p><a href="https://i.stack.imgur.com/XjsGC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XjsGC.png" alt="Bottom Tab Bar"></a></p>
  
  <p>I'm able to design every item and to design also the entire Bottom bar to add radius on left and right but the difficult part is the little bump above the camera icon, I don't know how to do that</p>
  
  <p>My Navigation file looks like this :</p>
  
  <pre><code>const TabNavigator = createMaterialBottomTabNavigator(
  {
      Home: {
          screen: HomeScreen,
          navigationOptions: {
              tabBarIcon: ({tintColor}) =&gt; (tintColor === Color.primary ?
                      &lt;Image source={home_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
                      :
                      &lt;Image source={home_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
              ),
          }
      },
      Cart2: {
          screen: HomeScreen,
          navigationOptions: {
              tabBarIcon: ({tintColor}) =&gt; (tintColor === Color.primary ?
                      &lt;Image source={ranking_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
                      :
                      &lt;Image source={ranking_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
              ),
          }
      },
      Cart3: {
          screen: HomeScreen,
          navigationOptions: {
              tabBarIcon: ({tintColor}) =&gt; (tintColor === Color.primary ?
                      &lt;Image source={photo_icon} resizeMode="contain"
                             style={{
                                 width: 25,
                                 height: 25,
                                 position: 'absolute',
                                 top: -10,
                                 tintColor: tintColor,
                                 marginBottom: 20
                             }}/&gt;
                      :
                      &lt;Image source={photo_icon} resizeMode="contain"
                             style={{width: 25, height: 25, tintColor: tintColor}}/&gt;
              ),
          }
      },
      Cart4: {
          screen: HomeScreen,
          navigationOptions: {
              tabBarIcon: ({tintColor}) =&gt; (tintColor === Color.primary ?
                      &lt;Image source={gallery_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
                      :
                      &lt;Image source={gallery_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
              ),
          }
      },
      Cart5: {
          screen: HomeScreen,
          navigationOptions: {
              tabBarIcon: ({tintColor}) =&gt; (tintColor === Color.primary ?
                      &lt;Image source={mission_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
                      :
                      &lt;Image source={mission_icon} resizeMode="contain"
                             style={{width: 20, height: 20, tintColor: tintColor}}/&gt;
              ),
          }
      },
  },
  {
      initialRouteName: "Home",
      activeColor: Color.primary,
      barStyle: {
          backgroundColor: Color.white,
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          borderBottomStartRadius: 30,
          borderBottomEndRadius: 30,
          overflow: 'hidden'
      },
  },
  );
  export default createAppContainer(TabNavigator)
  </code></pre>
  
  <p>I'm using this library <a href="https://github.com/react-navigation/material-bottom-tabs" rel="nofollow noreferrer">material-bottom-tabs</a> with Expo</p>