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.

Can you please share the code generating the bottom tabs? Where do you set the red color? — Zekros Admines, Apr 01 '20 at 22:36
@user3009752 what do you expect to see behind the background? An image, some color or maybe the root view background splash screen? — Christos Lytras, Apr 04 '20 at 10:31
In the background i have a vertical scrollview, which is a long list. If i have an item behind the react native bottom navigator, i want to be visible behind it — user3009752, Apr 04 '20 at 13:36

Ben Butterworth · Accepted Answer · 2020-04-05T08:37:57.070

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.

score 3 · Answer 2 · answered Apr 05 '20 at 00:49

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)

score 0 · Answer 3 · answered Apr 02 '20 at 06:10

0

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

answered Apr 02 '20 at 06:10

Rajan

1,512
2
14
18

Thank you for the reply. I added the red color to make it more clear. I have already tried with transparent, but without any luck. I see a white background instead of transparent – user3009752 Apr 02 '20 at 07:54
That white colour must be your main screen background colour. Try to set it some other colour and see. – Rajan Apr 02 '20 at 07:55

score 0 · Answer 4 · answered Sep 30 '21 at 13:58

For React Navigation v6, you would want to set up screenOptions on the TabNavigator. (I use it in combination with custom / transparent bottom tab bar).

import {
  BottomTabBar,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

<Tab.Navigator
      screenOptions={{
        tabBarStyle: {backgroundColor: 'blue'},
      }}
      tabBar={props => {
        return (
          <View>
            <BottomTabBar {...props} />
          </View>
        );
      }}
      initialRouteName={SCREEN_NAMES.APP.HOME_TAB}
      ...
  </Tab.Navigator>

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

4 Answers4