I am using Tab Navigation which contains two screen, I need to make the background of each screen transparent so the app background is visible.

This is how it looks right now, I want the background you can see on Tabs navigator be visible on the entire screen.

This is Tabs ponent:

const Tabs = props => {

return(
    <Background source={require('../../assets/bg_image.png')}>
        <Tab.Navigator screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                 if (route.name === 'Notifications') {
                    return <Image style={styles.tabIcon} source={require('../../assets/notifications_icon.png')}/>
                }else if(route.name === 'Profile'){
                    return <Image style={styles.tabIcon} source={require('../../assets/profile_icon.png')}/>
                }
            },
            tabBarInactiveTintColor: '#ffffff',
            tabBarActiveTintColor: 'red',
            tabBarStyle: {
                backgroundColor: '#D3D3D338',
            },
            tabBarShowLabel: false,
            headerShown: false,
            
            })}
        >
            <Tab.Screen name="Notifications" ponent={Notifications}></Tab.Screen>
            <Tab.Screen name="Profile" ponent={Profile}></Tab.Screen>
        </Tab.Navigator>
    </Background>
);
}

And this is Notifications ponent:

import {View, Text, StyleSheet} from 'react-native';

const Notifications = props => {
    return(
        <View style={styles.content}>
            
        </View>
    );
}

const styles = StyleSheet.create({
content:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00000000'
}
});
export default Notifications;

This is Background ponent:

import {ImageBackground, StyleSheet} from 'react-native';

const Background = props => {
    return(
        <ImageBackground source={props.source} resizeMode="cover" style={{...styles.bgImage, width: '100%', height: '100%'}}>
            {props.children}
        </ImageBackground>
    );
};

const styles = StyleSheet.create({
    bgImage: {
        flex: 1
    },
    safeArea: {
        flex: 1, 
        width: '100%',
        justifyContent: 'center',
    }
});

export default Background;

I am using Tab Navigation which contains two screen, I need to make the background of each screen transparent so the app background is visible.

This is how it looks right now, I want the background you can see on Tabs navigator be visible on the entire screen.

This is Tabs ponent:

const Tabs = props => {

return(
    <Background source={require('../../assets/bg_image.png')}>
        <Tab.Navigator screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                 if (route.name === 'Notifications') {
                    return <Image style={styles.tabIcon} source={require('../../assets/notifications_icon.png')}/>
                }else if(route.name === 'Profile'){
                    return <Image style={styles.tabIcon} source={require('../../assets/profile_icon.png')}/>
                }
            },
            tabBarInactiveTintColor: '#ffffff',
            tabBarActiveTintColor: 'red',
            tabBarStyle: {
                backgroundColor: '#D3D3D338',
            },
            tabBarShowLabel: false,
            headerShown: false,
            
            })}
        >
            <Tab.Screen name="Notifications" ponent={Notifications}></Tab.Screen>
            <Tab.Screen name="Profile" ponent={Profile}></Tab.Screen>
        </Tab.Navigator>
    </Background>
);
}

And this is Notifications ponent:

import {View, Text, StyleSheet} from 'react-native';

const Notifications = props => {
    return(
        <View style={styles.content}>
            
        </View>
    );
}

const styles = StyleSheet.create({
content:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00000000'
}
});
export default Notifications;

This is Background ponent:

import {ImageBackground, StyleSheet} from 'react-native';

const Background = props => {
    return(
        <ImageBackground source={props.source} resizeMode="cover" style={{...styles.bgImage, width: '100%', height: '100%'}}>
            {props.children}
        </ImageBackground>
    );
};

const styles = StyleSheet.create({
    bgImage: {
        flex: 1
    },
    safeArea: {
        flex: 1, 
        width: '100%',
        justifyContent: 'center',
    }
});

export default Background;

• javascript
• java
• reactjs
• swift
• react-native

3 Answers 3

On the Tab.Navigator use a prop called "sceneContainerStyle" and set backgroundColor to transparent

An example below.

<ImageBackground style={{flex: 1}} source={{ uri: "https://reactjs/logo-og.png" }} resizeMode="cover">
        <Tab.Navigator
        sceneContainerStyle={{backgroundColor: 'transparent',}}
        screenOptions={({ route }) => ({
            tabBarStyle: {
                backgroundColor: 'transparent',
            },
        })}>
        <Tab.Screen name="Home" ponent={Test} options={{ 
            headerStyle: { backgroundColor: 'transparent' } , 
        }} />
        </Tab.Navigator>
    </ImageBackground>

What you need to do

sceneContainerStyle={{backgroundColor: 'transparent',}}

Attaching an image of the end result

Use rgba value for your background color: for example: rgba(255, 255, 255, 0.2) where 0.2 is the opacity range from 0 to 1

if you're using hex for color you can follow the color code for transparency here https://gist.github./lopspower/03fb1cc0ac9f32ef38f4