Padding showing when changing tabs.

[kioopi]

Thank you for your great library!

When I have scrolled down on one tab so that the header is hidden and then change to another tab (via swipe or tap on the tab) that is scrolled all the way to the top, the paddingTop is showing. It would usually be obscured by the header and tabs but the header is shrunk because of the interaction with the previous tab.

Is there known solution for this? Or a canonical approach?
Thank you very much for your time.

[PedroBern]

Hi @kioopi can you provide a reproducible demo or a gif/ small video? It's an android or iOS?

[Janak-Nirmal]

Hi @PedroBern

Its really awesome library and your support even makes it cherry on the top. Below is the video of this issue.

• Scroll to the end in Tab1, Tab2 has short content but it still scrolls to end. Now if you try to scroll in Tab2 it will reset its offset and that's the issue I believe.
• Hope this helps to understand the issue

Screen.Recording.2021-01-03.at.1.10.24.PM.mov

[Janak-Nirmal]

@PedroBern I tried to investigate and it seems when TabView index is changed syncScrollOffsets is not called somehow. Tried to add manually handling to onIndexChange

  const onTabIndexChanged = (nIndex) => {
    const {onIndexChange} = tabViewProps;
    onIndexChange && onIndexChange(nIndex);
    syncScrollOffsets();
  };

...
...
...
  <TabView
    {...tabViewProps}
    onIndexChange={onTabIndexChanged}
    navigationState={{index, routes}}
    renderTabBar={renderTabBar}
  />

Just wanted to help so I tried :)

But this doesn't work properly, it has other side effects it resets current scrolled position of
individual Tabs.

This happens only when we set lazy={true} prop , if we set lazy={false} than this doesn't happen.

[kioopi]

@Janak-Nirmal Thanks you, that is exactly what i was encountering. The blank space above the round images on the second tab.
I'll try to experiment with syncScrollOffsets and lazy.

[PedroBern]

@Janak-Nirmal thanks for the help 👍

This happens only when we set lazy={true} prop , if we set lazy={false} than this doesn't happen.

@kioopi see #19, does it happen if using lazy={false}?

[Janak-Nirmal]

@PedroBern yes if you set lazy=false than it doesn't happen.

[PedroBern]

closing in favor of #19

[carlos187-dev]

I still having this issue even with lazy={false} please I need her :(

[ariesbrylle-bms]

@PedroBern I tried to investigate and it seems when TabView index is changed syncScrollOffsets is not called somehow. Tried to add manually handling to onIndexChange

  const onTabIndexChanged = (nIndex) => {
    const {onIndexChange} = tabViewProps;
    onIndexChange && onIndexChange(nIndex);
    syncScrollOffsets();
  };

...
...
...
  <TabView
    {...tabViewProps}
    onIndexChange={onTabIndexChanged}
    navigationState={{index, routes}}
    renderTabBar={renderTabBar}
  />

Just wanted to help so I tried :)

But this doesn't work properly, it has other side effects it resets current scrolled position of
individual Tabs.

This happens only when we set lazy={true} prop , if we set lazy={false} than this doesn't happen.

Tried this but the problem still occurs.

[ariesbrylle-bms]

I still having this issue even with lazy={false} please I need her :(

Same here :(

[PedroBern]

related: #26

[PedroBern]

fixed in v3 👍

[sadia-onyxtec]

Thanks for this library. I am using ^5.0.0-rc.10 and still facing this issue while using onIndexChange.

[calz10]

yeah the issue does still exist on my end though I use the latest version.

Thanks for this library. I am using ^5.0.0-rc.10 and still facing this issue while using onIndexChange.

[KuiGoan]

Same +1

[AnasAli91]

Same +1

[ivanichoo]

Hello,

Got the same bug for flashlist tabs with dynamic height. I have been trying all solutions above but nothing works or is table.

"expo": "~48.0.12",
"react-native": "0.71.8",
"react-native-collapsible-tab-view": "^6.2.0"

[iy-913]

#354 (comment)