From 3c14473cd03738ad25a6c8f312e54d962c78f96b Mon Sep 17 00:00:00 2001
From: Richard Lindhout <richardlindhout96@gmail.com>
Date: Wed, 2 Aug 2023 22:38:11 +0200
Subject: [PATCH] fix: make it possible to make header absolute (own use-case)

---
 src/Swiper.native.tsx | 2 ++
 src/Swiper.tsx        | 2 ++
 src/Tabs.tsx          | 3 +++
 src/TabsHeader.tsx    | 5 +++--
 src/utils.tsx         | 2 ++
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Swiper.native.tsx b/src/Swiper.native.tsx
index 207eb96..65da3c1 100644
--- a/src/Swiper.native.tsx
+++ b/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 (
     <>
diff --git a/src/Swiper.tsx b/src/Swiper.tsx
index f73962a..468d57f 100644
--- a/src/Swiper.tsx
+++ b/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 (
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index e1ab52c..d6193ce 100644
--- a/src/Tabs.tsx
+++ b/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>
diff --git a/src/TabsHeader.tsx b/src/TabsHeader.tsx
index 1aa0eba..23928f8 100644
--- a/src/TabsHeader.tsx
+++ b/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>
   );
 }
 
diff --git a/src/utils.tsx b/src/utils.tsx
index c87da62..a741a41 100644
--- a/src/utils.tsx
+++ b/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 {