react-native-tab-view 4.0.0-alpha.5 → 4.0.0-alpha.7

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type PressableAndroidRippleConfig, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type Props as IndicatorProps } from './TabBarIndicator';
 import { type Props as TabBarItemProps } from './TabBarItem';
-import type { Event, LocaleDirection, NavigationState, Route, Scene, SceneRendererProps } from './types';
+import type { Event, LocaleDirection, NavigationState, Route, Scene, SceneRendererProps, TabDescriptor } from './types';
 export type Props<T extends Route> = SceneRendererProps & {
     navigationState: NavigationState<T>;
     scrollEnabled?: boolean;
@@ -11,19 +11,8 @@ export type Props<T extends Route> = SceneRendererProps & {
     inactiveColor?: string;
     pressColor?: string;
     pressOpacity?: number;
-    getLabelText?: (scene: Scene<T>) => string | undefined;
-    getAccessible?: (scene: Scene<T>) => boolean | undefined;
-    getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
-    getTestID?: (scene: Scene<T>) => string | undefined;
-    renderLabel?: (scene: Scene<T> & {
-        focused: boolean;
-        color: string;
-    }) => React.ReactNode;
-    renderIcon?: (scene: Scene<T> & {
-        focused: boolean;
-        color: string;
-    }) => React.ReactNode;
-    renderBadge?: (scene: Scene<T>) => React.ReactNode;
+    options?: Record<string, TabDescriptor<T>>;
+    commonOptions?: TabDescriptor<T>;
     renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
     renderTabBarItem?: (props: TabBarItemProps<T> & {
         key: string;
@@ -41,5 +30,5 @@ export type Props<T extends Route> = SceneRendererProps & {
     testID?: string;
     android_ripple?: PressableAndroidRippleConfig;
 };
-export declare function TabBar<T extends Route>({ getLabelText, getAccessible, getAccessibilityLabel, getTestID, renderIndicator, gap, scrollEnabled, jumpTo, navigationState, position, activeColor, bounces, contentContainerStyle, inactiveColor, indicatorContainerStyle, indicatorStyle, labelStyle, onTabLongPress, onTabPress, pressColor, pressOpacity, renderBadge, renderIcon, renderLabel, direction, renderTabBarItem, style, tabStyle, layout: propLayout, testID, android_ripple, }: Props<T>): React.JSX.Element;
+export declare function TabBar<T extends Route>({ renderIndicator, gap, scrollEnabled, jumpTo, navigationState, position, activeColor, bounces, contentContainerStyle, inactiveColor, indicatorContainerStyle, indicatorStyle, labelStyle, onTabLongPress, onTabPress, pressColor, pressOpacity, direction, renderTabBarItem, style, tabStyle, layout: propLayout, testID, android_ripple, options, commonOptions, }: Props<T>): React.JSX.Element;
 //# sourceMappingURL=TabBar.d.ts.map

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,EAEd,KAAK,SAAS,EAEd,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,KAAK,EAEL,eAAe,EACf,eAAe,EACf,KAAK,EACL,KAAK,EACL,kBAAkB,EACnB,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACvD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,SAAS,CAAC;IACzD,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAChE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACpD,WAAW,CAAC,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;QAChB,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,KACE,KAAK,CAAC,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;QAChB,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,KACE,KAAK,CAAC,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,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,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,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;CAC/C,CAAC;AA2QF,wBAAgB,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,EACtC,YAAkC,EAClC,aAAoC,EACpC,qBAAoD,EACpD,SAA4B,EAC5B,eAAwC,EACxC,GAAO,EACP,aAAa,EACb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,aAAa,EACb,uBAAuB,EACvB,cAAc,EACd,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACV,WAAW,EACX,SAA4D,EAC5D,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,qBAuUV"}
+{"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,EAEd,KAAK,SAAS,EAEd,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,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACjC,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,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,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;CAC/C,CAAC;AA0QF,wBAAgB,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,EACtC,eAAwC,EACxC,GAAO,EACP,aAAa,EACb,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,aAAa,EACb,uBAAuB,EACvB,cAAc,EACd,UAAU,EACV,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,aAAa,GACd,EAAE,KAAK,CAAC,CAAC,CAAC,qBAmVV"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Animated, type LayoutChangeEvent, type PressableAndroidRippleConfig, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
-import type { NavigationState, Route, Scene } from './types';
-export type Props<T extends Route> = {
+import type { NavigationState, Route, TabDescriptor } from './types';
+export type Props<T extends Route> = TabDescriptor<T> & {
     position: Animated.AnimatedInterpolation<number>;
     route: T;
     navigationState: NavigationState<T>;
@@ -9,21 +9,6 @@ export type Props<T extends Route> = {
     inactiveColor?: string;
     pressColor?: string;
     pressOpacity?: number;
-    getLabelText: (scene: Scene<T>) => string | undefined;
-    getAccessible: (scene: Scene<T>) => boolean | undefined;
-    getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
-    getTestID: (scene: Scene<T>) => string | undefined;
-    renderLabel?: (scene: {
-        route: T;
-        focused: boolean;
-        color: string;
-    }) => React.ReactNode;
-    renderIcon?: (scene: {
-        route: T;
-        focused: boolean;
-        color: string;
-    }) => React.ReactNode;
-    renderBadge?: (scene: Scene<T>) => React.ReactNode;
     onLayout?: (event: LayoutChangeEvent) => void;
     onPress: () => void;
     onLongPress: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"TabBarItem.d.ts","sourceRoot":"","sources":["../../../src/TabBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,iBAAiB,EACtB,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI;IACnC,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,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACtD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,SAAS,CAAC;IACxD,qBAAqB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC/D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,KAAK,EAAE,CAAC,CAAC;QACT,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QACnB,KAAK,EAAE,CAAC,CAAC;QACT,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,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,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,4BAA4B,CAAC;CAC/C,CAAC;AAkNF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,qBA0C1D"}
+{"version":3,"file":"TabBarItem.d.ts","sourceRoot":"","sources":["../../../src/TabBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,iBAAiB,EACtB,KAAK,4BAA4B,EACjC,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,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,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,4BAA4B,CAAC;CAC/C,CAAC;AA6NF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,qBAsB1D"}

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

@@ -4,9 +4,6 @@ import type { Layout, LocaleDirection, NavigationState, PagerProps, Route, Scene
 export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
     onIndexChange: (index: number) => void;
     navigationState: NavigationState<T>;
-    renderScene: (props: SceneRendererProps & {
-        route: T;
-    }) => React.ReactNode;
     renderLazyPlaceholder?: (props: {
         route: T;
     }) => React.ReactNode;
@@ -23,6 +20,9 @@ export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
     direction?: LocaleDirection;
     pagerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
+    renderScene: (props: SceneRendererProps & {
+        route: T;
+    }) => React.ReactNode;
 };
 export declare function TabView<T extends Route>({ onIndexChange, navigationState, renderScene, initialLayout, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, sceneContainerStyle, pagerStyle, style, direction, swipeEnabled, tabBarPosition, animationEnabled, overScrollMode, }: Props<T>): React.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,EACnB,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,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,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;QAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;KAAE,KAChE,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,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAkC,EAClC,YAA+C,EAC/C,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,qBAuGV"}
+{"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,EACnB,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,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;QAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;KAAE,KAChE,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,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,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;CAC5E,CAAC;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,eAAe,EACf,WAAW,EACX,aAAa,EACb,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAkC,EAClC,YAA+C,EAC/C,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,cAAc,GACf,EAAE,KAAK,CAAC,CAAC,CAAC,qBAuGV"}

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

@@ -7,5 +7,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 } from './types';
+export type { 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,EAAE,eAAe,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
+{"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"}

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

@@ -1,5 +1,30 @@
-import type { Animated } from 'react-native';
+/// <reference types="react" />
+import type { Animated, StyleProp, TextStyle } from 'react-native';
 import type { PagerViewProps } from 'react-native-pager-view';
+export type TabDescriptor<T extends Route> = {
+    accessibilityLabel?: string;
+    labelStyle?: StyleProp<TextStyle>;
+    accessible?: boolean;
+    testID?: string;
+    labelText?: string;
+    labelAllowFontScaling?: boolean;
+    href?: string;
+    label?: (props: {
+        focused: boolean;
+        color: string;
+        style?: StyleProp<TextStyle>;
+        allowFontScaling?: boolean;
+        label?: string;
+        route: T;
+    }) => React.ReactElement;
+    icon?: (props: {
+        focused: boolean;
+        color: string;
+        size: number;
+        route: T;
+    }) => React.ReactElement;
+    badge?: () => React.ReactElement;
+};
 export type LocaleDirection = 'ltr' | 'rtl';
 export type Route = {
     key: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,CAAC;AAE5C,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,IAAI,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI;IACnC,KAAK,EAAE,CAAC,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,IAAI;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,EAAE,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACZ,aAAa,GACb,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,0BAA0B,GAC1B,qBAAqB,GACrB,UAAU,CACb,GAAG;IACF,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tab-view",
   "description": "Tab view component for React Native",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -68,5 +68,5 @@
       ]
     ]
   },
-  "gitHead": "38117089fff9341c72e0834ca8ec237e8186b63c"
+  "gitHead": "4278a3d0a5deca93206771a1fa746aa03b86900e"
 }

package/src/PlatformPressable.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
-import { Platform, Pressable, type PressableProps } from 'react-native';
+import {
+  type GestureResponderEvent,
+  Platform,
+  Pressable,
+  type PressableProps,
+} from 'react-native';
 
 export type Props = PressableProps & {
+  children: React.ReactNode;
   pressColor?: string;
   pressOpacity?: number;
-  children: React.ReactNode;
+  href?: string;
 };
 
 const ANDROID_VERSION_LOLLIPOP = 21;
@@ -19,12 +25,34 @@ const ANDROID_SUPPORTS_RIPPLE =
  * On other platforms, you can pass the props of TouchableOpacity.
  */
 export function PlatformPressable({
+  disabled,
   android_ripple,
   pressColor = 'rgba(0, 0, 0, .32)',
   pressOpacity,
   style,
+  onPress,
   ...rest
 }: Props) {
+  const handlePress = (e: GestureResponderEvent) => {
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
+    const isSelfTarget = [undefined, null, '', 'self'].includes(
+      // @ts-expect-error: these properties exist on web, but not in React Native
+      e.currentTarget?.target
+    ); // let browser handle "target=_blank" etc.
+
+    if (Platform.OS === 'web' && rest.href != null) {
+      if (!hasModifierKey && isLeftClick && isSelfTarget) {
+        e.preventDefault();
+        onPress?.(e);
+      }
+    } else {
+      onPress?.(e);
+    }
+  };
+
   return (
     <Pressable
       android_ripple={
@@ -36,6 +64,7 @@ export function PlatformPressable({
         { opacity: pressed && !ANDROID_SUPPORTS_RIPPLE ? pressOpacity : 1 },
         typeof style === 'function' ? style({ pressed }) : style,
       ]}
+      onPress={disabled ? undefined : handlePress}
       {...rest}
     />
   );

package/src/TabBar.tsx

@@ -30,6 +30,7 @@ import type {
   Route,
   Scene,
   SceneRendererProps,
+  TabDescriptor,
 } from './types';
 import { useAnimatedValue } from './useAnimatedValue';
 
@@ -41,23 +42,8 @@ export type Props<T extends Route> = SceneRendererProps & {
   inactiveColor?: string;
   pressColor?: string;
   pressOpacity?: number;
-  getLabelText?: (scene: Scene<T>) => string | undefined;
-  getAccessible?: (scene: Scene<T>) => boolean | undefined;
-  getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
-  getTestID?: (scene: Scene<T>) => string | undefined;
-  renderLabel?: (
-    scene: Scene<T> & {
-      focused: boolean;
-      color: string;
-    }
-  ) => React.ReactNode;
-  renderIcon?: (
-    scene: Scene<T> & {
-      focused: boolean;
-      color: string;
-    }
-  ) => React.ReactNode;
-  renderBadge?: (scene: Scene<T>) => React.ReactNode;
+  options?: Record<string, TabDescriptor<T>>;
+  commonOptions?: TabDescriptor<T>;
   renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
   renderTabBarItem?: (
     props: TabBarItemProps<T> & { key: string }
@@ -318,7 +304,6 @@ const getScrollAmount = <T extends Route>({
     direction,
   });
 };
-
 const getLabelTextDefault = ({ route }: Scene<Route>) => route.title;
 
 const getAccessibleDefault = ({ route }: Scene<Route>) =>
@@ -342,10 +327,6 @@ const getTestIdDefault = ({ route }: Scene<Route>) => route.testID;
 const MEASURE_PER_BATCH = 10;
 
 export function TabBar<T extends Route>({
-  getLabelText = getLabelTextDefault,
-  getAccessible = getAccessibleDefault,
-  getAccessibilityLabel = getAccessibilityLabelDefault,
-  getTestID = getTestIdDefault,
   renderIndicator = renderIndicatorDefault,
   gap = 0,
   scrollEnabled,
@@ -363,9 +344,6 @@ export function TabBar<T extends Route>({
   onTabPress,
   pressColor,
   pressOpacity,
-  renderBadge,
-  renderIcon,
-  renderLabel,
   direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
   renderTabBarItem,
   style,
@@ -373,6 +351,8 @@ export function TabBar<T extends Route>({
   layout: propLayout,
   testID,
   android_ripple,
+  options,
+  commonOptions,
 }: Props<T>) {
   const [layout, setLayout] = React.useState<Layout>(
     propLayout ?? { width: 0, height: 0 }
@@ -463,86 +443,103 @@ export function TabBar<T extends Route>({
 
   const renderItem = React.useCallback(
     ({ item: route, index }: ListRenderItemInfo<T>) => {
-      const props: TabBarItemProps<T> & { key: string } = {
-        key: route.key,
-        position: position,
-        route: route,
-        navigationState: navigationState,
-        getAccessibilityLabel: getAccessibilityLabel,
-        getAccessible: getAccessible,
-        getLabelText: getLabelText,
-        getTestID: getTestID,
-        renderBadge: renderBadge,
-        renderIcon: renderIcon,
-        renderLabel: renderLabel,
-        activeColor: activeColor,
-        inactiveColor: inactiveColor,
-        pressColor: pressColor,
-        pressOpacity: pressOpacity,
-        onLayout: isWidthDynamic
-          ? (e: LayoutChangeEvent) => {
-              measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
+      const {
+        testID = getTestIdDefault({ route }),
+        labelText = getLabelTextDefault({ route }),
+        accessible = getAccessibleDefault({ route }),
+        accessibilityLabel = getAccessibilityLabelDefault({ route }),
+        href,
+      } = {
+        ...commonOptions,
+        ...options?.[route.key],
+      };
 
-              // 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(
+      const onLayout = isWidthDynamic
+        ? (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'
                 )
-              ) {
-                // 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 });
-              }
+            ) {
+              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 });
             }
-          : undefined,
-        onPress: () => {
-          const event: Scene<T> & Event = {
-            route,
-            defaultPrevented: false,
-            preventDefault: () => {
-              event.defaultPrevented = true;
-            },
-          };
+          }
+        : undefined;
+
+      const onPress = () => {
+        const event: Scene<T> & Event = {
+          route,
+          defaultPrevented: false,
+          preventDefault: () => {
+            event.defaultPrevented = true;
+          },
+        };
 
-          onTabPress?.(event);
+        onTabPress?.(event);
 
-          if (event.defaultPrevented) {
-            return;
-          }
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        jumpTo(route.key);
+      };
 
-          jumpTo(route.key);
-        },
-        onLongPress: () => onTabLongPress?.({ route }),
-        labelStyle: labelStyle,
+      const onLongPress = () => onTabLongPress?.({ route });
+
+      // Calculate the default width for tab for FlatList to work
+      const defaultTabWidth = !isWidthDynamic
+        ? getComputedTabWidth(
+            index,
+            layout,
+            routes,
+            scrollEnabled,
+            tabWidths,
+            getFlattenedTabWidth(tabStyle),
+            getFlattenedPaddingRight(contentContainerStyle),
+            getFlattenedPaddingLeft(contentContainerStyle),
+            gap
+          )
+        : undefined;
+
+      const props = {
+        href,
+        key: route.key,
+        position,
+        route,
+        navigationState,
+        testID,
+        labelText,
+        accessible,
+        accessibilityLabel,
+        activeColor,
+        inactiveColor,
+        pressColor,
+        pressOpacity,
+        onLayout,
+        onPress,
+        onLongPress,
+        labelStyle,
         style: tabStyle,
-        // Calculate the deafult width for tab for FlatList to work
-        defaultTabWidth: !isWidthDynamic
-          ? getComputedTabWidth(
-              index,
-              layout,
-              routes,
-              scrollEnabled,
-              tabWidths,
-              getFlattenedTabWidth(tabStyle),
-              getFlattenedPaddingRight(contentContainerStyle),
-              getFlattenedPaddingLeft(contentContainerStyle),
-              gap
-            )
-          : undefined,
+        defaultTabWidth,
         android_ripple,
-      };
+      } satisfies TabBarItemProps<T> & { key: string };
 
       return (
         <>
@@ -556,33 +553,28 @@ export function TabBar<T extends Route>({
       );
     },
     [
+      position,
+      navigationState,
+      commonOptions,
+      options,
       activeColor,
-      android_ripple,
-      gap,
-      getAccessibilityLabel,
-      getAccessible,
-      getLabelText,
-      getTestID,
       inactiveColor,
+      pressColor,
+      pressOpacity,
       isWidthDynamic,
-      jumpTo,
       labelStyle,
+      tabStyle,
       layout,
-      navigationState,
-      onTabLongPress,
-      onTabPress,
-      position,
-      pressColor,
-      pressOpacity,
-      renderBadge,
-      renderIcon,
-      renderLabel,
-      renderTabBarItem,
       routes,
       scrollEnabled,
-      tabStyle,
-      contentContainerStyle,
       tabWidths,
+      contentContainerStyle,
+      gap,
+      android_ripple,
+      renderTabBarItem,
+      onTabPress,
+      jumpTo,
+      onTabLongPress,
     ]
   );