Nativebase: color textStyle of Tab (heading) not working

[ghost]

hello every one, i have tab using Native-base,
i use version "native-base": "^2.12.2",
few day ago, i still use it, and now, i trying format color of text in Tab(heading),
i tried fontSize, backgroundColor -> worked.
fontWeight, color -> not working.
I try using Native-base Customizer, all operations are fine, but only the tab does not work. Has the library failed?
Please help me, i'm about to release with the customer.
Many thank

[ghost]

Update: initialPage working but, don't show that's page,

initialPage={1} _///Tab heading active page 1 but not show content page_
onChangeTab={() => {
this.setState({
isReloadData: !this.state.isReloadData
})
}}
tabContainerStyle={styles.tabContainer}
tabBarUnderlineStyle={{ backgroundColor: 'transparent', }}

                    <Tab heading= {I18n.t("QR.scan")}
                        tabStyle={styles.TAB1_STYLE}
                        textStyle={styles.TEXT}
                        activeTabStyle={styles.TAB1_ACTIVE_STYLE}
                        activeTextStyle={styles.ACTIVE_TEXT}

                       <QRCodePage
                            qrCode={(code) => {
                                this.qrCode = code
                                console.log(this.qrCode)
                            }}
                        />
                    </Tab>
                    <Tab
                        heading= {I18n.t("QR.myQRcode")}
                        tabStyle={styles.TAB2_STYLE}
                        textStyle={styles.TEXT}
                        activeTabStyle={styles.TAB2_ACTIVE_STYLE}
                        activeTextStyle={styles.ACTIVE_TEXT}

                         <QRScanPage textQRCode={this.qrCode}/>
                    </Tab>
                </Tabs>

When i use initialPage, i can't change page like normal. Thank

[Srishti-Sharma]

Update: initialPage working but, don't show that's page,

initialPage={1} _///Tab heading active page 1 but not show content page_
onChangeTab={() => {
this.setState({
isReloadData: !this.state.isReloadData
})
}}
tabContainerStyle={styles.tabContainer}
tabBarUnderlineStyle={{ backgroundColor: 'transparent', }}
>
tabStyle={styles.TAB1_STYLE}
textStyle={styles.TEXT}
activeTabStyle={styles.TAB1_ACTIVE_STYLE}
activeTextStyle={styles.ACTIVE_TEXT}
>
qrCode={(code) => {
this.qrCode = code
console.log(this.qrCode)
}}
/>

heading= {I18n.t("QR.myQRcode")}
tabStyle={styles.TAB2_STYLE}
textStyle={styles.TEXT}
activeTabStyle={styles.TAB2_ACTIVE_STYLE}
activeTextStyle={styles.ACTIVE_TEXT}
>

When i use initialPage, i can't change page like normal. Thank

It seems to be duplicate issue of #2705

[alexisbronchart]

I have the same issue, I override the theme variable topTabBarActiveTextColor and it no longer works. I'm on version 2.13.0 and it was OK in version 2.12.1

[sankhadeeproy007]

@alexisbronchart Can you confirm that the tabs text color was changing on version 2.12.1?

[alexisbronchart]

@alexisbronchart Can you confirm that the tabs text color was changing on version 2.12.1?

@sankhadeeproy007 I confirm :)

[sankhadeeproy007]

Please check with 2.13.3

[ghost]

i used 2.12.1 :D i think it's stable

[uday5162]

I'm Using 2.12.1 and getting this issue
color prop doesn't work in textStyle of Tab

[nirre7]

We where using 2.12.2 and font styling stopped working after we updated to RN 0.60.4.
Bumped to native-base 2.13.4 and still an issue.
topTabBarActiveTextColor, topTabBarTextColor does not seem to work.

Seems to work in 2.12.1 but then I get:

The following packages use deprecated "rnpm" config that will stop working from next release:
  - native-base: https://github.com/GeekyAnts/NativeBase#readme

[nameer94]

Same issue
it only work with ScrollableTab :/

[KevinStirling]

Also having this issue on both 2.12.1 and 2.13.4

TabStyle and activeTabStyle are not working for me. Some information on a quite complex work around found in this stack overflow question might be helpful in finding this issue : https://stackoverflow.com/a/49307646

[PlabanJr]

@KevinStirling @uday5162 @nirre7 Can you please provide a reproducible code example, preferably a snack.

[nirre7]

@PlabanJr: https://github.com/nirre7/coolio, a clean react-native init with NB and ejected theme with customized: topTabBarTextColor: 'red', topTabBarActiveTextColor: 'green',
Does not work with NB 2.13.5

[nirre7]

Any update on this one?

[nameer94]

This worked for me

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

native base 2.13.7

[alexisbronchart]

I'm now on 2.13.8 and I can confirm that defining the heading as @nameer94 does is working:

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

However doing it like this (doc) does not work:
<Tab heading={"Title"}>...

[nirre7]

Updated to 2.13.8 and implemented the "workaround" ??? that @nameer94 and @alexisbronchart mentioned above and it "works".

[anniewey]

I'm running on NB 2.13.8 and faces the same issue. Previously was running on 2.12.1 which is working fine but had to upgrade to get updates on react-native-keyboard-aware-scroll-view

Hopefully there will be new release on this bug. It's a tedious work to update each tab components to use <TabHeading/> workaround.

[ccjeaty]

I'm running on NB 2.13.8 and faces the same issue. Previously was running on 2.12.1 which is working fine but had to upgrade to get updates on react-native-keyboard-aware-scroll-view

Hopefully there will be new release on this bug. It's a tedious work to update each tab components to use <TabHeading/> workaround.

same [email protected]....

[rjsajnani]

Posted an updated solution (worked fine for looping of tab)

https://stackoverflow.com/a/59042779/7908231

[SmirnovM91]

Title

}>...

activeTabStyle is not working

[felixroos]

it seems like this issue is still present with [email protected] + [email protected]
Setting topTabBarActiveTextColor has no effect...

My current workaround:

<Tab heading="Tab A" activeTextStyle={{ color: colors.primary }}>
{/* */}  
</Tab>
<Tab heading="Tab B" activeTextStyle={{ color: colors.primary }}>
{/* */}
</Tab>

Also, the customizer tabs page crashes on chrome :-/

[hanykumar]

Hi @felixroos , please explain the issue more with screenshots if the issue still persists.

<Container>
        <Header hasTabs />
        <Tabs>
          <Tab
            heading="Tab1"
            activeTextStyle={{ color: "red" }}
            activeTabStyle={{ backgroundColor: "yellow" }}
          ></Tab>
          <Tab
            heading="Tab2"
            activeTextStyle={{ color: "red" }}
            activeTabStyle={{ backgroundColor: "yellow" }}
          ></Tab>
          <Tab
            heading="Tab3"
            activeTextStyle={{ color: "red" }}
            activeTabStyle={{ backgroundColor: "yellow" }}
          ></Tab>
        </Tabs>
</Container>