Padding showing when changing tabs.

PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native

MIT License

836 stars 162 forks source link

Padding showing when changing tabs. #32

Closed kioopi closed 3 years ago

kioopi commented 3 years ago

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 commented 3 years ago

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

Janak-Nirmal commented 3 years ago

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

https://user-images.githubusercontent.com/1412113/103474073-10768c00-4dc6-11eb-8493-0a7fa4f80d6a.mov

Janak-Nirmal commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

PedroBern commented 3 years ago

closing in favor of #19

carlos187-dev commented 3 years ago

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

ariesbrylle-bms commented 3 years ago

@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 commented 3 years ago