Skip to content

Consider renaming initialPage #126

Closed
@grabbou

Description

@grabbou

It's actually currentPage since it reacts to changes https://github.com/brentvatne/react-native-scrollable-tab-view/blob/master/index.js#L55 (or maybe at least clarify that in docs?)

Activity

skv-headless

skv-headless commented on Jan 13, 2016

@skv-headless
Collaborator

absolutely agree

grabbou

grabbou commented on Jan 13, 2016

@grabbou
Author

It depends on expected by user behaviour, we can either:

  • revert old initialPage behaviour & implement page prop
  • clarify that in docs, make page prop and log that initialPage is deprecated and will be removed with next version
skv-headless

skv-headless commented on Jan 14, 2016

@skv-headless
Collaborator

First option is better for me.

skv-headless

skv-headless commented on Jan 24, 2016

@skv-headless
Collaborator

related issues #137 , #135 ,#128 ,#129

robtg4

robtg4 commented on Feb 4, 2016

@robtg4

So what was the conclusion here - how can this problem of popping back to the initial set page be solved?

digital-flowers

digital-flowers commented on May 24, 2017

@digital-flowers

@robtg4 i think it's not the component job to do so it's the user implementation to decide the initial state using redux or what ever he wants

eseQ

eseQ commented on May 25, 2017

@eseQ

UPDATE 2 - solution
I returned to this problem again and found simple solution.
For control with Redux we don`t need use page - we need goToPage (how could i miss it before?)

UPDATE

All of i wrote next will work only for controlled tabs with Redux, but i catch scroll back if just swipe to other tab (if change with Redux or tap on TabBar all work fine).
But for control with Redux next solution work well.


TL;DR
Add identical initialPage and page on start, don`t change initialPage, change only page;
Update don`t use page - only initialPage on start and goToPage for change page.

I use redux for save my current tab (I change it in other place).
I want change active tab in drawer if that route active or initial specific tab if go from other route.

constructor() {
  super();
  this.pageProps = {} // can declare just in class
  this.pageIndex = null // ** Update **
}

Ok we have object for save component`s page data;
!important; keep it in mind! For initial Tabs we need set identical initialPage and page (use goToPage, if use page u can catch slide back). But for change tab we don`t need change initialPage. If we change initialPage without unmount component or set different values - tabs jump out of range and tab will not be loaded -_-

handleChangeScreen = ({ i }) => {
  this.pageIndex = i; // **Update ** save current page index
  this.props.dispatch(setMainScreen(i));
}

just handle onChangeTab and set in Redux (mainScreen - name of var for current tab in Redux)
Next step:

if (!this.pageProps.initialPage) this.pageProps.initialPage = mainScreen;

mainScreen - index current tab. Don`t change initialPage if tabs already init.


if (!this.pageProps.page || !this.pageProps.page !== mainScreen) this.pageProps.page = mainScreen;

Set page for init or change if page changed in Redux. Don`t use this code

Update
Now we need catch receive new mainScreen if it change outside

componentWillReceiveProps(nextProps) {
  const { YouStore: { mainScreen } } = nextProps;
  if ( this.props.YouStore.mainScreen !== mainScreen && mainScreen !== this.pageIndex) {
    if (this.tabView) this.tabView.goToPage(mainScreen)
  }
}

<ScrollableTabView
  {...this.pageProps}
  onChangeTab={this.handleChangeScreen}
  ref={(tabView) => { this.tabView = tabView; }} // set tabView
  ...
/>

Add props to ScrollableTabView. Have fun.

I try explain in detail, perhaps i can`t did it =).

digital-flowers

digital-flowers commented on May 26, 2017

@digital-flowers

i think many components has an issue with interacting with redux the main reason is sometime you need redux to control the component and sometime you need the component to control redux maybe all components should consider doing the following scenario:

  • from user interaction (e.g click, slide)
    ==run==> internal event handler (this.onClick)
  • from internal handler
    ==if external handler exits ==> run (this.props.onClick)
  • after external handler call
    == if return true ==> change internal state (this.setState({page}))
    == if return false ==> do nothing
  • listen for props (e.g componentWillReceiveProps)
    == if prop not equal state ==> change internal state (this.setState({page:this.props.page}))
digital-flowers

digital-flowers commented on May 26, 2017

@digital-flowers

in this way you can listen to the event cancel it and change your redux state in the other hand redux will change your component prop again :)

eseQ

eseQ commented on May 26, 2017

@eseQ

@digital-flowers yeah, i agree, that will be awesome. If we don`t control component - just do u job, but if we do - doesn`t disturb =)

digital-flowers

digital-flowers commented on May 28, 2017

@digital-flowers

exactly !

eseQ

eseQ commented on Jun 1, 2017

@eseQ

UPDATE
I returned to this problem again and found simple solution.
For control with Redux we don`t need use page - we need goToPage (how could i miss it before?)
I updated my past solution.

Sorry for long read

Froelund

Froelund commented on Jun 6, 2017

@Froelund

@dictory Could you elaborate how you would use goToPage in a redux setup? I can't really figure out what you mean is your solution in the previous comment with all those updates :)

12 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @skv-headless@Froelund@grabbou@khat33b@digital-flowers

        Issue actions

          Consider renaming `initialPage` · Issue #126 · ptomasroos/react-native-scrollable-tab-view