Merge pull request #57 from JPStrydom/main

feat: add support for styling the tab label.

src/Swiper.native.tsx

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

src/Swiper.tsx

@@ -16,6 +16,7 @@ function Swiper(props: SwiperProps) {
     uppercase,
     mode,
     tabHeaderStyle,
+    tabLabelStyle,
   } = props;
 
   const index = useTabIndex();
@@ -39,6 +40,7 @@ function Swiper(props: SwiperProps) {
     uppercase,
     mode,
     tabHeaderStyle,
+    tabLabelStyle,
   };
 
   return (

src/Tabs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
 import { withTheme } from 'react-native-paper';
 import Swiper from './Swiper';
 import type { MD3LightTheme } from 'react-native-paper';
@@ -17,6 +17,7 @@ function Tabs({
   showLeadingSpace = true,
   disableSwipe = false,
   tabHeaderStyle,
+  tabLabelStyle,
   ...rest
 }: {
   children: any;
@@ -30,6 +31,7 @@ function Tabs({
   mode?: Mode;
   disableSwipe?: boolean;
   tabHeaderStyle?: ViewStyle | undefined;
+  tabLabelStyle?: TextStyle | undefined;
 }) {
   const children = React.Children.toArray(rest.children).filter(Boolean);
 
@@ -45,6 +47,7 @@ function Tabs({
       mode={mode}
       disableSwipe={disableSwipe}
       tabHeaderStyle={tabHeaderStyle}
+      tabLabelStyle={tabLabelStyle}
     >
       {children}
     </Swiper>

src/TabsHeader.tsx

@@ -26,6 +26,7 @@ export default function TabsHeader({
   uppercase,
   mode,
   tabHeaderStyle,
+  tabLabelStyle,
   children,
 }: SwiperRenderProps) {
   const { index, goTo } = React.useContext(TabsContext);
@@ -214,6 +215,7 @@ export default function TabsHeader({
               iconPosition={iconPosition}
               showTextLabel={showTextLabel}
               mode={mode}
+              tabLabelStyle={tabLabelStyle}
             />
           ))}
           <Animated.View

src/TabsHeaderItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Animated, StyleSheet, View, Platform } from 'react-native';
-import type { LayoutChangeEvent, TextProps } from 'react-native';
+import type { LayoutChangeEvent, TextProps, TextStyle } from 'react-native';
 import { Badge, Text, TouchableRipple } from 'react-native-paper';
 import type { MD3LightTheme } from 'react-native-paper';
 import type { ReactElement } from 'react';
@@ -30,6 +30,7 @@ export default function TabsHeaderItem({
   mode,
   iconPosition,
   showTextLabel,
+  tabLabelStyle,
 }: {
   tab: ReactElement<TabScreenProps>;
   tabIndex: number;
@@ -46,6 +47,7 @@ export default function TabsHeaderItem({
   iconPosition?: IconPosition;
   showTextLabel?: boolean;
   mode: Mode;
+  tabLabelStyle?: TextStyle | undefined;
 }) {
   const baseColor = theme.colors.primary;
   const rippleColor = React.useMemo(
@@ -151,6 +153,7 @@ export default function TabsHeaderItem({
                 styles.text,
                 iconPosition === 'top' && styles.textTop,
                 { ...theme.fonts.titleSmall, color, opacity },
+                tabLabelStyle,
               ]}
             >
               {uppercase && !theme.isV3

src/utils.tsx

@@ -26,6 +26,7 @@ export interface SwiperRenderProps {
   uppercase: boolean;
   mode: Mode;
   tabHeaderStyle: ViewStyle | undefined;
+  tabLabelStyle: TextStyle | undefined;
 }
 
 export interface SwiperProps {
@@ -40,6 +41,7 @@ export interface SwiperProps {
   mode: Mode;
   disableSwipe?: boolean;
   tabHeaderStyle: ViewStyle | undefined;
+  tabLabelStyle: TextStyle | undefined;
 }
 
 export interface OffsetScrollArgs {