How can i create a transparent background in react navigation 5.x?

Question

I changed the background color to make it more obvious. I want the red container to become transparent.

Is there any way to achieve this? I am using react-navigation 5 and I created a custom bottom tab bar according to Bottom-tab-navigator

The code I am using for the bottom bar is the following

import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from 'styles/colors';
import TabBarItem from './TabBarItem/TabBarItem';
const homeIcon = require('assets/maps.png');

export enum Item {
  Home,
  ProfileView,
}

const DashboardTabBar: React.FC<{}> = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <TabBarItem
              icon={homeIcon}
              isFocused={isFocused}
              onPress={onPress}
              onLongPress={onLongPress}
              options={options}
              key={route.key}
            />
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingBottom: 18,
    backgroundColor: 'red', // I tried with 'transparent' here, but i see a white background instead of transparent
  },
  innerContainer: {
    height: 60,
    backgroundColor: colors.GREY_L_10,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: colors.GREY,
  },
});

export default DashboardTabBar;

As far as I looked in the code I couldn't find any way to make it transparent.

Answer 1

Somewhere else in your code, you have a component that uses your DashboardTabBar component. You should add a tabBarOptions prop with a style object to the Tab.Navigator component, like so:

    <Tab.Navigator
      tabBar={...}
      tabBarOptions={{
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          elevation: 0, <----to get rid of a shadow problem on Android
        },
      }}>
    { /* ...your screens go here */ }
</Tab.Navigator>

I have successfully done this on both iOS and Android. Personally, it doesn't look good for my app.

Answer 2

By default, Navigator returned from createBottomTabNavigator does not overlap screens with TabBar. That being said, even though your TabBar is transparent, your Screen ends where TabBar starts. Screen does not go behind TabBar

Luckily all you need to do is to add position: 'absolute', bottom: 0, left: 0, right: 0 to your TabBar container style (the one you apply backgroundColor: 'transparent' to)

Answer 3

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingBottom: 18,
    backgroundColor: 'transparent',
  },
  innerContainer: {
    height: 60,
    backgroundColor: colors.GREY_L_10,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: colors.GREY,
  },
});