Is there a way to change the tab view through programming ? about react-native-scrollable-tab-view HOT 11 CLOSED

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

from react-native-scrollable-tab-view.

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!

from react-native-scrollable-tab-view.

This would definitely be a nice feature 👍

from react-native-scrollable-tab-view.

👍

from react-native-scrollable-tab-view.

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

from react-native-scrollable-tab-view.

what @irfaan said ;)

from react-native-scrollable-tab-view.

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

Thanks

from react-native-scrollable-tab-view.

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

from react-native-scrollable-tab-view.

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

from react-native-scrollable-tab-view.

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?

from react-native-scrollable-tab-view.

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

from react-native-scrollable-tab-view.