title: React Navigation: Bottom Tabs style
body: <p>How to apply a style on the bottom tab so that it looks similar to this model?</p>
  
  <p><a href="https://i.stack.imgur.com/Ig4pn.png" rel="nofollow noreferrer">Image</a></p>
  
  <pre><code>&lt;HomeTabs.Navigator
          screenOptions={({route})=&gt;({
              tabBarIcon: ({color, size})=&gt;{
                  const {name} = icons[route.name]
                  return &lt;Ionicons name={name} size={size} color={color}/&gt;
              }
          })}
          tabBarOptions={
              {
                  style: {
                      height: 50,
                      width: 300,
                      flexDirection: 'column',
                      alignSelf: 'center',
                      elevation: 2,
                      borderTopStartRadius: 5,
                      borderTopEndRadius: 5,
  
                  },
                  activeTintColor: '#845EC2',
              }
          }
      &gt;
  </code></pre>
  
  <p>result: </p>
  
  <p><a href="https://i.stack.imgur.com/mx6QP.png" rel="nofollow noreferrer">Result</a></p>
  
  <p>There is no such container</p>