MaterialBottomTabNavigator / React-Native / React Navigation - reactjs

Question

im using the Material-Bottom-Tab-Navigatior and would like to get a transparent bar background however my result atm looks like this
This is the code
import React from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Feather';
import HomePage from '../components/whatsOn/HomePage';
import ComingSoon from '../components/comingSoon/ComingSoon';
import Favourites from '../components/favourites/Favourites';
import config from '../static/config.json';
import texts from '../static/texts.json';
const { gradient } = config.colors;
const { ComingSoonTitle, HomeTitle, FavouritesTitle } = texts.Tabs;
const lang = config.language;
export const TabStack = createMaterialBottomTabNavigator({
comingSoon: {
screen: ComingSoon,
activeTintColor: gradient.primary,
navigationOptions: {
tabBarColor: 'transparent',
tabBarLabel: ComingSoonTitle[lang],
tabBarIcon: ({ tintColor }) => (<Icon name="calendar" color={tintColor} size={24} />),
},
},
whatsOn: {
screen: HomePage,
activeTintColor: gradient.primary,
navigationOptions: {
tabBarColor: 'transparent',
tabBarLabel: HomeTitle[lang],
tabBarIcon: ({ tintColor }) => (<Icon name="film" color={tintColor} size={24} />),
},
},
favourites: {
screen: Favourites,
activeTintColor: gradient.primary,
navigationOptions: {
tabBarColor: 'transparent',
tabBarLabel: FavouritesTitle[lang],
tabBarIcon: ({ tintColor }) => (<Icon name="star" color={tintColor} size={24} />),
},
},
}, {
shifting: true,
initialRouteName: 'whatsOn',
order: ['comingSoon', 'whatsOn', 'favourites'],
tabBarPosition: 'bottom',
});
this TabStack is nested inside this stack:
export const HomeStack = createStackNavigator({
Tabs: {
screen: TabStack,
navigationOptions: {
title: 'Compeso',
header: props => <CustomHeader {...props} />,
headerStyle: {
backgroundColor: 'transparent',
},
headerTitleStyle: {
fontSize: 24,
fontWeight: '500',
color: colors.typography,
},
headerRight: MenuIcon,
headerLeft: SearchIcon,
animationEnabled: true,
},
},
Drawer: {
screen: MoreInfromation,
},
}, {
initialRouteName: 'Tabs',
cardStyle: { backgroundColor: 'transparent' },
});
the HomeStack is nested in a switchNavigator
export default class Router extends Component {
render() {
return (
<MainStack />
);
}
}
const MainStack = createSwitchNavigator({
Auth: LoginStack,
Home: HomeStack,
},
{
initialRouteName: 'Home',
});
This MainStack is getting rendered in my App.js
I put this tab navigator into a stack navigator and each component that gets displayed shows a scroll view with a height of 815 pixels to make sure the background is behind the bar.
Can someone advice ?
Thanks in advance

Answer 1

You need to include barStyle.
So, for transparent the style will be something like this:
barStyle: {backgroundColor:'transparent'}
In your code it will look something like this(included at bottom).
export const TabStack = createMaterialBottomTabNavigator({
comingSoon: {
...
},
...
}, {
shifting: true,
initialRouteName: 'whatsOn',
order: ['comingSoon', 'whatsOn', 'favourites'],
tabBarPosition: 'bottom',
barStyle: {backgroundColor:'transparent'}
});