Include Label Style, Active Color Change, and Height

[froilansam]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-paper-tabs@0.7.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper-tabs/lib/typescript/Tabs.d.ts b/node_modules/react-native-paper-tabs/lib/typescript/Tabs.d.ts
index 9c6aea9..511d251 100644
--- a/node_modules/react-native-paper-tabs/lib/typescript/Tabs.d.ts
+++ b/node_modules/react-native-paper-tabs/lib/typescript/Tabs.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ViewStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
 import type { Theme } from 'react-native-paper/lib/typescript/types';
 import type { IconPosition, Mode } from './utils';
 declare function Tabs({ onChangeIndex, children, persistKey, theme, dark, style, defaultIndex, mode, uppercase, iconPosition, showTextLabel, showLeadingSpace, disableSwipe, }: {
@@ -31,7 +31,10 @@ declare const _default: (React.ComponentClass<Pick<{
     mode?: Mode | undefined;
     onChangeIndex?: ((index: number) => void) | undefined;
     disableSwipe?: boolean | undefined;
-}, "style" | "children" | "uppercase" | "mode" | "iconPosition" | "showTextLabel" | "dark" | "showLeadingSpace" | "defaultIndex" | "onChangeIndex" | "disableSwipe" | "persistKey"> & {
+    height?: number;
+    labelStyle?: TextStyle;
+    activeColor?: string;
+}, "style" | "children" | "uppercase" | "mode" | "iconPosition" | "showTextLabel" | "dark" | "showLeadingSpace" | "defaultIndex" | "onChangeIndex" | "disableSwipe" | "persistKey" | "activeColor" | "labelStyle" | "height"> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
 }, any> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<{
     children: any;
@@ -47,6 +50,9 @@ declare const _default: (React.ComponentClass<Pick<{
     mode?: Mode | undefined;
     onChangeIndex?: ((index: number) => void) | undefined;
     disableSwipe?: boolean | undefined;
+    height?: number;
+    labelStyle?: TextStyle;
+    activeColor?: string;
 }, any> & typeof Tabs) | (React.FunctionComponent<{
     children: any;
     persistKey?: string | undefined;
@@ -61,6 +67,9 @@ declare const _default: (React.ComponentClass<Pick<{
     mode?: Mode | undefined;
     onChangeIndex?: ((index: number) => void) | undefined;
     disableSwipe?: boolean | undefined;
+    height?: number;
+    labelStyle?: TextStyle;
+    activeColor?: string;
 }> & typeof Tabs), {}>) | (React.FunctionComponent<Pick<{
     children: any;
     persistKey?: string | undefined;
@@ -75,7 +84,10 @@ declare const _default: (React.ComponentClass<Pick<{
     mode?: Mode | undefined;
     onChangeIndex?: ((index: number) => void) | undefined;
     disableSwipe?: boolean | undefined;
-}, "style" | "children" | "uppercase" | "mode" | "iconPosition" | "showTextLabel" | "dark" | "showLeadingSpace" | "defaultIndex" | "onChangeIndex" | "disableSwipe" | "persistKey"> & {
+    height?: number;
+    labelStyle?: TextStyle;
+    activeColor?: string;
+}, "style" | "children" | "uppercase" | "mode" | "iconPosition" | "showTextLabel" | "dark" | "showLeadingSpace" | "defaultIndex" | "onChangeIndex" | "disableSwipe" | "persistKey" | "activeColor" | "labelStyle" | "height"> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<(React.ComponentClass<{
     children: any;
@@ -91,6 +103,9 @@ declare const _default: (React.ComponentClass<Pick<{
     mode?: Mode | undefined;
     onChangeIndex?: ((index: number) => void) | undefined;
     disableSwipe?: boolean | undefined;
+    height?: number;
+    labelStyle?: TextStyle;
+    activeColor?: string;
 }, any> & typeof Tabs) | (React.FunctionComponent<{
     children: any;
     persistKey?: string | undefined;
@@ -105,5 +120,8 @@ declare const _default: (React.ComponentClass<Pick<{
     mode?: Mode | undefined;
     onChangeIndex?: ((index: number) => void) | undefined;
     disableSwipe?: boolean | undefined;
+    height?: number;
+    labelStyle?: TextStyle;
+    activeColor?: string;
 }> & typeof Tabs), {}>);
 export default _default;
diff --git a/node_modules/react-native-paper-tabs/src/Swiper.native.tsx b/node_modules/react-native-paper-tabs/src/Swiper.native.tsx
index 66ba59f..3cf4244 100644
--- a/node_modules/react-native-paper-tabs/src/Swiper.native.tsx
+++ b/node_modules/react-native-paper-tabs/src/Swiper.native.tsx
@@ -25,6 +25,9 @@ function SwiperNative(props: SwiperProps) {
     onChangeIndex,
     showLeadingSpace,
     disableSwipe,
+    activeColor,
+    labelStyle,
+    height
   } = props;
   const indexRef = React.useRef<number>(defaultIndex || 0);
   const [index, setIndex] = React.useState<number>(defaultIndex || 0);
@@ -92,6 +95,9 @@ function SwiperNative(props: SwiperProps) {
     showLeadingSpace,
     uppercase,
     mode,
+    activeColor,
+    labelStyle, 
+    height,
   };
   return (
     <>
diff --git a/node_modules/react-native-paper-tabs/src/Swiper.tsx b/node_modules/react-native-paper-tabs/src/Swiper.tsx
index 4c3db13..51a026e 100644
--- a/node_modules/react-native-paper-tabs/src/Swiper.tsx
+++ b/node_modules/react-native-paper-tabs/src/Swiper.tsx
@@ -17,7 +17,11 @@ function Swiper(props: SwiperProps) {
     showLeadingSpace,
     uppercase,
     mode,
+    activeColor,
+    labelStyle,
+    height
   } = props;
+
   const [index, setIndex] = React.useState<number>(defaultIndex || 0);
   const goTo = React.useCallback(
     (ind: number) => {
@@ -47,8 +51,12 @@ function Swiper(props: SwiperProps) {
     showLeadingSpace,
     uppercase,
     mode,
+    activeColor,
+    labelStyle,
+    height
   };

+
   return (
     <View style={styles.root}>
       <TabsHeader {...renderProps} />
diff --git a/node_modules/react-native-paper-tabs/src/Tabs.tsx b/node_modules/react-native-paper-tabs/src/Tabs.tsx
index f64aa9f..87fb6f0 100644
--- a/node_modules/react-native-paper-tabs/src/Tabs.tsx
+++ b/node_modules/react-native-paper-tabs/src/Tabs.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ViewStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
 import { withTheme } from 'react-native-paper';
 import Swiper from './Swiper';
 import type { Theme } from 'react-native-paper/lib/typescript/types';
@@ -24,6 +24,9 @@ function Tabs({
   showTextLabel = true,
   showLeadingSpace = true,
   disableSwipe = false,
+  activeColor,
+  labelStyle, 
+  height
 }: {
   children: any;
   persistKey?: string;
@@ -38,6 +41,9 @@ function Tabs({
   mode?: Mode;
   onChangeIndex?: (index: number) => void;
   disableSwipe?: boolean;
+  activeColor?: string
+  labelStyle?: TextStyle;
+  height?: number;
 }) {
   const onInnerChangeIndex = React.useCallback(
     (newIndex) => {
@@ -48,7 +54,6 @@ function Tabs({
     },
     [persistKey, onChangeIndex]
   );
-
   return (
     <Swiper
       style={style}
@@ -59,8 +64,11 @@ function Tabs({
       uppercase={uppercase}
       iconPosition={iconPosition}
       showTextLabel={showTextLabel}
+      labelStyle={labelStyle}
       showLeadingSpace={showLeadingSpace}
       mode={mode}
+      height={height}
+      activeColor={activeColor}
       disableSwipe={disableSwipe}
     >
       {children}
diff --git a/node_modules/react-native-paper-tabs/src/TabsHeader.tsx b/node_modules/react-native-paper-tabs/src/TabsHeader.tsx
index 3d67c12..782bbc3 100644
--- a/node_modules/react-native-paper-tabs/src/TabsHeader.tsx
+++ b/node_modules/react-native-paper-tabs/src/TabsHeader.tsx
@@ -29,8 +29,11 @@ export default function TabsHeader({
   showLeadingSpace,
   uppercase,
   mode,
+  labelStyle,
+  height,
+  ...props
 }: SwiperRenderProps) {
-  const { colors, dark: isDarkTheme, mode: themeMode } = theme;
+const { colors, dark: isDarkTheme, mode: themeMode } = theme;
   const {
     backgroundColor: customBackground,
     elevation = 4,
@@ -55,8 +58,8 @@ export default function TabsHeader({
         : // @ts-ignore
           !color(backgroundColor).isLight();
   }
-  const textColor = isDark ? '#fff' : '#000';
-  const activeColor = hasPrimaryBackground ? textColor : theme.colors.primary;
+  const textColor = props.activeColor ? props.activeColor : isDark ? '#fff' : '#000';
+  const activeColor = props.activeColor ? props.activeColor : hasPrimaryBackground ? textColor : theme.colors.primary;

   const innerScrollSize = React.useRef<number | null>(null);
   const scrollX = React.useRef<number>(0);
@@ -74,6 +77,8 @@ export default function TabsHeader({
     childrenCount: children.length,
   });

+
+
   const onTabsLayout = React.useCallback(
     (e: LayoutChangeEvent) => {
       setTabsLayout(e.nativeEvent.layout);
@@ -150,10 +155,12 @@ export default function TabsHeader({
     <View style={styles.relative}>
       <Surface
         style={[
+          
           { backgroundColor, elevation },
           restStyle,
           styles.tabs,
           iconPosition === 'top' && styles.tabsTopIcon,
+          !!height && { height },
         ]}
         onLayout={onTabsLayout}
       >
@@ -194,6 +201,7 @@ export default function TabsHeader({
               uppercase={uppercase}
               iconPosition={iconPosition}
               showTextLabel={showTextLabel}
+              labelStyle={labelStyle}
               mode={mode}
             />
           ))}
@@ -209,16 +217,7 @@ export default function TabsHeader({
             ]}
           />
         </ScrollView>
-        <Animated.View
-          style={[
-            styles.removeTopShadow,
-            {
-              height: elevation,
-              backgroundColor,
-              top: -elevation,
-            },
-          ]}
-        />
+       
       </Surface>
     </View>
   );
diff --git a/node_modules/react-native-paper-tabs/src/TabsHeaderItem.tsx b/node_modules/react-native-paper-tabs/src/TabsHeaderItem.tsx
index 27d75b9..d757eda 100644
--- a/node_modules/react-native-paper-tabs/src/TabsHeaderItem.tsx
+++ b/node_modules/react-native-paper-tabs/src/TabsHeaderItem.tsx
@@ -6,6 +6,7 @@ import {
   View,
   Platform,
   TextProps,
+  TextStyle,
 } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 import type { ReactElement } from 'react';
@@ -35,6 +36,7 @@ export default function TabsHeaderItem({
   mode,
   iconPosition,
   showTextLabel,
+  labelStyle
 }: {
   tab: ReactElement<TabScreenProps>;
   tabIndex: number;
@@ -51,6 +53,7 @@ export default function TabsHeaderItem({
   iconPosition?: IconPosition;
   showTextLabel?: boolean;
   mode: Mode;
+  labelStyle?: TextStyle
 }) {
   const rippleColor = React.useMemo(
     () =>
@@ -128,6 +131,7 @@ export default function TabsHeaderItem({
                 styles.text,
                 iconPosition === 'top' && styles.textTop,
                 { ...theme.fonts.medium, color, opacity },
+                {...labelStyle}
               ]}
             >
               {uppercase ? tab.props.label.toUpperCase() : tab.props.label}

This issue body was partially generated by patch-package.

[JPStrydom]

This would be an extremely useful change!

[RichardLindhout]

Currently goal is to implement the colors in Material You as closely as possible, however I understand more customization would be nice. Only I have now changed a lot of stuff in implementation. PR is welcome

[JPStrydom]

Would also be very useful if we could change the font family and the leading space size (width).

[nasirdeveloper]

Would also be very useful if we could change the font family and the leading space size (width).

Yes this feature is essential to implement .

[JPStrydom]

Here's a PR to fix this issue. Would one of the maintainers please look at it and let us know if they have any feedback?