Native Base Tabs content transparent background - react-native

Question

I am using Native Base tabs as following :
<ImageBackground
source={{uri:imageURl}}
style={{ flex: 1 }}
resizeMode="cover">
<Tabs tabBarUnderlineStyle={{ backgroundColor: "#000000" }}
style={{backgroundColor:'transparent'}}>
<Tab heading={'Tab 1'}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text>Tab 1 content</Text>
</View>
</Tab>
</Tabs>
<Tabs tabBarUnderlineStyle={{ backgroundColor: "#000000" }}>
<Tab heading={'Tab 2'}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text>Tab 2 content</Text>
</View>
</Tab>
</Tabs>
</ImageBackground>
The content of the Tab has a transparent background so it should be an image as the parent Image background but it has a white color , when i changed the transparent in the View inside the tab to red it changed ! i also tried removing the tabs and adding a text instead i saw the background normally.
the question is:how to make the content of the Tab transparent not white.
here is the example on snack: Native Base Tabs

Answer 1

I'm not sure if this is what you want?
import * as React from 'react';
import { Text, View, StyleSheet,ImageBackground } from 'react-native';
import { Tab, Tabs } from 'native-base';
export default function App() {
const imageUrl={ uri: "https://reactjs.org/logo-og.png" };
return (
<View style={styles.container}>
<ImageBackground
source={imageUrl}
style={styles.image}
>
<Tabs tabBarUnderlineStyle={{ backgroundColor: "transparent" }}>
<Tab heading={'Tab 1'} style={{flex:1,backgroundColor:'transparent'}} >
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text style={{color:"white"}}>Tab 1 content</Text>
</View>
</Tab>
<Tab heading={'Tab 2'} style={{flex:1,backgroundColor:'transparent'}}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text style={{color:"white"}}>Tab 2 content</Text>
</View>
</Tab>
</Tabs>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
}
});