Nativebase: Top tabs redundantly animate scroll when changing screen width

[shlokamin]

node, npm, react-native, react and native-base version, expo version if used

node - v8.9.4
react-native - 0.53.3
native-base - 2.4.4

Expected behaviour

Same active top tab will already be loaded and present with no animation

Actual behaviour

Tab animation scrolls to previously active tab

Steps to reproduce

Change a screen with scrollable top tabs to have a width of 0 (for the purpose of hiding it and presenting another screen on top of it). Change the width back to what it was, and you'll see the tab animation scrolling to the tab you were previously on.

Is the bug present in both iOS and Android or in any one of them?

Both

Any other additional info which would help us debug the issue quicker.

I've done some debugging and it looks like _handleLayout in Tabs/index.js gets called when changing the width of the screen. Because our app hides the screen with the scrollable top tabs when presenting another screen on top of it, we set the width to 0. As a result, this block executes:

if (Math.round(width) !== Math.round(this.state.containerWidth)) {
  this.setState({ containerWidth: width });
  this.requestAnimationFrame(() => {
    this.goToPage(this.state.currentPage);
  });
}

This causes the animation to repeat when it shouldn't. Would it make sense to just do an additional check to see if the screen width is set to zero (indicating that the screen is being hidden) before executing the block in the if statement above? If so, I can open up a PR and do that.

I've attached a GIF below. You'll see that when entering the top tab with title "HEADLINE", clicking on an item, and then returning back to the top tab screen, the scrollable tab jumps to "HEADLINE" when it should just already be there.

Note - The GIF then quickly restarts and it looks like its going back to "TOP NEWS" so ignore that.

[SupriyaKalghatgi]

@shlokamin As per issue guidelines, you are missing out code snippet
Make sure the code snippet reproduces the issue
Putting it on snack would be more favourable

[shlokamin]

@SupriyaKalghatgi I've attached a snack here

Scroll to tab 2, press the text, then press the new text presented. You will see that the tab will animate back to tab 2.

I have outlined why I believe this is happening in my post above. As I said, let me know if doing an additional check makes sense. I can make a PR and do that. Maybe a "hidden" prop or something like that would be more clear though. Let me know.

[SupriyaKalghatgi]

@shlokamin That is an issue due to react-native-scrollable-tab-view
https://github.com/happypancake/react-native-scrollable-tab-view/issues/929

[shlokamin]

@SupriyaKalghatgi react-native-scrollable-tab-view seems to be abandoned. I'll go ahead and open a PR anyways and see if I can find someone who can merge.

It also looks like the version native base is using is different than what is currently on their repo. Do you folks manually copy over the required components? I don't see react-native-scrollable-tab-view anywhere in your package.json

[shlokamin]

It looks like someone has already made the fix here

Do you folks plan to use the updated version? The commit above was back in October of 2017

[shlokamin]

@SupriyaKalghatgi any update on what I asked above?

[shlokamin]

@SupriyaKalghatgi any update on this? Would be nice to use your official repo instead of my fork. Let me know if I can help out in any way! Like I said, it looks like if you update your react-native-scrollable-tab-view dependency this should be fixed!

[brennan-pilcher]

@SupriyaKalghatgi can this issue be re-opened please? It looks like the fix is already implemented in the newer version of react-native-scrollable-tab-view, so it should be quick to update your dependencies and get it working again. Thanks!