Is there a way to change the tab view through programming ?

[piyushchauhan2011]

Is there any way by which we can change the current tab we are viewing to the index one we want through code without clicking ?
like:
setTabView function or so ?

[psbanka]

This would definitely be a nice feature 👍

[piyushchauhan2011]

👍

[albertwchang]

I've come up with a quick-fix solution. Will post soon. Probably not elegant but at least it's working. It involves passing the goToPage function (from the custom tab bar) to the parent component, and then having this parent component assign the goToPage to a state variable. This variable would then be pased in as props to each of the child component pages.

Example: https://github.com/achang28/TabView-RN

[irfaan]

Give ScrollableTabView a ref prop (e.g. ref="Tabs") and then use its reference to use ScrollableTabView's goToPage() (e.g. this.refs.Tabs.goToPage(1);)

See #16

[brentvatne]

what @irfaan said ;)

[dannyprice1990]

I still can't get this to work unfortunately, can you provide a full example?

Thanks

[irfaan]

@dannyprice1990 Can you share the pertinent pieces of your application in a gist or put something up on http://rnplay.org?

[dannyprice1990]

Hey bud, I'm trying to change the tab using a button within the Ready2WorkComponent. Am I going about this in the wrong way?

From within component:

Thanks for your help

[irfaan]

this is likely referencing your Ready2WorkComponent. Not sure how to make reference to something outside of it.

@brentvatne, this is beyond the scope of your package, but do you know how to achieve this?

[JonathanWi]

Just stumbled on your issue and found a solution (a bit messy, but it works):

In the parent component (ScrollableTabView)

Like you did, add ref="Tabs" on the ScrollableTabView and add a tabsRef on each slides

<ScrollableTabView activeTab={1} ref="Tabs">
      <Profile tabsRef={this.state.tabsRef} tabLabel="a" />
      <Feed tabsRef={this.state.tabsRef} tabLabel="b" />
      <Settings tabsRef={this.state.tabsRef} tabLabel="c" />
</ScrollableTabView>

We could try to pass {this.refs.Tabs} instead of {this.state.tabsRef}; Unfortunately, it appears that ref is set after componentDidMount is called. What we need to do is declare:

getInitialState: function(){
  return {
    tabsRef : {} // At this point we don't have access to the ref
  }
},
componentDidMount: function(){
  this.setState({tabsRef : this.refs.Tabs}); // The this.refs.Tabs is now defined, and passed to the components
}

In the child component

We have now access to this.props.tabsRef and thus can call this.props.tabsRef.goToPage(1)

Hope this helps, it works for me!

[BalalRaza]

@irfaan @brentvatne Alongside goToPage(), can we also pass some props to the target page?