Nativebase: Is have any ways to custom on Tab with Thumbnail and Text?

Created on 15 Aug 2017  路  4Comments  路  Source: GeekyAnts/NativeBase

tabStyle = {tabStyle} heading="Submission">



I just only custom on Text only with configuration that nativebase given..
but
I can not get it work with image and Text on Tab at the button when it's active or not?
Any suggestion?
Plz help..

Most helpful comment

@NemSothea You can use TabHeading to add custom heading for the Tabs

<Tab heading={<TabHeading><Image ..../><Text>Text</Text></TabHeading>}

All 4 comments

@NemSothea You can use TabHeading to add custom heading for the Tabs

<Tab heading={<TabHeading><Image ..../><Text>Text</Text></TabHeading>}

So how can I custom style on image and text when it is active! because I had tried to do it but it didn't work the properties that they given..

Here is my:
render(){
var directoryOne = require('../../img/directory/directoryone.png')
var directoryTwo = require('../../img/directory/directorytwo.png')
var avataOne = require('../../img/avatar/avataone.png')
var avataTwo = require('../../img/avatar/avatatwo.png')
const { tabStyle} = homeStyle;
return (
<Container>
<Tabs tabBarPosition="bottom" style={{backgroundColor:GREY_COLOR}}>
<Tab heading={<TabHeading><Thumbnail square source={directoryTwo}/>
<Text>Tab1</Text></TabHeading>}>
<Main/>
</Tab>
<Tab heading={<TabHeading><Thumbnail square source={avataOne}/>
<Text>Tab2</Text></TabHeading>}>
<UserInfo/>
</Tab>
</Tabs>
</Container>
);

@NemSothea Use onChangeTab function of Tabs to set the page prop to the current page and use that for active tab styling.

Was this page helpful?
0 / 5 - 0 ratings