React-navigation: how to style a big middle button in tab navigation?

Question

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

I had no problem styling the tab bar with the gradient and the buttons. I created my own

Answer 1

---

You can try my solution

const TabNavigator = createBottomTabNavigator(
{
Top: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      
    ),
  },
},

New: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      
    ),
  },
},
Ask: { // big plus icon in the middle
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      
        
      
    ),
  },
},
Show: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      
    ),
  },
},
Jobs: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      
    ),
  },
},
},
{
tabBarOptions: {
  activeTintColor: '#FF6F00',
  inactiveTintColor: '#8997B0',
  showIcon: true,
  showLabel: false,
  style: {
    backgroundColor: '#f1f6f9',
  },
},
},
);