TabScreen label color change.

[Precho]

Any possiblity to change color individually for each label tab ? Currently i managed to change only active tab color by adding theme={{ colors: { primary: 'green' } }} to component.

[RichardLindhout]

Not possible yet. Currently our only goal is to support the material design spec and nothing more because of limited time. You can fork the library if you want to have different colors.

If different colors are added to the specification or are they already I can accept a PR for this!

[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.

[oualidor]

If any one looking for this. the label is based on 2 color from the theme prop, you can override it using the theme prob like this: theme={{ colors: { onSurface: 'white', onSurfaceVariant: 'lightblue', }}}

white for active and lightblue for not active, you can change it as you please

[adduserwyw]

onSurfaceVariant: 'lightblue',

Thank you that's the way to go!!

[Yandamuri]

@oualidor Where did you find the info about how to give the values to theme prop? I could find nothing in the documents. I am looking for fontSize, fontColor, background color of the tabs ect... Can you help me here?

[oualidor]

@Yandamuri. Unfortunately they don't provide that information in the documentation. I had to do manual debugging for that

[Yandamuri]

@Yandamuri. Unfortunately they don't provide that information in the documentation. I had to do manual debugging for that

Do you mean by going through the source code? If so, Can you please let me know where you found these props in source code?

[oualidor]

@Yandamuri. Unfortunately they don't provide that information in the documentation. I had to do manual debugging for that

Do you mean by going through the source code? If so, Can you please let me know where you found these props in source code?

Not by goingthrew the source code, I just resume that the style has to be depending on theme provided by the PaperProvider, so i tried changing every single text variant until i found the ones it depends on. I want to mention that if you have an other problem, try opening a new issue and we cant work on it together. Good luck

[Yandamuri]

@Yandamuri. Unfortunately they don't provide that information in the documentation. I had to do manual debugging for that

Do you mean by going through the source code? If so, Can you please let me know where you found these props in source code?

Not by goingthrew the source code, I just resume that the style has to be depending on theme provided by the PaperProvider, so i tried changing every single text variant until i found the ones it depends on. I want to mention that if you have an other problem, try opening a new issue and we cant work on it together. Good luck

Thank you so much for patience. I will try to explore the options available. BTW, Do you have any example code with all the props you ahve tried as of now?

[cyrilchapon]

Once theme relevant keys found, I guess we could just PR the docs for this.

Indeed the goal of this project is to align with material design guidelines, but a hidden goal is to align with react-native-paper; and react-native-paper does provide relevant theme mapping information on each component documentation. We could just replicate this.

@RichardLindhout what do you think ?

[Jayasrirameshbabu]

can u please work on those things like fontSize, fontColor, background color of the tabs ect..., if these are added the library should work very nice, i am also struggling this issue.