Estoy usando Tab Navigation que contiene dos pantallas, necesito hacer que el fondo de cada pantalla sea transparente para que el fondo de la aplicación sea visible.

Así es como se ve ahora, quiero que el fondo que puede ver en el navegador de pestañas sea visible en toda la pantalla.

Este es el componente de pestañas:

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

Y este es el componente de Notificaciones:

 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;

Este es el componente de fondo:

 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;