Recently, I've delved into the world of React Native and now find myself in need of assistance with customizing my tabs. Utilizing advanced tabs by Native Base, I aim to transform this:
https://i.stack.imgur.com/xhNwP.png
Into something more akin to:
https://i.stack.imgur.com/hDwAM.png
While exploring the Native Base documentation for insight on styling the tabs, I am at a loss as to where these properties ought to be placed:
Here's a snippet 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'
}
});