Consider renaming `initialPage`

[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?)

[skv-headless]

absolutely agree

[grabbou]

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]

First option is better for me.

[skv-headless]

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

[robtg4]

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

[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]

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]

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]

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]

@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]

exactly !

[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]

@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 :)