Nativebase: Tab bar on active Tab doesn't start at initialPage

[AnthonyAltieri]

Pushing this issue #665

react: 16.0.0-alpha.6
react-native: 0.44.0
native-base: 2.1.5

Expected Behavior:
Tab bar should be under the tab that initialPage is set to

Actual Behavior:
The content is displayed of the initial Page but the bar is in the 0 position always, scrolling horizontal slightly makes the bar update to the correct place.

Platform:
Only have tried IOS, not sure if it doesn't work in android.

Note: I'm more than willing to fix this myself and submit a PR but I'm not sure where the bar on the active Tab is generated, I've attempted to trace the code but couldn't find it. If anyone can point out where that is created I can probably fix this myself and submit a PR. Thanks!

[yannickschuchmann]

Hey guys, first, you did great work on this library!
I just want to check what the current status of this issue is?
@shivrajkumar, I saw you self-assigned it. Any progress? :)

[xempie]

hey guys, anyone can add this feature please? any updates?

[SupriyaKalghatgi]

@xempie There is a PR open for it
Soon we will merge it

[leekuo]

Was this fixed? When will it be merged? Or else, how can I manually do a temporary fix?

[SupriyaKalghatgi]

@leekuo Merging it this week

[leekuo]

Thank you very much @SupriyaKalghatgi ! Native base is incredible to use so far and am eagerly anticipating this fix so we can deploy our first react native app!

[SupriyaKalghatgi]

@leekuo Happy to hear that

[rodrigoreis22]

Any updates on the new release that will fix this?

[SupriyaKalghatgi]

Merging it today

[xempie]

was this merged?

[SupriyaKalghatgi]

PR has some issue

1376 #1443

[SupriyaKalghatgi]

Fixed with 2.3.6

[leekuo]

Trying out the new 2.3.6 release. The tab content does render correctly instead of blank when initialPage is set. But the selected tab underline still incorrectly underlines the first tab. Anyone else seeing this issue?

Edit: Well I have solved this problem by removing initialPage, creating a ref to the Tabs component, and then calling goToPage() function in the parent component's componentDidMount(). Seems to work so far.

[ziudeso]

@leekuo Can you provide an example please? Thx a ton!

[SupriyaKalghatgi]

@leekuo https://github.com/GeekyAnts/NativeBase/issues/1010#issuecomment-354988401

[Yarkhan]

This problem persists on 2.3.6 and 2.3.7. Setting initialPage to other than zero triggers all problems described here.

I've followed the steps @leekuo proposed, but in my case I've had to put a setTimeout to make it work. Ugly, but it is working. If I could manage to skip the animation triggered by goToPage() I could make this issue go unnoticed until we find a fix.

@ziudeso If you still interested in an example

class Home extends Component {
  componentDidMount(){
    setTimeout(this._tabs.goToPage.bind(this._tabs,1))
  }
  render(){
    return <Tabs ref={component => this._tabs = component}>
      //individual tabs here
   </Tabs>
  }
}

Hopefully, this example can lead you guys to find a permanent solution - a setTimeout delaying the execution of goToTabs() and fixing the problem could mean that something isn't firing before the component mounts.

Thanks everyone!

[ziudeso]

U are the best @Yarkhan! thanks a lot!

[Sigve84]

I have much of the same issues. On IOS the first page is rendered ok. On Android (emulator, API 24) the first page is not drawn corretly. The second, third etc. pages are drawn correctly. Example:

Images illustrating the issue
https://drive.google.com/open?id=1qrVzsjj9a-uuqEJkRXAEkQzRtCz9yiDZ

Package
"expo": "^24.0.0",
"native-base": "^2.3.7",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",

[MatheusLima7]

@SupriyaKalghatgi Which click event works on the tab?

[MatheusLima7]

@SupriyaKalghatgi How to listen when changing tab?

[SupriyaKalghatgi]

@MatheusLima7 NativeBase Tabs is implementation of https://github.com/skv-headless/react-native-scrollable-tab-view
You can refer to APIs and methods here

[Vamshidharg95]

Hey Guys, I think the rendering problem still not solved for me.

If I give the 'initialPage: 0' then the tab content renders properly, but when I try to give 'initialPage: 1', then the second tab is highlighted as expected but the content of that tab shows blank page. If I click on the second tab, then the animation is drawn from first tab to second tab and then the page is rendered.
Here is the demo : https://drive.google.com/open?id=1xRHbCn_VjilbM25D2tAQk4UMzOnATGs5

I'll be thankful if anybody help me in fixing this issue.

package.json :
"native-base": "^2.3.7"

[dsandmark]

I'm experiencing the same problem as @Vamshidharg95 with version 2.3.8.

[SupriyaKalghatgi]

#1010 comment

[dwivediamit]

Here is my code if i am using initialPage not equal to zero then data is not displaying in screen.
Right now i am using initialPage=5 in this case data is not showing but if i am using initialPage=0 then data is showing can anyone help me here how to fix this...

} style={styles.Card_background_Margin}
initialPage={5} >

              {  this.state.dateList.map((lists) => {
                return(
              <Tab heading= {lists.items}  style={styles.Tab_background}>
                <ScheduleDays navigation={this.props.navigation} />
              </Tab>

              )
          })
        }

        </Tabs>

[dwivediamit]

hi can anyone help here rendering issue with initialPage greater than 0

[akhil-geekyants]

https://github.com/skv-headless/react-native-scrollable-tab-view/issues/841

[sOm2y]

same problem with version 2.3.9

[kentaccn]

same problem with version 2.3.9, problem not solving, the props seem successful passed, seem it reset to 0 after that

[Alijaaan]

same problem with 2.3.10

[teddyteh]

A year later still not fixed hah

[dsandmark]

@SupriyaKalghatgi This is still an issue in version 2.3.10.

[xempie]

@SupriyaKalghatgi Still same problem in 2.4.2. is this feature so complicated that could not be fixed after about a year?!
I tried all solutions provided even in other issues, comments and pages but none of them worked.
some solutions may work for some simple texts tabs but when you use real data specially with a FlatList it doesn't work.

[isaaclem]

One thing I've noticed is that this issue occurs only when the app running for the first time. Meaning this issue will gone after subsequent "reload"

[SupriyaKalghatgi]

@xempie We have plan to rewrite Tabs

[hcyildirim]

If there is still no solution, can a temporary solution be applied?

[Wowgreat]

I have same problem,Help us

[Wowgreat]

@ccoeder What is the temporary solution

[hernanbruno97]

@AnthonyAltieri @ccoeder
I found a temporary solution to this problem
first set some variable on the state in 0
state = { activePage:0 }
after, update this in componentDidMount method
`

    setTimeout(()=>{

        this.setState({activePage:1})

    },0)`

and use it in page property of tabs
`

            <Tabs locked page={this.state.activePage}>

                <Tab  heading={'tab1'}>
                    ...
                </Tab>
                <Tab heading={'tab2'}>
                   ...
                </Tab>

            </Tabs>

`

[hcyildirim]

@codeFire97 thank you for the example, what is the version you are using?

[hernanbruno97]

@ccoeder
-native-base: 2.4.3
-react-native: 0.53.3
-Node: 8.9.0
-Yarn: 1.5.1
-npm: 5.6.0

[hcyildirim]

@hernanbruno97 thank you!

[xempie]

@hernanbruno97 Thanks buddy! Finally a solution! It saved my life. It's working great 🥇 👍

[kenkotch]

@hernanbruno97 thanks for your solution. that'll work for now.

[eggybot]

just a note this issue still exist in Android.

[akhil-geekyants]

@LasithaPrabodha can you try this workaround https://github.com/GeekyAnts/NativeBase/issues/1870#issuecomment-395393967

[terreb]

Wow, more than a year and still not fixed! NB 2.7.2 still has the issue. Fix this asap!

[terreb]

2.8.0 issue still persists

[dafapramudya]

hi @hernanbruno97 your solution no longer works, i've tried with initialPage. Any solution?

[ronilitman]

Still does not work. Any solution/workaround?

[rubinjohny]

its still not fixed?

[ronilitman]

@SupriyaKalghatgi Any news about that? It will be really helpful for lots of us..
Used @hernanbruno97 solution, even though this solution just gets you through the other tab with seeing the transition. I had to implement a really ugly hack to make it work without seeing the transition. I will be very glad if this can be fixed. Thank you!

[xupea]

with @hernanbruno97 's solution, the page is blank after initialPage is changed

[hernanbruno97]

@terreb @xupea @rubinjohny
I'm sorry, it has not stopped working for me
@ronilitman
can you attach the ugly hack?
I have the same problem with transitions

[hernanbruno97]

@terreb @xupea @rubinjohny
try longer timeout

`

    setTimeout(()=>{

        this.setState({activePage:1})

    },100)`

[el-lsan]

Using "native-base": "^2.8.0", and still facing the same issue 😞.
any solution out there ?

[xupea]

@el-lsan @terreb @rubinjohny
hi guys, try my better hack solution : https://github.com/xupea/NativeBase-Tabs-BugFix

[jaychoumylove]

I have encountered this problem with version 2.8.1. Is there any maintenance?

[yaronlevi]

Still happens in 2.8.0

[SimonVuong]

Hey folks. I understand this is an aggravating issue to have, and I wish it was fixed too. Still we don't need to be coarse with the maintainers. They've open sourced a fantastic library here. I'm sure pull requests are welcomed if fixing this is a priority for you.

[hernanbruno97]

hi guys working with tabs again I found a new issue and a solution a bit more effective

"native-base": "^2.7.2",
"react": "^16.4.1",
"react-native": "^0.55.4",

the new issue:
when navigating from a tab, the selected tab returns to the default tab in the state

new solution:

in the state:

 state={
activeTab:1
}

in componentDidMount

componentDidMount(){
setTimeout(()=>{
this.setState({activeTab:undefined})
},100)
}

in the render

<Tabs  page={this.state.activePage}>
...
</Tabs>

[rahamin1]

Doesn't work on 2.8.0

[tejas77]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

[KamauIan]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

It works! Great hack @tejas77

[Haqverdi]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

if want selecting other tab without showing first you can use as shown below:

componentDidMount = () => {
    const { initialPage } = this.props;
    this.tabs.goToPage.bind(this.tabs, initialPage)();
  // or
this.tabs.goToPage.call(this.tabs, initialPage);
  };

[KamauIan]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

if want selecting other tab without showing first you can use as shown below:

componentDidMount = () => {
    const { initialPage } = this.props;
    this.tabs.goToPage.bind(this.tabs, initialPage)();
  // or
this.tabs.goToPage.call(this.tabs, initialPage);
  };

It doesn't work for me without the setTimeout.

[Haqverdi]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

if want selecting other tab without showing first you can use as shown below:

componentDidMount = () => {
    const { initialPage } = this.props;
    this.tabs.goToPage.bind(this.tabs, initialPage)();
  // or
this.tabs.goToPage.call(this.tabs, initialPage);
  };

It doesn't work for me without the setTimeout.

i am also has problems with this, it doesn`t work on android only, but on IOS works

[svnscha]

It's been two years and the latest version is still having this issue. This is literally a disaster since this component was copied from some other component where it has been addressed in 2016 already.

https://github.com/ptomasroos/react-native-scrollable-tab-view/pull/462/commits/db1ecbafd84dbee86f1e0facaf809d4757adf854

[Abhishekgarg727]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

tested and working on 2.6.1 thanks

[forster-thomas]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

tested and working on "native-base": "^2.8.1" thank you

[highlabs]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

Tested and working on "native-base": "^2.11.0".

This issue are alive? Because the first post are from Jul 2, 2017.

[daniel0128]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

Tested and working on "native-base": "^2.11.0".

This issue are alive? Because the first post are from Jul 2, 2017.

2.12.0 still has this issue.
and this solution works on iOS, not test Android yet

[siddhesh-atd]

I found a trick:
native-base: 2.8.2
In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props;
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
    ...

Tested and working on "native-base": "^2.11.0".
This issue are alive? Because the first post are from Jul 2, 2017.

2.12.0 still has this issue.
and this solution works on iOS, not test Android yet

The android conterpart for the same code isn't working. Can someone look into it ?

[YisusMB]

I try the solution of @tejas77 but dosnt work for me (it show error goToPage is undefined) so... i try this thing and it works! Code example in another issue i hope i helped

[ramanasak]

can anyone tell me how to know present active tab Id in scrollable tabs native base react-native?

[hanykumar]

Hi @ramanasak , please refer Native-Base Documentation.

changeTab = (event) => {
    console.log(event.i)
  }
...
<Tabs renderTabBar={()=> <ScrollableTab />} onChangeTab={this.changeTab}>
            <Tab heading="Tab1">

            </Tab>
            <Tab heading="Tab2">

            </Tab>
            <Tab heading="Tab3">

            </Tab>
</Tabs>

[alanrubin]

Still experimenting that issue in Android, no solution above worked so that the initial tab is 0 - the only thing that worked is to set as initial anything apart from 0 using setTimeout

[Ho3ein-Boka]

same issue in android with nativebase 2.13.14 react-native 62.2

[hanykumar]

Hi @alanrubin and @Ho3ein-Boka , can you provide minimal code reproduction for the same.