Override pagerProps.onScroll cause losing header collapse behavior when change to other tab using pager scroll

[Khuongnb]

Current behavior

• I'm sitting on Tab A
• Override container pagerProps.onScroll
• Scroll pager to Tab B (without touching TabBarComponent)
• ScrollUp Tab B => HeaderComponent did not collapse, default pager onScroll (scrollHandlerX) has been overrided.

Expected behaviour

HeaderComponent should be collapsible when scrolling Tab B

Code sample

     <Tabs.Container
        HeaderComponent={Header}
        TabBarComponent={TabBar}
        ...
        pagerProps={{
          onScroll: (e) => {
            containerScroller.value = e.nativeEvent.contentOffset.x;
          },
        }}>
        <Tabs.Tab name="Tab A">
          <Tabs.ScrollView showsVerticalScrollIndicator={false}>
            <SuperLongView/>
          </Tabs.ScrollView>
        </Tabs.Tab>
        <Tabs.Tab name="Tab B">
          <Tabs.ScrollView showsVerticalScrollIndicator={false}>
            <MassiveView/>
          </Tabs.ScrollView>
        </Tabs.Tab>
      </Tabs.Container>

What have you tried

In case you want to know what am I doing, I'm writing a custom TabBarComponent instead of using MaterialTabBar so I need to use pagerProps.onScroll to create animation for the TabBar bottom Indicator

[PedroBern]

Hi @Khuongnb, here is the definition of the pager props. It does not include the onScroll.

But no worries, you don't need it to create your tab bar. The props passed to the tab bar component probably have all you need. Here is the definition:

export type TabBarProps<T extends TabName = TabName> = {
  indexDecimal: Animated.SharedValue<number>
  focusedTab: Animated.SharedValue<T>
  tabNames: T[]
  index: Animated.SharedValue<number>
  containerRef: React.RefObject<ContainerRef>
  onTabPress: (name: T) => void
  tabProps: TabsWithProps<T>
}

For example, to interpolate the indicator you can use the indexDecimal prop. Or for example if don't want it to "follow" the swiping, just jump from one place to another, you can use the index.

Take a look at the default tab bar for pointers. If you need more help building it, post it here and we continue the conversation :)

I will close for now.