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

position: 'absolute' is a solution for this, but you may notice it'll not look perfectly with the android side, however working perfectly for the android side.

Finally, I found the solution to this after long hard work.

elevation: 0

Set this on tab bar style will fix this issue.

Example -

tabBarOptions={{
        showIcon: true,
        showLabel: true,
        activeTintColor: COLORS.tabSelected,
        inactiveTintColor: COLORS.tabNormal, 
        style: {
          backgroundColor:'transparent',
          borderTopWidth: 0,
          position: 'absolute',
          elevation: 0  // <-- this is the solution
        },
        labelStyle: {
          fontSize: 12,
        },
      }}>

Here are the output screenshots.

I finally got it working on android and ios by adding a container view for the custom tab bar component and make the container absolute positioned and leave the tab bar as it is

Here is the custom tab bar component

const TabBarComponent = (props) => (<BottomTabBar {...props} />)

Here is the tab bar options

{
    tabBarComponent: props => {
        return (
            <View style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
            }}>
                <TabBarComponent {...props} />
            </View>
        )
    },
    tabBarOptions: {
        style: {
            borderTopWidth: 0,
            backgroundColor: '#FFFFFF',
            borderTopRightRadius: 20,
            borderTopLeftRadius: 20,
            height: 55,
            paddingBottom: 5,
        }
    },
    initialRouteName: 'HomeScreen',
}

And the final result

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
  }
}