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

user_3009752 0
Viewed 3919

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

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.

react-navigation-bottom-tab react-navigation-v5 react-navigation react-native
4 Answers

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. enter image description here enter image description here

user_73658660

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)

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

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>

enter image description here

user_115836160
Related