React-navigation tabbar larger icon in the middle

Question

Please feel free to point me in the correct direction if this has been answered elsewhere, but I can't find it via here, or Google. Maybe I just don't know this correct name for this thing?

I am currently working with React-navigation (for react-native) and I wonder if it is possible to make one icon in the center of the tab bar larger than the others, in particular with transparency behind it when the page scrolls.

Mock up here for an example: Larger icon in middle overlaying scrollable area of screen

Does anybody if this is possible with this library, and how it might be achieved?

I was also thinking to try out the Wix library react-native-navigation once they have actually released a version which isn't broken, buggy, actually comes with accurate documentation, and isn't broken with the current version of react-native. (it's a bit of a disaster area there right now, but it looks very good so I'm keen to try it once it actually works again), so is it possible with their library and I'll just have to wait to try it out?

Answer 1

I was able to create a similar style with the following configuration:

export const Tabs = TabNavigator({
  Profile: {
    screen: ProfileStack,
    navigationOptions: {
      title: 'Profile',
      tabBarLabel: 'Profile',
      tabBarIcon: ({tintColor}) => <Icon name="ios-settings-outline" 
      type="ionicon" size={33} color={tintColor}/>
    }
  },
  Charities: {
    screen: Charities,
    navigationOptions: {
      title: 'Browse',
      tabBarLabel: 'Browse',
      tabBarIcon: ({tintColor}) => 
      <View style={{
          height: 80,
          width: 80,
          borderRadius: 100,
          backgroundColor: '#FE6D64',
          paddingTop: 15}}>
        <Icon name="ios-heart-outline" type="ionicon" size={45} 
         color{tintColor}/>
      </View>
    }
  },
  Account: {
    screen: AccountStack,
    navigationOptions: {
      title: 'Account',
      tabBarLabel: 'Account',
      tabBarIcon: ({tintColor}) => <Icon name="connectdevelop" type="font-
      awesome" size={25} color={tintColor}/>
    }
  }
}, {
  tabBarOptions: {
    activeTintColor: '#84E1BF',
    inactiveTintColor: 'white',
    labelStyle: {
      fontSize: 12
    },
    style: {
      backgroundColor: '#283940'
    },
    showLabel: false
  }
});

The Charities tab extends outside the tabbar because the tabBarIcon is wrapped in a View component with a height greater than that of the tabbar. The circular shape is then made with borderRadius:100.

There may be an better way to do this, but this was pretty straighforward.

TabBar Image