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 component:

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" component={Notifications}></Tab.Screen>
            <Tab.Screen name="Profile" component={Profile}></Tab.Screen>
        </Tab.Navigator>
    </Background>
);
}

And this is Notifications component:

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 component:

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;

CodePudding user response：

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

CodePudding user response：

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