Menu
I'm just started learning about React Native.
Now I need help to customize my tabs. I'm using advanced tabs by Native Base.
I want to change this :
to be like this :
I've checked on the native base documentation for styling the tabs, but I dont know where to put these properties:
Here some of my code:
<Container>
<Header
style={styles.headerColor}
iosBarStyle='light-content'
>
<Left>
<Button transparent onPress={()=>this.openDrawer()}>
<Icon name='ios-menu' style={styles.icons}/>
</Button>
</Left>
<Body>
<Title style={styles.headerTitle}>INQUIRY LIST</Title>
</Body>
<Right>
<Button transparent>
<Icon name='ios-search' style={styles.icons}/>
</Button>
</Right>
</Header>
<Tabs activeTabStyle={{borderBottomColor: '#fff'}}>
<Tab heading={ <TabHeading><Text style={styles.tabsText}>ALL</Text></TabHeading>}>
{/* <Tab1 /> */}
</Tab>
<Tab heading={ <TabHeading><Text style={styles.tabsText}>NEW</Text></TabHeading>}>
{/* <Tab2 /> */}
</Tab>
<Tab heading={ <TabHeading><Text style={styles.tabsText}>RECEIVED</Text></TabHeading>}>
{/* <Tab3 /> */}
</Tab>
<Tab heading={ <TabHeading><Text style={styles.tabsText}>IN PROGRESS</Text></TabHeading>}>
{/* <Tab3 /> */}
</Tab>
<Tab heading={ <TabHeading><Text style={styles.tabsText}>COMPLETED</Text></TabHeading>}>
{/* <Tab3 /> */}
</Tab>
</Tabs>
<Text>Hi from Inquiries</Text>
</Container>const styles = StyleSheet.create({
tabsText:{
fontSize: 10
},
headerColor:{
backgroundColor: '#1b1b1b'
},
activeTab:{
borderBottomColor: '#fff'
}
});
323
Here is how i designed my tabs. Change the styling as needed.
<Tabs tabBarUnderlineStyle={{ backgroundColor: '#f9ec97' }}>
<Tab heading="Description" activeTextStyle={{ color: '#fff', fontWeight: 'bold' }} textStyle={{ color: '#fff', fontSize: 12 }} tabStyle={{ backgroundColor: '#2f2483' }} activeTabStyle={{ backgroundColor: '#2f2483' }} >
{/* <Tab1 /> */}
</Tab>
.....
</Tabs>
you need to specify styles for every tab.
74
answered Sep 18 '26 14:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With