Tab active color change on tap (click)

[CvdPost]

Current behaviour

When adding an onsurface color to the and tapping (or clicking in sim) the active color doesn't change with the tab change. It is always one "behind" the active tab while pressing the tabs. When you swipe however it works as intended

Expected behaviour

Tappingon a tab to change to that tab should change the active (onSurface) tab color.

How to reproduce?

<TabsProvider defaultIndex={0}>
          <Tabs
            mode="scrollable"
            theme={{
              colors: {
                primary: blue,
                onSurface: blue,
                onSurfaceVariant: gray,
              },
            }}
            style={style.tabsStyle}
            showLeadingSpace={false}
            tabLabelStyle={style.tabsLabelStyle}>
                   .....
           </Tabs>
</TabsProvider>

Preview

Simulator.Screen.Recording.-.iPhone.16.-.2025-07-15.at.10.09.03.mp4

What have you tried so far?

Your Environment

software	version
ios	18.4
android	x
react-native	0.79.2
react-native-paper	5.12.3
node	24.2.0
npm or yarn	11.3.0
expo sdk	53.0.11

[jslok]

Same issue here. Somewhat solved by setting tabLabelStyle, however I don't think there is a way to set active and inactive label styles seperately. Could be wrong.

            tabLabelStyle={{
              ...theme.fonts.medium,
              color: theme.colors.primary,
            }}

[minhbka]

I encountered the same issue and applied the following patch as a workaround.

diff --git a/node_modules/react-native-paper-tabs/.DS_Store b/node_modules/react-native-paper-tabs/.DS_Store
new file mode 100644
index 0000000..6bfb662
Binary files /dev/null and b/node_modules/react-native-paper-tabs/.DS_Store differ
diff --git a/node_modules/react-native-paper-tabs/lib/commonjs/internal.native.js b/node_modules/react-native-paper-tabs/lib/commonjs/internal.native.js
index aa2fb8d..2525952 100644
--- a/node_modules/react-native-paper-tabs/lib/commonjs/internal.native.js
+++ b/node_modules/react-native-paper-tabs/lib/commonjs/internal.native.js
@@ -16,16 +16,14 @@ function useAnimatedText({
   position,
   offset,
   textColor,
-  activeColor
+  activeColor,
+  active
 }) {
   const childrenA = Array(childrenCount).fill(undefined);
   const positionWithOffset = _reactNative.Animated.add(position, offset);
   const inputRange = childrenA.map((_, i) => i);
   return {
-    color: childrenA.length <= 1 ? activeColor : positionWithOffset.interpolate({
-      inputRange: inputRange,
-      outputRange: childrenA.map((_, i) => i === tabIndex ? activeColor : textColor)
-    }),
+    color: active ? activeColor : textColor,
     opacity: childrenA.length <= 1 ? 1 : positionWithOffset.interpolate({
       inputRange: inputRange,
       outputRange: childrenA.map((_, i) => i === tabIndex ? 1 : 0.6)
diff --git a/node_modules/react-native-paper-tabs/lib/module/internal.native.js b/node_modules/react-native-paper-tabs/lib/module/internal.native.js
index 5bb6520..3049f22 100644
--- a/node_modules/react-native-paper-tabs/lib/module/internal.native.js
+++ b/node_modules/react-native-paper-tabs/lib/module/internal.native.js
@@ -8,16 +8,14 @@ export function useAnimatedText({
   position,
   offset,
   textColor,
-  activeColor
+  activeColor,
+  active
 }) {
   const childrenA = Array(childrenCount).fill(undefined);
   const positionWithOffset = Animated.add(position, offset);
   const inputRange = childrenA.map((_, i) => i);
   return {
-    color: childrenA.length <= 1 ? activeColor : positionWithOffset.interpolate({
-      inputRange: inputRange,
-      outputRange: childrenA.map((_, i) => i === tabIndex ? activeColor : textColor)
-    }),
+    color: active ? activeColor : textColor,
     opacity: childrenA.length <= 1 ? 1 : positionWithOffset.interpolate({
       inputRange: inputRange,
       outputRange: childrenA.map((_, i) => i === tabIndex ? 1 : 0.6)
diff --git a/node_modules/react-native-paper-tabs/src/internal.native.ts b/node_modules/react-native-paper-tabs/src/internal.native.ts
index d03b860..d9be2f4 100644
--- a/node_modules/react-native-paper-tabs/src/internal.native.ts
+++ b/node_modules/react-native-paper-tabs/src/internal.native.ts
@@ -16,21 +16,14 @@ export function useAnimatedText({
   offset,
   textColor,
   activeColor,
+  active,
 }: AnimatedColorArgs): AnimatedTextStyle {
   const childrenA = Array(childrenCount).fill(undefined);
   const positionWithOffset = Animated.add(position!, offset!);
   const inputRange = childrenA.map((_, i) => i);
 
   return {
-    color:
-      childrenA.length <= 1
-        ? activeColor
-        : positionWithOffset!.interpolate({
-            inputRange: inputRange,
-            outputRange: childrenA.map((_, i) =>
-              i === tabIndex ? activeColor : textColor
-            ),
-          }),
+    color: active ? activeColor : textColor,
     opacity:
       childrenA.length <= 1
         ? 1