Scroll position not synced properly when adding dynamic tabs and not using `lazy` mode

[nkrmr]

Hello when i scroll on top of my header each tab appear with a blank space. I used : react-native-collapsible-tab-view : 4.5.2 react-native-reanimated : 2.8.0 react-native-tab-view : 3.1.1

https://user-images.githubusercontent.com/686395/167453214-4ee6ef71-f020-4b17-b340-584f7476ac3f.MP4

Can you help me

[withniyaz]

Having the same issue on android, but iOS is working fine. Any solution?

[andreialecu]

I'd suggest trying the v5 release candidate. Things have been rewritten there. See the PR on it for instructions.

[tom-richtr]

I'd suggest trying the v5 release candidate. Things have been rewritten there. See the PR on it for instructions.

I have tried the latest v5 RC. The behavior is better, but the problem still occurs when header is collapsed and tab is changed. If the header is visible again then it continues to work as expected.

So I also wait for the fix or workaround.

[andreialecu]

Need more info. iOS or Android? A recording of the issue will also help.

[tom-richtr]

I tested it on android with version 5.0.0-rc.7. The first shorter video shows the problem when the header is collapsed and then tab is changed. You can see the empty space for the header which is however not shown. The second video shows the similar case, but firstly we moved to the second tab, then the header is collapsed and then we swiped back and the problem with empty header space occured again. If the header is then expanded again then it starts to work further without any problems on any tab.

[andreialecu]

Can't seem to reproduce this in either my own apps or in the example app that is part of this library.

If you could isolate it that would be great.

https://user-images.githubusercontent.com/697707/169490079-38c0821e-b219-4aad-baca-b56676aaf880.mov

[tom-richtr]

It looks like the problem occurs if the tabs are generated dynamically. If we render tabs container just when we have all tabs ready then it works fine but if we add tabs dynamically then it happens what you can see in the videos.

[andreialecu]

@tom-richtr indeed this seems to be an issue when not using lazy tabs. I can reproduce it in the example app if I remove the lazy prop.

As a workaround, if it is feasible for you, try adding lazy to your Tabs.Container.

[tom-richtr]

We already use lazy mode and the issue is right there. I think the problem occurs with dynamic tabs loaded after initial rendering.

[tom-richtr]

Any update or workaround on this? It happens either with lazy on or off.

[andreialecu]

I'd suggest forking the repository and trying to reproduce this in the example app by modifying one of the examples.

Share the repro and I'll take a look.

[aeminkyr]

I was having the same issue and it fixed after I updated to [5.0.0-rc.10] version thanks @andreialecu :)

[Hartaithan]

same issue on both ios and android only in debug mode. version 5.0.0-rc.13. whether lazy is used or not.

Here's my Tabs.Container:

<Tabs.Container
          lazy
          renderHeader={() => <Header scrollValue={scrollValue} org={org} />}
          allowHeaderOverscroll={true}
          renderTabBar={tabBarProps => <CustomTabBar {...tabBarProps} />}
          headerHeight={INFO_HEIGHT + HEADER_HEIGHT}
          tabBarHeight={TAB_HEIGHT}
          headerContainerStyle={styles.header}
          minHeaderHeight={HEADER_HEIGHT}>
          {/* all my tabs */}
</Tabs.Container>

and if I remove renderHeader, the problem disappears. in Header component i just listen scrollValue for changing header opacity any way to fix it?

@andreialecu

EDIT: This bug only appears in debug mode on both ios and android. How can debug mode affect the appearance of this bug?

[Hartaithan]

Any news? @andreialecu

[crzycoder]

@andreialecu I'm also facing same issue with Tab.container is lazy. Without lazy props its working fine.

[DSKonstantin]

Any updates?

[dincozdemir]

The problem happens when there is a minHeaderHeight

[andreialecu]

This should be fixed in latest versions. Try 6.1.2, closing for now, but feel free to let me know if it needs to be reopened.

[metinaltinbas]

@andreialecu still having the problem and I don't use minHeaderHeight only headerHeight using 6.1.3

[miladdev85]

No matter lazy or header height I have this issue. It works on first render when I use lazy, but after switching tabs back and forth, the blank header problem is back...

[liveforownhappiness]

any updates? 6.2.1 has this issue in android

[andreialecu]

A video of the problem would be good.

PRs welcome

[hjun555]

still problem. scroll offset doesnt sync when there are multiple scrollview tabs..

it was okay when i used reanimated 2.14.4 but the offset not sync since i update reanimated to 3.5.4.

collapsible-tab-view version is 6.2.1

[AbdoHema2016]

Here is a workaround to reset the scroll offset to the top on changing tabs that worked for me, would be great if someone can work out a better formula as I was on a tight schedule

 const tabScrollRef = useRef(null);
 const focusedTab = useFocusedTab();
 const scrollY = useCurrentTabScrollY();
 const scrollScreen = () => {
     if (scrollY.value > TABS_HEADER_HEIGHT) {
       tabScrollRef?.current?.scrollTo({ animated: false, y: -50 }); 
       return;
     }
     if (scrollY.value === 0) {
       tabScrollRef?.current?.scrollTo({ animated: false, y: -PROFILE_HEADER_HEIGHT });
       return;
     }
     if (scrollY.value < TABS_HEADER_HEIGHT) {
       tabScrollRef?.current?.scrollTo({ animated: false, y: -scrollY.value * 0.2 });
     }
   };
   useEffect(() => {
     if (tabScrollRef && focusedTab === 'currentTabName') {
       scrollScreen();
     }
   }, [focusedTab]);
   
   <Tabs.ScrollView
       ref={tabScrollRef}
    ></Tabs.ScrollView>
 

ps if u r using flatlist it would be tabScrollRef?.current?.scrollToOffset({ animated: false, offset: -scrollY.value * 0.2 }); and u can add the style minHeight: undefined, on the contentContainerStyle if u r having a footer that needs to be aligned with screen footer

[VictorioMolina]

+1

[andreialecu]

I believe this may have been fixed in 7.0.1 and beyond. Please ping to reopen this issue if it still exists.