feat: Custom tab header component

README.md

@@ -83,6 +83,7 @@ function Example() {
           // disableSwipe={false} // (default=false) disable swipe to left/right gestures
           // tabHeaderStyle // style object, can be animated properties as well in
           // tabLabelStyle // style object
+          // TabHeaderComponent={MyCustomHeader} // render a custom header
         >
           <TabScreen label="Explore" icon="compass">
              <ExploreWitHookExamples />
@@ -103,6 +104,7 @@ function Example() {
             // onPress={() => {
             //   console.log('onPress explore');
             // }}
+            // TabHeaderComponent={MyCustomHeader} // render a custom header
           >
              <View style={{ backgroundColor: 'red', flex:1 }} />
           </TabScreen>

src/Swiper.native.tsx

@@ -26,6 +26,7 @@ function SwiperNative(props: SwiperProps) {
     disableSwipe,
     tabHeaderStyle,
     tabLabelStyle,
+    TabHeaderComponent,
   } = props;
   const { index, goTo } = React.useContext(TabsContext);
   const indexRef = React.useRef<number>(index || 0);
@@ -82,6 +83,7 @@ function SwiperNative(props: SwiperProps) {
     mode,
     tabHeaderStyle,
     tabLabelStyle,
+    TabHeaderComponent,
   };
   return (
     <>

src/Swiper.tsx

@@ -17,6 +17,7 @@ function Swiper(props: SwiperProps) {
     mode,
     tabHeaderStyle,
     tabLabelStyle,
+    TabHeaderComponent,
   } = props;
 
   const index = useTabIndex();
@@ -41,6 +42,7 @@ function Swiper(props: SwiperProps) {
     mode,
     tabHeaderStyle,
     tabLabelStyle,
+    TabHeaderComponent,
   };
 
   return (

src/TabScreen.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { GestureResponderEvent } from 'react-native';
+import type TabsHeaderItem from './TabsHeaderItem';
 
 export interface TabScreenProps {
   label: string;
@@ -9,6 +10,7 @@ export interface TabScreenProps {
   onPress?: (event: GestureResponderEvent) => void;
   onPressIn?: (event: GestureResponderEvent) => void;
   disabled?: boolean;
+  TabHeaderComponent?: typeof TabsHeaderItem | undefined;
 }
 
 export default function TabScreen({ children }: TabScreenProps) {

src/Tabs.tsx

@@ -5,6 +5,7 @@ import Swiper from './Swiper';
 import type { MD3LightTheme } from 'react-native-paper';
 
 import type { IconPosition, Mode } from './utils';
+import type TabsHeaderItem from './TabsHeaderItem';
 
 function Tabs({
   theme,
@@ -18,6 +19,7 @@ function Tabs({
   disableSwipe = false,
   tabHeaderStyle,
   tabLabelStyle,
+  TabHeaderComponent,
   ...rest
 }: {
   children: any;
@@ -32,6 +34,7 @@ function Tabs({
   disableSwipe?: boolean;
   tabHeaderStyle?: ViewStyle | undefined;
   tabLabelStyle?: TextStyle | undefined;
+  TabHeaderComponent?: typeof TabsHeaderItem;
 }) {
   const children = React.Children.toArray(rest.children).filter(Boolean);
 
@@ -48,6 +51,7 @@ function Tabs({
       disableSwipe={disableSwipe}
       tabHeaderStyle={tabHeaderStyle}
       tabLabelStyle={tabLabelStyle}
+      TabHeaderComponent={TabHeaderComponent}
     >
       {children}
     </Swiper>

src/TabsHeader.tsx

@@ -27,6 +27,7 @@ export default function TabsHeader({
   mode,
   tabHeaderStyle,
   tabLabelStyle,
+  TabHeaderComponent,
   children,
 }: SwiperRenderProps) {
   const { index, goTo } = React.useContext(TabsContext);
@@ -174,7 +175,6 @@ export default function TabsHeader({
         style={[
           { backgroundColor, elevation },
           restStyle,
-          styles.tabs,
           iconPosition === 'top' && styles.tabsTopIcon,
         ]}
         onLayout={onTabsLayout}
@@ -218,6 +218,7 @@ export default function TabsHeader({
               showTextLabel={showTextLabel}
               mode={mode}
               tabLabelStyle={tabLabelStyle}
+              TabHeaderComponent={TabHeaderComponent}
             />
           ))}
           <Animated.View
@@ -260,9 +261,6 @@ const styles = StyleSheet.create({
   scrollablePadding: {
     width: 52,
   },
-  tabs: {
-    height: 48,
-  },
   tabsTopIcon: {
     height: 72,
   },

src/TabsHeaderItem.tsx

@@ -31,6 +31,7 @@ export default function TabsHeaderItem({
   iconPosition,
   showTextLabel,
   tabLabelStyle,
+  TabHeaderComponent,
 }: {
   tab: ReactElement<TabScreenProps>;
   tabIndex: number;
@@ -48,6 +49,7 @@ export default function TabsHeaderItem({
   showTextLabel?: boolean;
   mode: Mode;
   tabLabelStyle?: TextStyle | undefined;
+  TabHeaderComponent?: typeof TabsHeaderItem;
 }) {
   const baseColor = theme.colors.primary;
   const rippleColor = React.useMemo(
@@ -74,6 +76,99 @@ export default function TabsHeaderItem({
 
   const badgeWithoutContent = typeof tab.props.badge === 'boolean';
 
+  const CustomHeader = tab.props.TabHeaderComponent || TabHeaderComponent;
+
+  const HeaderItem = CustomHeader ? (
+    <CustomHeader
+      theme={theme}
+      tabIndex={tabIndex}
+      tab={tab as ReactElement<TabScreenProps>}
+      active={active}
+      onTabLayout={onTabLayout}
+      goTo={goTo}
+      activeColor={activeColor}
+      textColor={textColor}
+      position={position}
+      offset={offset}
+      childrenCount={childrenCount}
+      uppercase={uppercase}
+      iconPosition={iconPosition}
+      showTextLabel={showTextLabel}
+      mode={mode}
+      tabLabelStyle={tabLabelStyle}
+    />
+  ) : (
+    <>
+      {tab.props.icon ? (
+        <View
+          style={[
+            styles.iconContainer,
+            iconPosition !== 'top' && styles.marginRight,
+          ]}
+        >
+          {tab.props.icon ? (
+            Platform.OS === 'android' ? (
+              <Animated.View style={{ opacity }}>
+                <MaterialCommunityIcon
+                  selectable={false}
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no"
+                  name={tab.props.icon}
+                  color={textColor}
+                  size={24}
+                />
+              </Animated.View>
+            ) : (
+              <MaterialCommunityIcon
+                selectable={false}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+                name={tab.props.icon}
+                style={{ color, opacity }}
+                size={24}
+              />
+            )
+          ) : null}
+        </View>
+      ) : null}
+      {badgeIsFilled ? (
+        <View
+          style={[
+            styles.badgeContainer,
+            {
+              right:
+                (badgeWithoutContent
+                  ? String(tab.props.badge).length * -2
+                  : 0) - 2,
+            },
+          ]}
+        >
+          {badgeWithoutContent ? (
+            <Badge visible={true} size={8} theme={theme} />
+          ) : (
+            <Badge visible={true} size={16} theme={theme}>
+              {tab.props.badge as any}
+            </Badge>
+          )}
+        </View>
+      ) : null}
+      {showTextLabel ? (
+        <AnimatedText
+          selectable={false}
+          style={[
+            styles.text,
+            iconPosition === 'top' && styles.textTop,
+            { ...theme.fonts.titleSmall, color, opacity },
+            tabLabelStyle,
+          ]}
+        >
+          {uppercase && !theme.isV3
+            ? tab.props.label.toUpperCase()
+            : tab.props.label}
+        </AnimatedText>
+      ) : null}
+    </>
+  );
   return (
     <View
       key={tab.props.label}
@@ -108,74 +203,7 @@ export default function TabsHeaderItem({
             iconPosition === 'top' && styles.touchableRippleInnerTop,
           ]}
         >
-          {tab.props.icon ? (
-            <View
-              style={[
-                styles.iconContainer,
-                iconPosition !== 'top' && styles.marginRight,
-              ]}
-            >
-              {tab.props.icon ? (
-                Platform.OS === 'android' ? (
-                  <Animated.View style={{ opacity }}>
-                    <MaterialCommunityIcon
-                      selectable={false}
-                      accessibilityElementsHidden={true}
-                      importantForAccessibility="no"
-                      name={tab.props.icon}
-                      color={textColor}
-                      size={24}
-                    />
-                  </Animated.View>
-                ) : (
-                  <MaterialCommunityIcon
-                    selectable={false}
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no"
-                    name={tab.props.icon}
-                    style={{ color, opacity }}
-                    size={24}
-                  />
-                )
-              ) : null}
-            </View>
-          ) : null}
-          {badgeIsFilled ? (
-            <View
-              style={[
-                styles.badgeContainer,
-                {
-                  right:
-                    (badgeWithoutContent
-                      ? String(tab.props.badge).length * -2
-                      : 0) - 2,
-                },
-              ]}
-            >
-              {badgeWithoutContent ? (
-                <Badge visible={true} size={8} theme={theme} />
-              ) : (
-                <Badge visible={true} size={16} theme={theme}>
-                  {tab.props.badge as any}
-                </Badge>
-              )}
-            </View>
-          ) : null}
-          {showTextLabel ? (
-            <AnimatedText
-              selectable={false}
-              style={[
-                styles.text,
-                iconPosition === 'top' && styles.textTop,
-                { ...theme.fonts.titleSmall, color, opacity },
-                tabLabelStyle,
-              ]}
-            >
-              {uppercase && !theme.isV3
-                ? tab.props.label.toUpperCase()
-                : tab.props.label}
-            </AnimatedText>
-          ) : null}
+          {HeaderItem}
         </View>
       </TouchableRipple>
     </View>
@@ -188,10 +216,15 @@ const styles = StyleSheet.create({
     left: 0,
     top: -2,
   },
-  tabRoot: { position: 'relative' },
+  tabRoot: {
+    position: 'relative',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
   tabRootFixed: { flex: 1 },
   touchableRipple: {
-    height: 48,
+    minHeight: 48,
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',

src/utils.tsx

@@ -8,6 +8,7 @@ import type {
 } from 'react-native';
 import type { MD3LightTheme } from 'react-native-paper';
 import type { MutableRefObject, RefObject } from 'react';
+import type TabsHeaderItem from './TabsHeaderItem';
 export type AnimatedViewStyle = Animated.AnimatedProps<StyleProp<ViewStyle>>;
 export type AnimatedTextStyle = Animated.AnimatedProps<StyleProp<TextStyle>>;
 export type Mode = 'fixed' | 'scrollable';
@@ -27,6 +28,7 @@ export interface SwiperRenderProps {
   mode: Mode;
   tabHeaderStyle: ViewStyle | undefined;
   tabLabelStyle: TextStyle | undefined;
+  TabHeaderComponent?: typeof TabsHeaderItem;
 }
 
 export interface SwiperProps {
@@ -42,6 +44,7 @@ export interface SwiperProps {
   disableSwipe?: boolean;
   tabHeaderStyle: ViewStyle | undefined;
   tabLabelStyle: TextStyle | undefined;
+  TabHeaderComponent?: typeof TabsHeaderItem;
 }
 
 export interface OffsetScrollArgs {