Setting InitialPage does not work

[Waltari10]

When I set initialPage to 2 it still renders the first tab in the main view. TabBar shows that second tab is selected though. If I swipe left or right it acts as if the first tab was selected all along and tabBar corrects itself. Same thing if I just press on one of the tabs in tabView.

Am I doing something wrong or is this a bug? My React-Version is 0.48.
EDIT: This does not happen on React-Native 0.47.2.

render() {
    return (
      <ScrollableTabView
        renderTabBar={() => <DefaultTabBar />}
        initialPage={2}
        ref={(tabView) => { this.tabView = tabView; }}
        tabBarPosition={'bottom'}
        prerenderingSiblingsNumber={Infinity}
      >
        <Text
          style={{textAlign: 'center', fontSize: 50, marginTop: '40%'}}
          tabLabel='Tab #1'
          key={'tab1'}
        >Tab1</Text>
        <Text
          style={{textAlign: 'center', fontSize: 50, marginTop: '40%'}}
          tabLabel='Tab #2'
          key={'tab2'}
        >tab2</Text>
        <Text
          style={{textAlign: 'center', fontSize: 50, marginTop: '40%'}}
          tabLabel='Tab #3'
          key={'tab3'}
        >tab3</Text>
        <Text
          style={{textAlign: 'center', fontSize: 50, marginTop: '40%'}}
          tabLabel='Tab #4'
          key={'tab4'}
        >Tab4</Text>
      </ScrollableTabView>
    );
  }

[gao520sun]

facebook/react-native#15808

[kevinmartin33]

+1

[computist]

+1

[luyl]

[email protected]
[email protected]

1. open the source file react-native-scrollable-tab-view/index.js
2. find the code in the method componentDidMount:

this.setTimeout(() => {
  InteractionManager.runAfterInteractions(() => {
    if (Platform.OS === 'android') {
      this.goToPage(this.props.initialPage, false);
    }
  });
}, 0);

3. delete the code about os check

this.setTimeout(() => {
  InteractionManager.runAfterInteractions(() => {
    this.goToPage(this.props.initialPage, false);
  });
}, 0);

reload your app , this problem will be fixed, test on ios 11.0.2

[kelvinaliyanto]

@Waltari10 is this fixed? in my case, whenever i set the initialPage to other than 0, it will move the selected tab on the tabbar to correct position, just that the tabview shown is always the first tabview. however, once you click on any tab in the tabbar, it will show the correct tabview.

@luyl I am using

[email protected]
[email protected]

So the code for index.js has already changed, and I cannot find the os check happening. Is it already fixed in this version?

[svallen]

Agreed. This is still not working as it should be.

[raghudevan]

+1 facing the same issue on v0.8.0

[MaxiSantos]

any updates on this? Anyone has been working on this? Let me know where you left so I can take it from there so I don't have to repeat all what you have done and maybe I can get the fix or a PR for those ones who wants a fix now.

[kubilaytural]

Try this. It worked. Ideal for changing first pages.

componentDidMount() {
setTimeout(() => this.scrollableTabView.goToPage(1), 300);
}
...
.....
...
<ScrollableTabView
ref={(ref) => { this.scrollableTabView = ref; }}

[wenkangzhou]

@kubilaytural setTimeout is still not working as it should be,it still stay first page a few time.

[kubilaytural]

Did you try to raise the time? Will you share the code? @wenkangzhou

[xclidongbo]

@kubilaytural Thanks. It`s worked for me.

[huang-ju]

    InteractionManager.runAfterInteractions(() => {
      requestAnimationFrame(() => {
        this.scrollableTabView.goToPage(this.props.route.params.flag);
      });
    });