MaterialBottomTabNavigator / React-Native / React导航

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'}
});