@zoverdoser/react-native-tab-view 1.0.2 → 1.3.1

package/lib/typescript/src/SceneView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SceneView.d.ts","sourceRoot":"","sources":["../../../src/SceneView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAC9C,iBAAiB,GAAG;IAClB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,EAAE,EACzC,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,GACN,EAAE,KAAK,CAAC,CAAC,CAAC,2CAqEV"}
+{"version":3,"file":"SceneView.d.ts","sourceRoot":"","sources":["../../../src/SceneView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,YAAS,CAAC;AAEjB,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAC9C,iBAAiB,GAAG;IAClB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,EAAE,EACzC,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,GACN,EAAE,KAAK,CAAC,CAAC,CAAC,2CAqEV"}

package/lib/typescript/src/TabBar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type PressableAndroidRippleConfig, type StyleProp, type ViewStyle } from 'react-native';
-import { type Props as IndicatorProps } from './TabBarIndicator';
-import { type Props as TabBarItemProps } from './TabBarItem';
-import type { AnimatedStyles, Event, LocaleDirection, NavigationState, Route, Scene, SceneRendererProps, TabDescriptor } from './types';
+import { type Props as IndicatorProps } from './TabBarIndicator.js';
+import { type Props as TabBarItemProps } from './TabBarItem.js';
+import type { AnimatedStyles, Event, LocaleDirection, NavigationState, Route, Scene, SceneRendererProps, TabDescriptor } from './types.js';
 export type Props<T extends Route> = SceneRendererProps & {
     navigationState: NavigationState<T>;
     scrollEnabled?: boolean;

package/lib/typescript/src/TabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAQL,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAGd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,KAAK,KAAK,IAAI,cAAc,EAE7B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,KAAK,IAAI,eAAe,EAAc,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EACV,cAAc,EACd,KAAK,EAEL,eAAe,EACf,eAAe,EACf,KAAK,EACL,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KACxC,KAAK,CAAC,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,uBAAuB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,4BAA4B,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAkRF,wBAAgB,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,EACtC,eAAwC,EACxC,GAAO,EACP,aAAa,EACb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,OAAO,EACP,qBAAqB,EACrB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,SAA4D,EAC5D,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,cAAc,EACd,OAAO,EACP,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,2CA0UV"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAQL,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,KAAK,KAAK,IAAI,cAAc,EAE7B,MAAM,sBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,KAAK,IAAI,eAAe,EAAc,MAAM,iBAAc,CAAC;AACzE,OAAO,KAAK,EACV,cAAc,EACd,KAAK,EAEL,eAAe,EACf,eAAe,EACf,KAAK,EACL,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,YAAS,CAAC;AAGjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KACxC,KAAK,CAAC,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,uBAAuB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,4BAA4B,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAkRF,wBAAgB,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,EACtC,eAAwC,EACxC,GAAO,EACP,aAAa,EACb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,OAAO,EACP,qBAAqB,EACrB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,SAA4D,EAC5D,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,cAAc,EACd,OAAO,EACP,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,2CA0SV"}

package/lib/typescript/src/TabBarIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import type { LocaleDirection, NavigationState, Route, SceneRendererProps } from './types';
+import type { LocaleDirection, NavigationState, Route, SceneRendererProps } from './types.js';
 export type GetTabWidth = (index: number) => number;
 export type Props<T extends Route> = SceneRendererProps & {
     navigationState: NavigationState<T>;

package/lib/typescript/src/TabBarIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBarIndicator.d.ts","sourceRoot":"","sources":["../../../src/TabBarIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA2CF,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,EAAE,EAC/C,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,KAAK,EACL,QAAQ,GACT,EAAE,KAAK,CAAC,CAAC,CAAC,2CAiGV"}
+{"version":3,"file":"TabBarIndicator.d.ts","sourceRoot":"","sources":["../../../src/TabBarIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,YAAS,CAAC;AAGjB,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAsGF,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,EAAE,EAC/C,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,KAAK,EACL,QAAQ,GACT,EAAE,KAAK,CAAC,CAAC,CAAC,2CAmLV"}

package/lib/typescript/src/TabBarItem.d.ts

@@ -1,5 +1,5 @@
 import { Animated, type LayoutChangeEvent, type PressableAndroidRippleConfig, type StyleProp, type ViewStyle } from 'react-native';
-import type { AnimatedStyles, NavigationState, Route, TabDescriptor } from './types';
+import type { AnimatedStyles, NavigationState, Route, TabDescriptor } from './types.js';
 export type Props<T extends Route> = TabDescriptor<T> & {
     position: Animated.AnimatedInterpolation<number>;
     route: T;

package/lib/typescript/src/TabBarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBarItem.d.ts","sourceRoot":"","sources":["../../../src/TabBarItem.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,KAAK,iBAAiB,EAEtB,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IACtD,QAAQ,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,KAAK,EAAE,CAAC,CAAC;IACT,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,4BAA4B,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAkNF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsB1D"}
+{"version":3,"file":"TabBarItem.d.ts","sourceRoot":"","sources":["../../../src/TabBarItem.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,KAAK,iBAAiB,EAEtB,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,aAAa,EACd,MAAM,YAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IACtD,QAAQ,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,KAAK,EAAE,CAAC,CAAC;IACT,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,4BAA4B,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAkNF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsB1D"}

package/lib/typescript/src/TabBarItemLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBarItemLabel.d.ts","sourceRoot":"","sources":["../../../src/TabBarItemLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACvE,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,6FAOvB,oBAAoB,oDAmBxB,CAAC"}
+{"version":3,"file":"TabBarItemLabel.d.ts","sourceRoot":"","sources":["../../../src/TabBarItemLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEvE,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,6FAOvB,oBAAoB,oDAmBxB,CAAC"}

package/lib/typescript/src/TabView.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import type { Layout, LocaleDirection, NavigationState, PagerProps, Route, SceneRendererProps, TabDescriptor } from './types';
+import type { Layout, LocaleDirection, NavigationState, PagerProps, Route, SceneRendererProps, TabDescriptor } from './types.js';
 export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
     onIndexChange: (index: number) => void;
     onTabSelect?: (props: {

package/lib/typescript/src/TabView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG;IACzE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GAAG;QAC1B,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;KACvD,KACE,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAClC,CAAC;AAIF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,WAAW,EACX,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAoD,EAEpD,YAA+C,EAC/C,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,EACd,OAAO,EAAE,YAAY,EACrB,aAAa,GACd,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsHV"}
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,YAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG;IACzE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GAAG;QAC1B,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;KACvD,KACE,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAClC,CAAC;AAIF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,WAAW,EACX,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAoD,EAEpD,YAA+C,EAC/C,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,EACd,OAAO,EAAE,YAAY,EACrB,aAAa,GACd,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsHV"}

package/lib/typescript/src/index.d.ts

@@ -1,11 +1,11 @@
-export { SceneMap } from './SceneMap';
-export type { Props as TabBarProps } from './TabBar';
-export { TabBar } from './TabBar';
-export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
-export { TabBarIndicator } from './TabBarIndicator';
-export type { Props as TabBarItemProps } from './TabBarItem';
-export { TabBarItem } from './TabBarItem';
-export type { Props as TabViewProps } from './TabView';
-export { TabView } from './TabView';
-export type { AnimatedStyles, NavigationState, Route, SceneRendererProps, TabDescriptor, } from './types';
+export { SceneMap } from './SceneMap.js';
+export type { Props as TabBarProps } from './TabBar.js';
+export { TabBar } from './TabBar.js';
+export type { Props as TabBarIndicatorProps } from './TabBarIndicator.js';
+export { TabBarIndicator } from './TabBarIndicator.js';
+export type { Props as TabBarItemProps } from './TabBarItem.js';
+export { TabBarItem } from './TabBarItem.js';
+export type { Props as TabViewProps } from './TabView.js';
+export { TabView } from './TabView.js';
+export type { AnimatedStyles, NavigationState, Route, SceneRendererProps, TabDescriptor, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAC;AACtC,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,aAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAU,CAAC;AAClC,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,sBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACpD,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,iBAAc,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAC1C,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,cAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAW,CAAC;AACpC,YAAY,EACV,cAAc,EACd,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,YAAS,CAAC"}

package/lib/typescript/src/useAnimatedValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedValue.d.ts","sourceRoot":"","sources":["../../../src/useAnimatedValue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAOzB,QAAQ,CAAC,KAAK,CACzC"}
+{"version":3,"file":"useAnimatedValue.d.ts","sourceRoot":"","sources":["../../../src/useAnimatedValue.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,CAAC,KAAK,CAQrE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zoverdoser/react-native-tab-view",
   "description": "Tab view component for React Native",
-  "version": "1.0.2",
+  "version": "1.3.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -52,7 +52,7 @@
     "del-cli": "^6.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-builder-bob": "^0.40.17",
+    "react-native-builder-bob": "^0.42.1",
     "react-native-pager-view": "6.9.1",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.2"

package/src/PagerViewAdapter.tsx

@@ -102,7 +102,7 @@ export function PagerViewAdapter<T extends Route>({
 
     switch (pageScrollState) {
       case 'idle':
-        offset.setValue(0);
+        // offset.setValue(0);
         onSwipeEnd?.();
         return;
       case 'dragging': {

package/src/TabBar.tsx

@@ -12,9 +12,7 @@ import {
   StyleSheet,
   View,
   type ViewStyle,
-  type ViewToken,
 } from 'react-native';
-import useLatestCallback from 'use-latest-callback';
 
 import {
   type Props as IndicatorProps,
@@ -363,7 +361,6 @@ export function TabBar<T extends Route>({
   const flatListRef = React.useRef<FlatList | null>(null);
   const isFirst = React.useRef(true);
   const scrollAmount = useAnimatedValue(0);
-  const measuredTabWidths = React.useRef<Record<string, number>>({});
   const { routes } = navigationState;
   const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
   const isWidthDynamic = flattenedTabWidth === 'auto';
@@ -443,6 +440,10 @@ export function TabBar<T extends Route>({
     [direction, layout.width, scrollAmount, tabBarWidth]
   );
 
+  const measuredTabWidths = React.useRef<Record<string, number>>({});
+  const animationFrameHandle =
+    React.useRef<ReturnType<typeof requestAnimationFrame>>(null);
+
   const renderItem = React.useCallback(
     ({ item: route, index }: ListRenderItemInfo<T>) => {
       const {
@@ -457,28 +458,13 @@ export function TabBar<T extends Route>({
         ? (e: LayoutChangeEvent) => {
             measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
 
-            // When we have measured widths for all of the tabs, we should updates the state
-            // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-            // If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
-            if (
-              routes.length > MEASURE_PER_BATCH &&
-              index === MEASURE_PER_BATCH &&
-              routes
-                .slice(0, MEASURE_PER_BATCH)
-                .every(
-                  (r) => typeof measuredTabWidths.current[r.key] === 'number'
-                )
-            ) {
-              setTabWidths({ ...measuredTabWidths.current });
-            } else if (
-              routes.every(
-                (r) => typeof measuredTabWidths.current[r.key] === 'number'
-              )
-            ) {
-              // When we have measured widths for all of the tabs, we should updates the state
-              // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
-              setTabWidths({ ...measuredTabWidths.current });
+            if (animationFrameHandle.current != null) {
+              cancelAnimationFrame(animationFrameHandle.current);
             }
+
+            animationFrameHandle.current = requestAnimationFrame(() => {
+              setTabWidths({ ...measuredTabWidths.current });
+            });
           }
         : undefined;
 
@@ -597,32 +583,13 @@ export function TabBar<T extends Route>({
     [scrollAmount]
   );
 
-  const handleViewableItemsChanged = useLatestCallback(
-    ({ changed }: { changed: ViewToken[] }) => {
-      if (routes.length <= MEASURE_PER_BATCH) {
-        return;
-      }
-      // Get next vievable item
-      const item = changed[changed.length - 1];
-      const index = item?.index || 0;
-      if (
-        item.isViewable &&
-        (index % 10 === 0 ||
-          index === navigationState.index ||
-          index === routes.length - 1)
-      ) {
-        setTabWidths({ ...measuredTabWidths.current });
-      }
-    }
-  );
-
   return (
     <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
       <Animated.View
         pointerEvents="none"
         style={[
           styles.indicatorContainer,
-          scrollEnabled ? { transform: [{ translateX }] as any } : null,
+          scrollEnabled ? { transform: [{ translateX }] } : null,
           scrollEnabled ? { width: tabBarWidth } : null,
           indicatorContainerStyle,
         ]}
@@ -668,7 +635,6 @@ export function TabBar<T extends Route>({
           scrollEnabled={scrollEnabled}
           bounces={bounces}
           initialNumToRender={MEASURE_PER_BATCH}
-          onViewableItemsChanged={handleViewableItemsChanged}
           alwaysBounceHorizontal={false}
           scrollsToTop={false}
           showsHorizontalScrollIndicator={false}

package/src/TabBarIndicator.tsx

@@ -30,35 +30,94 @@ export type Props<T extends Route> = SceneRendererProps & {
 
 const useNativeDriver = Platform.OS !== 'web';
 
+const calculateSize = (
+  value: ViewStyle['width'] | undefined,
+  referenceWidth: number
+): number | undefined => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (typeof value === 'string' && value.endsWith('%')) {
+    const parsed = parseFloat(value);
+
+    if (Number.isFinite(parsed)) {
+      return referenceWidth * (parsed / 100);
+    }
+  }
+
+  return undefined;
+};
+
+const getIndicatorWidthWithMargins = (
+  width: number,
+  style: ViewStyle | undefined,
+  direction: LocaleDirection
+) => {
+  const marginHorizontal = style?.marginHorizontal ?? style?.margin;
+
+  const leftMargin =
+    (direction === 'ltr' ? style?.marginStart : style?.marginEnd) ??
+    style?.marginLeft ??
+    marginHorizontal;
+
+  const rightMargin =
+    (direction === 'rtl' ? style?.marginStart : style?.marginEnd) ??
+    style?.marginRight ??
+    marginHorizontal;
+
+  return Math.max(
+    0,
+    width -
+      (calculateSize(leftMargin, width) ?? 0) -
+      (calculateSize(rightMargin, width) ?? 0)
+  );
+};
+
+const getIndicatorWidth = (
+  tabWidth: number,
+  width: number | `${number}%`,
+  style: ViewStyle | undefined,
+  direction: LocaleDirection
+): number | `${number}%` => {
+  const customWidth = calculateSize(style?.width, tabWidth);
+
+  if (customWidth !== undefined) {
+    return customWidth;
+  }
+
+  if (typeof width === 'number') {
+    return getIndicatorWidthWithMargins(width, style, direction);
+  }
+
+  return width;
+};
+
 const getTranslateX = (
   position: Animated.AnimatedInterpolation<number>,
   routes: Route[],
   getTabWidth: GetTabWidth,
   direction: LocaleDirection,
   gap?: number,
-  width?: number | string
+  getWidth?: (index: number) => number | undefined
 ) => {
   const inputRange = routes.map((_, i) => i);
+  const outputRange = routes.map((_, i) => {
+    let sumTabWidth = 0;
 
-  // every index contains widths at all previous indices
-  const outputRange = routes.reduce<number[]>((acc, _, i) => {
-    if (typeof width === 'number') {
-      if (i === 0) return [getTabWidth(i) / 2 - width / 2];
+    for (let j = 0; j < i; j++) {
+      sumTabWidth += getTabWidth(j);
+    }
 
-      let sumTabWidth = 0;
-      for (let j = 0; j < i; j++) {
-        sumTabWidth += getTabWidth(j);
-      }
+    const indicatorWidth = getWidth?.(i);
+    const tabOffset = sumTabWidth + (gap ? gap * i : 0);
 
-      return [
-        ...acc,
-        sumTabWidth + getTabWidth(i) / 2 + (gap ? gap * i : 0) - width / 2,
-      ];
-    } else {
-      if (i === 0) return [0];
-      return [...acc, acc[i - 1] + getTabWidth(i - 1) + (gap ?? 0)];
+    if (indicatorWidth === undefined) {
+      return tabOffset;
     }
-  }, []);
+
+    return tabOffset + getTabWidth(i) / 2 - indicatorWidth / 2;
+  });
 
   const translateX = position.interpolate({
     inputRange,
@@ -83,31 +142,60 @@ export function TabBarIndicator<T extends Route>({
   const isIndicatorShown = React.useRef(false);
   const isWidthDynamic = width === 'auto';
 
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const hasCustomIndicatorWidth =
+    typeof flattenedStyle?.width === 'number' ||
+    (typeof flattenedStyle?.width === 'string' &&
+      flattenedStyle?.width.endsWith('%'));
+
+  const constantIndicatorWidth =
+    typeof flattenedStyle?.width === 'number'
+      ? flattenedStyle.width
+      : undefined;
+
+  const isCentered =
+    hasCustomIndicatorWidth &&
+    (flattenedStyle?.margin === 'auto' ||
+      flattenedStyle?.marginHorizontal === 'auto');
+
+  // If indicator has a custom width, we need to adjust calculations to account for it
+  // It should be centered relative to the tab if the margin is set to auto
+  const getCenteredIndicatorWidth = (tabWidth: number) => {
+    if (isCentered) {
+      return calculateSize(flattenedStyle?.width, tabWidth);
+    }
+
+    if (typeof width === 'number') {
+      return width;
+    }
+
+    return undefined;
+  };
+
   const opacity = useAnimatedValue(isWidthDynamic ? 0 : 1);
 
+  // We should fade-in the indicator when we have widths for all the tab items
   const indicatorVisible = isWidthDynamic
     ? layout.width &&
       navigationState.routes
-        .slice(0, navigationState.index)
+        .slice(0, navigationState.index + 1)
         .every((_, r) => getTabWidth(r))
     : true;
 
   React.useEffect(() => {
     const fadeInIndicator = () => {
-      if (
-        !isIndicatorShown.current &&
-        isWidthDynamic &&
-        // We should fade-in the indicator when we have widths for all the tab items
-        indicatorVisible
-      ) {
-        isIndicatorShown.current = true;
-
+      if (!isIndicatorShown.current && isWidthDynamic && indicatorVisible) {
         Animated.timing(opacity, {
           toValue: 1,
           duration: 150,
           easing: Easing.in(Easing.linear),
           useNativeDriver,
-        }).start();
+        }).start(({ finished }) => {
+          if (finished) {
+            isIndicatorShown.current = true;
+          }
+        });
       }
     };
 
@@ -120,18 +208,25 @@ export function TabBarIndicator<T extends Route>({
 
   const transform = [];
 
-  if (layout.width) {
-    const translateX =
-      routes.length > 1
-        ? getTranslateX(position, routes, getTabWidth, direction, gap, width)
-        : 0;
+  const translateX =
+    layout.width && routes.length > 1
+      ? getTranslateX(position, routes, getTabWidth, direction, gap, (index) =>
+          getCenteredIndicatorWidth(getTabWidth(index))
+        )
+      : 0;
 
-    transform.push({ translateX });
-  }
+  transform.push({ translateX });
 
-  if (width === 'auto') {
+  if (width === 'auto' && constantIndicatorWidth == null) {
     const inputRange = routes.map((_, i) => i);
-    const outputRange = inputRange.map(getTabWidth);
+    const outputRange = inputRange.map((i) => {
+      const tabW = getTabWidth(i);
+
+      return (
+        calculateSize(flattenedStyle?.width, tabW) ??
+        getIndicatorWidthWithMargins(tabW, flattenedStyle, direction)
+      );
+    });
 
     transform.push(
       {
@@ -150,27 +245,73 @@ export function TabBarIndicator<T extends Route>({
 
   const styleList: StyleProp<ViewStyle> = [];
 
-  // scaleX doesn't work properly on chrome and opera for linux and android
-  if (Platform.OS === 'web' && width === 'auto') {
+  // transform doesn't work properly on chrome and opera for linux and android
+  // so we need to use width and left/right instead of scaleX and translateX
+  // https://github.com/react-navigation/react-navigation/pull/11440
+  if (
+    Platform.OS === 'web' &&
+    width === 'auto' &&
+    constantIndicatorWidth == null
+  ) {
+    const start = flattenedStyle?.start;
+    const translate =
+      direction === 'rtl' ? Animated.multiply(translateX, -1) : translateX;
+    const offset =
+      typeof start === 'number' ? Animated.add(translate, start) : translate;
+
     styleList.push(
       { width: transform[1].scaleX },
-      { left: transform[0].translateX }
+      direction === 'rtl' ? { right: offset } : { left: offset }
     );
   } else {
     styleList.push(
-      { width: width === 'auto' ? 1 : width },
+      {
+        width:
+          width === 'auto'
+            ? // if the indicator has a constant width, use it as is
+              // we don't need to scale it to match tab width
+              (constantIndicatorWidth ?? 1)
+            : getIndicatorWidth(
+                getTabWidth(navigationState.index),
+                width,
+                flattenedStyle,
+                direction
+              ),
+      },
       { start: `${(100 / routes.length) * navigationState.index}%` },
       { transform }
     );
   }
 
+  let finalStyle;
+
+  if (hasCustomIndicatorWidth && style != null) {
+    const rest = { ...flattenedStyle };
+
+    delete rest.width;
+
+    if (isCentered) {
+      if (rest.margin === 'auto') {
+        delete rest.margin;
+      }
+
+      if (rest.marginHorizontal === 'auto') {
+        delete rest.marginHorizontal;
+      }
+    }
+
+    finalStyle = rest;
+  } else {
+    finalStyle = style;
+  }
+
   return (
     <Animated.View
       style={[
         styles.indicator,
         styleList,
         width === 'auto' ? { opacity: opacity } : null,
-        style,
+        finalStyle,
       ]}
     >
       {children}

package/src/TabBarItem.tsx

@@ -169,7 +169,7 @@ const TabBarItemInternal = <T extends Route>({
         <Animated.View style={{ opacity }}>{iconEle}</Animated.View>
       </View>
     );
-  }, [customIcon, route, isFocused, ReAnimatedStyleRef, opacity]);
+  }, [route, customIcon, isFocused, ReAnimatedStyleRef, opacity]);
 
   const renderLabel = React.useCallback(
     () =>

package/src/TabBarItemLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import Animated, { type AnimatedStyle } from 'react-native-reanimated';
+
 interface TabBarItemLabelProps {
   label?: string;
   style: StyleProp<TextStyle>;

package/src/useAnimatedValue.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Animated } from 'react-native';
 
-export function useAnimatedValue(initialValue: number) {
+export function useAnimatedValue(initialValue: number): Animated.Value {
   const lazyRef = React.useRef<Animated.Value>(undefined);
 
   if (lazyRef.current === undefined) {
     lazyRef.current = new Animated.Value(initialValue);
   }
 
-  return lazyRef.current as Animated.Value;
+  return lazyRef.current;
 }