react-native-tab-view 4.2.2 → 5.0.0-alpha.1

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

@@ -1,12 +1,12 @@
-import { Animated, type LayoutChangeEvent, type PressableAndroidRippleConfig, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, type ColorValue, type LayoutChangeEvent, type PressableAndroidRippleConfig, type StyleProp, type ViewStyle } from 'react-native';
 import type { NavigationState, Route, TabDescriptor } from './types';
 export type Props<T extends Route> = TabDescriptor<T> & {
     position: Animated.AnimatedInterpolation<number>;
     route: T;
     navigationState: NavigationState<T>;
-    activeColor?: string;
-    inactiveColor?: string;
-    pressColor?: string;
+    activeColor?: ColorValue;
+    inactiveColor?: ColorValue;
+    pressColor?: ColorValue;
     pressOpacity?: number;
     onLayout?: (event: LayoutChangeEvent) => void;
     onPress: () => void;

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;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAErE,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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;CAC/C,CAAC;AA+NF,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,UAAU,EACf,KAAK,iBAAiB,EAEtB,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAErE,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,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,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;CAC/C,CAAC;AA+NF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsB1D"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 interface TabBarItemLabelProps {
-    color: string;
+    color: ColorValue;
     label?: string;
     style: StyleProp<ViewStyle>;
     icon: React.ReactNode;

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;AAGzD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,4DACM,oBAAoB,oDAkBrD,CAAC"}
+{"version":3,"file":"TabBarItemLabel.d.ts","sourceRoot":"","sources":["../../../src/TabBarItemLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,4DACM,oBAAoB,oDAkBrD,CAAC"}

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

@@ -1,33 +1,127 @@
 import * as React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import type { Layout, LocaleDirection, NavigationState, PagerProps, Route, SceneRendererProps, TabDescriptor } from './types';
-export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
+import type { AdapterCommonProps, AdapterProps, EventEmitterProps, LocaleDirection, NavigationState, Route, SceneRendererProps, TabDescriptor } from './types';
+export type Props<T extends Route> = AdapterCommonProps & {
+    /**
+     * Callback which is called when the index of the active tab changes.
+     * Must update the `navigationState.index` prop to the new index.
+     *
+     * Example:
+     * ```js
+     * onIndexChange={(index) => setState({ ...state, index })}
+     * ```
+     */
     onIndexChange: (index: number) => void;
+    /**
+     * Callback which is called when the tab navigation animation ends.
+     * Useful for side effects that should run after the tab change animation.
+     *
+     * Unlike `onIndexChange`, this is called regardless of whether the index changed or not.
+     */
     onTabSelect?: (props: {
         index: number;
     }) => void;
+    /**
+     * State for the tab view containing the current index and routes.
+     *
+     * Example:
+     * ```js
+     * {
+     *   index: 0,
+     *   routes: [
+     *     { key: 'first' },
+     *     { key: 'second' },
+     *   ],
+     * }
+     * ```
+     */
     navigationState: NavigationState<T>;
+    /**
+     * Callback which returns a custom placeholder element.
+     * The placeholder is shown when a scene is not yet loaded when `lazy` is enabled.
+     */
     renderLazyPlaceholder?: (props: {
         route: T;
     }) => React.ReactNode;
-    renderTabBar?: (props: SceneRendererProps & {
+    /**
+     * Callback which returns a custom tab bar element to display.
+     */
+    renderTabBar?: (props: SceneRendererProps & EventEmitterProps & {
         navigationState: NavigationState<T>;
         options: Record<string, TabDescriptor<T>> | undefined;
     }) => React.ReactNode;
+    /**
+     * Callback which returns a custom adapter to use for the tab view.
+     * Adapters are responsible for handling gestures and animations between tabs.
+     *
+     * The following adapters are provided out of the box:
+     * - `PagerViewAdapter`: Uses `react-native-pager-view` for native experience.
+     * - `PanResponderAdapter`: Uses `PanResponder` for a JS-based implementation.
+     * - `ScrollViewAdapter`: Uses `ScrollView` for an implementation based on `ScrollView`.
+     *
+     * Defaults to `PagerViewAdapter` on Android and iOS, and `PanResponderAdapter` on other platforms.
+     */
+    renderAdapter?: (props: AdapterProps) => React.ReactElement;
+    /**
+     * Position of the tab bar in the tab view.
+     * Defaults to `'top'`.
+     */
     tabBarPosition?: 'top' | 'bottom';
-    initialLayout?: Partial<Layout>;
+    /**
+     * Whether to lazily render the scenes.
+     * When enabled, scenes are rendered only when they come into view.
+     *
+     * Can be a boolean or a function that receives the route and returns a boolean.
+     * Defaults to `false`.
+     */
     lazy?: ((props: {
         route: T;
     }) => boolean) | boolean;
+    /**
+     * How many screens to preload when `lazy` is enabled.
+     *
+     * Defaults to `0`.
+     */
     lazyPreloadDistance?: number;
+    /**
+     * The layout direction of the tab view.
+     *
+     * Defaults to the app's locale direction (RTL or LTR).
+     */
     direction?: LocaleDirection;
+    /**
+     * Style to apply to the pager container.
+     */
     pagerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style to apply to the tab view container.
+     */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Callback which returns a React element to render for each route.
+     */
     renderScene: (props: SceneRendererProps & {
         route: T;
     }) => React.ReactNode;
+    /**
+     * Options for individual tabs, keyed by route key.
+     *
+     * Example:
+     * ```js
+     * {
+     *  first: { labelText: 'First Tab' },
+     *  second: { labelText: 'Second Tab' },
+     * }
+     *
+     * These options are merged with `commonOptions`.
+     */
     options?: Record<string, TabDescriptor<T>>;
+    /**
+     * Options that apply to all tabs.
+     *
+     * Individual tab options from `options` will override these.
+     */
     commonOptions?: TabDescriptor<T>;
 };
-export declare function TabView<T extends Route>({ onIndexChange, onTabSelect, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, pagerStyle, style, direction, swipeEnabled, tabBarPosition, animationEnabled, overScrollMode, options: sceneOptions, commonOptions, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TabView<T extends Route>({ onIndexChange, onTabSelect, navigationState, renderScene, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, renderAdapter, pagerStyle, style, direction, swipeEnabled, tabBarPosition, animationEnabled, options: sceneOptions, commonOptions, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TabView.d.ts.map

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,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD;;;;;;;;OAQG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD;;;;;;;;;;;;;OAaG;IACH,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GACvB,iBAAiB,GAAG;QAClB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;KACvD,KACA,KAAK,CAAC,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C;;;;OAIG;IACH,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,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAoD,EAEpD,YAA+C,EAE/C,aAA+C,EAC/C,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,OAAO,EAAE,YAAY,EACrB,aAAa,GACd,EAAE,KAAK,CAAC,CAAC,CAAC,2CAgGV"}

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

@@ -1,4 +1,7 @@
+export { PagerViewAdapter, type PagerViewAdapterProps, } from './PagerViewAdapter';
+export { PanResponderAdapter } from './PanResponderAdapter';
 export { SceneMap } from './SceneMap';
+export { ScrollViewAdapter, type ScrollViewAdapterProps, } from './ScrollViewAdapter';
 export type { Props as TabBarProps } from './TabBar';
 export { TabBar } from './TabBar';
 export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
@@ -7,5 +10,5 @@ export type { Props as TabBarItemProps } from './TabBarItem';
 export { TabBarItem } from './TabBarItem';
 export type { Props as TabViewProps } from './TabView';
 export { TabView } from './TabView';
-export type { NavigationState, Route, SceneRendererProps, TabDescriptor, } from './types';
+export type { AdapterProps, NavigationState, Route, SceneRendererProps, TabDescriptor, } from './types';
 //# 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,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,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,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,YAAY,EACZ,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC"}

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

@@ -1,5 +1,5 @@
-import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { PagerViewProps } from 'react-native-pager-view';
+import * as React from 'react';
+import type { Animated, ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type TabDescriptor<T extends Route> = {
     accessibilityLabel?: string;
     accessible?: boolean;
@@ -11,7 +11,7 @@ export type TabDescriptor<T extends Route> = {
         route: T;
         labelText?: string;
         focused: boolean;
-        color: string;
+        color: ColorValue;
         allowFontScaling?: boolean;
         style?: StyleProp<TextStyle>;
     }) => React.ReactNode;
@@ -19,7 +19,7 @@ export type TabDescriptor<T extends Route> = {
     icon?: (props: {
         route: T;
         focused: boolean;
-        color: string;
+        color: ColorValue;
         size: number;
     }) => React.ReactNode;
     badge?: (props: {
@@ -51,20 +51,76 @@ export type Layout = {
     width: number;
     height: number;
 };
-export type Listener = (value: number) => void;
+export type Listener = (event: {
+    type: 'enter';
+    index: number;
+}) => void;
 export type SceneRendererProps = {
-    layout: Layout;
     position: Animated.AnimatedInterpolation<number>;
     jumpTo: (key: string) => void;
 };
 export type EventEmitterProps = {
-    addEnterListener: (listener: Listener) => () => void;
+    subscribe: (listener: Listener) => () => void;
 };
-export type PagerProps = Omit<PagerViewProps, 'initialPage' | 'scrollEnabled' | 'onPageScroll' | 'onPageSelected' | 'onPageScrollStateChanged' | 'keyboardDismissMode' | 'children'> & {
+export type AdapterCommonProps = {
+    /**
+     * Determines whether the keyboard gets dismissed in response to a drag.
+     * - 'auto' (default) - the keyboard is dismissed on drag and tab changes
+     * - 'on-drag' - the keyboard is dismissed when a drag begins
+     * - 'none' - drags and tab changes do not dismiss the keyboard
+     */
     keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
+    /**
+     * Whether swiping between tabs is enabled.
+     */
     swipeEnabled?: boolean;
+    /**
+     * Whether the tab switch animation is enabled.
+     * If set to false, the tab switch will happen immediately without animation.
+     */
     animationEnabled?: boolean;
+    /**
+     * Callback that is called when the swipe gesture starts.
+     */
     onSwipeStart?: () => void;
+    /**
+     * Callback that is called when the swipe gesture ends.
+     */
     onSwipeEnd?: () => void;
+    /**
+     * Callback that is called when a tab is selected.
+     * This is called regardless of whether the index has changed or not.
+     */
+    onTabSelect?: (props: {
+        index: number;
+    }) => void;
+    /**
+     * Style for the pager adapter.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+export type AdapterRendererProps = {
+    /**
+     * Callback to call when the index changes.
+     */
+    onIndexChange: (index: number) => void;
+    /**
+     * The current navigation state of the tab view.
+     */
+    navigationState: NavigationState<Route>;
+    /**
+     * The writing direction of the layout.
+     * This can be 'ltr' or 'rtl' based on tab view's `direction` prop.
+     */
+    layoutDirection?: LocaleDirection;
+    /**
+     * Render callback that should render the pages of the tab view.
+     */
+    children: (props: EventEmitterProps & {
+        position: Animated.AnimatedInterpolation<number>;
+        render: (children: React.ReactElement[]) => React.ReactNode;
+        jumpTo: (key: string) => void;
+    }) => React.ReactElement;
 };
+export type AdapterProps = AdapterRendererProps & AdapterCommonProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { type LayoutChangeEvent, type View } from 'react-native';
+import type { Layout } from './types';
+export declare function useMeasureLayout(ref: React.RefObject<View | null>, onMeasure?: (layout: Layout) => void): readonly [Layout, (event: LayoutChangeEvent) => void];
+//# sourceMappingURL=useMeasureLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasureLayout.d.ts","sourceRoot":"","sources":["../../../src/useMeasureLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAGjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,EACjC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,6BAoBO,iBAAiB,WAK7D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tab-view",
   "description": "Tab view component for React Native",
-  "version": "4.2.2",
+  "version": "5.0.0-alpha.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -44,23 +44,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "use-latest-callback": "^0.2.4"
+    "use-latest-callback": "^0.3.2"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@testing-library/react-native": "^13.2.1",
     "del-cli": "^6.0.0",
     "react": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-builder-bob": "^0.40.17",
-    "react-native-pager-view": "6.9.1",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.40.12",
+    "react-native-pager-view": "^8.0.0",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": ">= 18.2.0",
+    "react": ">= 19.0.0",
     "react-native": "*",
-    "react-native-pager-view": ">= 6.0.0"
+    "react-native-pager-view": ">= 7.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "2b7ee0d2d1b1ef0390b690f59c0c1dd8bd57e9eb"
+  "gitHead": "4579b7cfdf8b149ef04cfb585e2cb6b35ded52d7"
 }

package/src/PagerViewAdapter.native.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { Animated, Keyboard, Platform, StyleSheet } from 'react-native';
+import ViewPager, {
+  type PagerViewProps,
+  type PageScrollStateChangedNativeEvent,
+} from 'react-native-pager-view';
+import useLatestCallback from 'use-latest-callback';
+
+import type { AdapterProps, Listener } from './types';
+import { useAnimatedValue } from './useAnimatedValue';
+
+const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
+
+export type PagerViewAdapterProps = AdapterProps &
+  Omit<
+    PagerViewProps,
+    | keyof AdapterProps
+    | 'initialPage'
+    | 'scrollEnabled'
+    | 'onPageScroll'
+    | 'onPageSelected'
+    | 'onPageScrollStateChanged'
+    | 'children'
+  >;
+
+const useNativeDriver = Platform.OS !== 'web';
+
+export function PagerViewAdapter({
+  keyboardDismissMode = 'auto',
+  swipeEnabled = true,
+  navigationState,
+  onIndexChange,
+  onTabSelect,
+  onSwipeStart,
+  onSwipeEnd,
+  children,
+  style,
+  animationEnabled,
+  ...rest
+}: PagerViewAdapterProps) {
+  const { index } = navigationState;
+
+  const listeners = React.useRef<Set<Listener>>(new Set()).current;
+
+  const pagerRef = React.useRef<ViewPager>(null);
+  const indexRef = React.useRef<number>(index);
+  const navigationStateRef = React.useRef(navigationState);
+
+  const position = useAnimatedValue(index);
+  const offset = useAnimatedValue(0);
+
+  React.useEffect(() => {
+    navigationStateRef.current = navigationState;
+  });
+
+  const jumpTo = useLatestCallback((key: string) => {
+    const index = navigationStateRef.current.routes.findIndex(
+      (route: { key: string }) => route.key === key
+    );
+
+    if (animationEnabled) {
+      pagerRef.current?.setPage(index);
+    } else {
+      pagerRef.current?.setPageWithoutAnimation(index);
+      position.setValue(index);
+    }
+
+    onIndexChange(index);
+  });
+
+  React.useEffect(() => {
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss();
+    }
+
+    if (indexRef.current !== index) {
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    }
+  }, [keyboardDismissMode, index, animationEnabled, position]);
+
+  const onPageScrollStateChanged = (
+    state: PageScrollStateChangedNativeEvent
+  ) => {
+    const { pageScrollState } = state.nativeEvent;
+
+    switch (pageScrollState) {
+      case 'idle':
+        onSwipeEnd?.();
+        return;
+      case 'dragging': {
+        const subscription = offset.addListener(({ value }) => {
+          const next =
+            index + (value > 0 ? Math.ceil(value) : Math.floor(value));
+
+          if (next !== index) {
+            listeners.forEach((listener) =>
+              listener({
+                type: 'enter',
+                index: next,
+              })
+            );
+          }
+
+          offset.removeListener(subscription);
+        });
+
+        onSwipeStart?.();
+        return;
+      }
+    }
+  };
+
+  const subscribe = useLatestCallback((listener: Listener) => {
+    listeners.add(listener);
+
+    return () => {
+      listeners.delete(listener);
+    };
+  });
+
+  const memoizedPosition = React.useMemo(
+    () => Animated.add(position, offset),
+    [offset, position]
+  );
+
+  return children({
+    position: memoizedPosition,
+    subscribe,
+    jumpTo,
+    render: (children) => (
+      <AnimatedViewPager
+        {...rest}
+        ref={pagerRef}
+        style={[styles.container, style]}
+        initialPage={index}
+        keyboardDismissMode={
+          keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
+        }
+        onPageScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                position: position,
+                offset: offset,
+              },
+            },
+          ],
+          { useNativeDriver }
+        )}
+        onPageSelected={(e) => {
+          const index = e.nativeEvent.position;
+          indexRef.current = index;
+          onIndexChange(index);
+          onTabSelect?.({ index });
+        }}
+        onPageScrollStateChanged={onPageScrollStateChanged}
+        scrollEnabled={swipeEnabled}
+      >
+        {children}
+      </AnimatedViewPager>
+    ),
+  });
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});