Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
piyushchauhan2011 opened this issue Jul 27, 2015 · 11 comments

Comments

@piyushchauhan2011
Copy link

commented Jul 27, 2015

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 comment has been minimized.

Copy link

commented Jul 28, 2015

This would definitely be a nice feature 👍

@piyushchauhan2011

This comment has been minimized.

Copy link
Author

commented Jul 28, 2015

👍

@achang28

This comment has been minimized.

Copy link

commented Jul 28, 2015

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

This comment has been minimized.

Copy link
Contributor

commented Jul 30, 2015

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

This comment has been minimized.

Copy link
Collaborator

commented Aug 13, 2015

what @irfaan said ;)

@brentvatne brentvatne closed this Aug 13, 2015

@dannyprice1990

This comment has been minimized.

Copy link

commented Oct 11, 2015

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

Thanks

@irfaan

This comment has been minimized.

Copy link
Contributor

commented Oct 11, 2015

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

@dannyprice1990

This comment has been minimized.

Copy link

commented Oct 13, 2015

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

capture

From within component:
capture

Thanks for your help

@irfaan

This comment has been minimized.

Copy link
Contributor

commented Oct 13, 2015

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

This comment has been minimized.

Copy link

commented Nov 7, 2015

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

This comment has been minimized.

Copy link

commented Nov 27, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.