search

web-ridge / react-native-paper-tabs

Smooth and fast cross platform Material Design Tabs for React Native Paper
https://reactnativepapertabs.com
MIT License
200 stars 35 forks source link

Tabs sticky on scrollable content #54

Closed nasirdeveloper closed 1 year ago

nasirdeveloper commented 1 year ago

Need tabs sticky at after a bit of scrolling of a page.

Thanks & Regards, Nasir

RichardLindhout commented 1 year ago

You can animate your header with translateY -100 so the tabs are visible but the header not

RichardLindhout commented 1 year ago

I've added tabHeaderStyle for this (not documented yet)

  <Tabs
        mode="scrollable"
        tabHeaderStyle={{
          position: 'absolute',
          top: insets.top + headerSelectHeight,
          left: 0,
          right: 0,
          transform: [
            {
              translateY: animation.interpolate({
                inputRange: [0, 1],
                outputRange: [0, -headerSelectHeight], // Hide the header when scrolled down
              }) as any as number,
            },
          ],
          zIndex: 100,
        }}
gidrokolbaska commented 5 months ago

I've added tabHeaderStyle for this (not documented yet)

  <Tabs
        mode="scrollable"
        tabHeaderStyle={{
          position: 'absolute',
          top: insets.top + headerSelectHeight,
          left: 0,
          right: 0,
          transform: [
            {
              translateY: animation.interpolate({
                inputRange: [0, 1],
                outputRange: [0, -headerSelectHeight], // Hide the header when scrolled down
              }) as any as number,
            },
          ],
          zIndex: 100,
        }}

Can you provide the full example please?