fix: make it possible to make header absolute (own use-case)

Author: RichardLindhout

src/Swiper.native.tsx

@@ -23,6 +23,7 @@ function SwiperNative(props: SwiperProps) {
     mode,
     showLeadingSpace,
     disableSwipe,
+    tabHeaderStyle,
   } = props;
   const { index, goTo } = React.useContext(TabsContext);
   const indexRef = React.useRef<number>(index || 0);
@@ -75,6 +76,7 @@ function SwiperNative(props: SwiperProps) {
     showLeadingSpace,
     uppercase,
     mode,
+    tabHeaderStyle,
   };
   return (
     <>

src/Swiper.tsx

@@ -15,6 +15,7 @@ function Swiper(props: SwiperProps) {
     showLeadingSpace,
     uppercase,
     mode,
+    tabHeaderStyle,
   } = props;
 
   const index = useTabIndex();
@@ -37,6 +38,7 @@ function Swiper(props: SwiperProps) {
     showLeadingSpace,
     uppercase,
     mode,
+    tabHeaderStyle,
   };
 
   return (

src/Tabs.tsx

@@ -17,6 +17,7 @@ function Tabs({
   showTextLabel = true,
   showLeadingSpace = true,
   disableSwipe = false,
+  tabHeaderStyle,
 }: {
   children: any;
   theme: typeof MD3LightTheme;
@@ -28,6 +29,7 @@ function Tabs({
   uppercase?: boolean;
   mode?: Mode;
   disableSwipe?: boolean;
+  tabHeaderStyle?: ViewStyle | undefined;
 }) {
   return (
     <Swiper
@@ -40,6 +42,7 @@ function Tabs({
       showLeadingSpace={showLeadingSpace}
       mode={mode}
       disableSwipe={disableSwipe}
+      tabHeaderStyle={tabHeaderStyle}
     >
       {children}
     </Swiper>

src/TabsHeader.tsx

@@ -25,6 +25,7 @@ export default function TabsHeader({
   showLeadingSpace,
   uppercase,
   mode,
+  tabHeaderStyle,
   ...rest
 }: SwiperRenderProps) {
   const children = React.Children.toArray(rest.children).filter(Boolean);
@@ -166,7 +167,7 @@ export default function TabsHeader({
   const SurfaceComponent = theme.isV3 ? View : Surface;
 
   return (
-    <View style={styles.relative}>
+    <Animated.View style={[styles.relative, tabHeaderStyle]}>
       <SurfaceComponent
         style={[
           { backgroundColor, elevation },
@@ -241,7 +242,7 @@ export default function TabsHeader({
           />
         )}
       </SurfaceComponent>
-    </View>
+    </Animated.View>
   );
 }
 

src/utils.tsx

@@ -25,6 +25,7 @@ export interface SwiperRenderProps {
   showLeadingSpace?: boolean;
   uppercase: boolean;
   mode: Mode;
+  tabHeaderStyle: ViewStyle | undefined;
 }
 
 export interface SwiperProps {
@@ -38,6 +39,7 @@ export interface SwiperProps {
   uppercase: boolean;
   mode: Mode;
   disableSwipe?: boolean;
+  tabHeaderStyle: ViewStyle | undefined;
 }
 
 export interface OffsetScrollArgs {