CODEWITHSUNDEEP
react-nativenative-base
Hassan Kandil
Hassan Kandil

Reputation: 1866

Native Base Tabs content transparent background

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

Upvotes: 0

Views: 2107

Answers (1)

高鵬翔
高鵬翔

Reputation: 2057

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

Upvotes: 1

Related Questions