How do you make the react-native react-navigation tab bar transparent

Question

Is there a way to make the tab bar transparent? I tried the following but it just showed a white background. Do I need to implement my own tabBarComponent? If so, is there any documentation on that class and what interface I need to implement?

const MainTabNavigator = TabNavigator(
  {
    MessageCenter: { screen: MessageCenterStack },
    Camera: { screen: CameraStack },
  },
  {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      style: {
        backgroundColor:  'transparent',
      },
    }
  }
);

Answer 1

I have to set position absolute and give it a left right and bottom for it the backgroundColor transparent to take effect.

tabBarOptions: {
  showIcon: true,
  showLabel: false,
  lazyLoad: true,
  style: {
    backgroundColor: 'transparent',
    borderTopWidth: 0,
    position: 'absolute',
    left: 50,
    right: 50,
    bottom: 20,
    height: 100
  }
}