@zoverdoser/react-native-tab-view 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +5 -0
  3. package/lib/module/Pager.android.js +4 -0
  4. package/lib/module/Pager.android.js.map +1 -0
  5. package/lib/module/Pager.ios.js +4 -0
  6. package/lib/module/Pager.ios.js.map +1 -0
  7. package/lib/module/Pager.js +4 -0
  8. package/lib/module/Pager.js.map +1 -0
  9. package/lib/module/PagerViewAdapter.js +131 -0
  10. package/lib/module/PagerViewAdapter.js.map +1 -0
  11. package/lib/module/PanResponderAdapter.js +209 -0
  12. package/lib/module/PanResponderAdapter.js.map +1 -0
  13. package/lib/module/PlatformPressable.js +61 -0
  14. package/lib/module/PlatformPressable.js.map +1 -0
  15. package/lib/module/SceneMap.js +24 -0
  16. package/lib/module/SceneMap.js.map +1 -0
  17. package/lib/module/SceneView.js +72 -0
  18. package/lib/module/SceneView.js.map +1 -0
  19. package/lib/module/TabBar.js +470 -0
  20. package/lib/module/TabBar.js.map +1 -0
  21. package/lib/module/TabBarIndicator.js +122 -0
  22. package/lib/module/TabBarIndicator.js.map +1 -0
  23. package/lib/module/TabBarItem.js +209 -0
  24. package/lib/module/TabBarItem.js.map +1 -0
  25. package/lib/module/TabBarItemLabel.js +34 -0
  26. package/lib/module/TabBarItemLabel.js.map +1 -0
  27. package/lib/module/TabView.js +141 -0
  28. package/lib/module/TabView.js.map +1 -0
  29. package/lib/module/index.js +8 -0
  30. package/lib/module/index.js.map +1 -0
  31. package/lib/module/package.json +1 -0
  32. package/lib/module/types.js +4 -0
  33. package/lib/module/types.js.map +1 -0
  34. package/lib/module/useAnimatedValue.js +12 -0
  35. package/lib/module/useAnimatedValue.js.map +1 -0
  36. package/lib/typescript/package.json +1 -0
  37. package/lib/typescript/src/Pager.android.d.ts +2 -0
  38. package/lib/typescript/src/Pager.android.d.ts.map +1 -0
  39. package/lib/typescript/src/Pager.d.ts +2 -0
  40. package/lib/typescript/src/Pager.d.ts.map +1 -0
  41. package/lib/typescript/src/Pager.ios.d.ts +2 -0
  42. package/lib/typescript/src/Pager.ios.d.ts.map +1 -0
  43. package/lib/typescript/src/PagerViewAdapter.d.ts +18 -0
  44. package/lib/typescript/src/PagerViewAdapter.d.ts.map +1 -0
  45. package/lib/typescript/src/PanResponderAdapter.d.ts +19 -0
  46. package/lib/typescript/src/PanResponderAdapter.d.ts.map +1 -0
  47. package/lib/typescript/src/PlatformPressable.d.ts +14 -0
  48. package/lib/typescript/src/PlatformPressable.d.ts.map +1 -0
  49. package/lib/typescript/src/SceneMap.d.ts +10 -0
  50. package/lib/typescript/src/SceneMap.d.ts.map +1 -0
  51. package/lib/typescript/src/SceneView.d.ts +16 -0
  52. package/lib/typescript/src/SceneView.d.ts.map +1 -0
  53. package/lib/typescript/src/TabBar.d.ts +31 -0
  54. package/lib/typescript/src/TabBar.d.ts.map +1 -0
  55. package/lib/typescript/src/TabBarIndicator.d.ts +15 -0
  56. package/lib/typescript/src/TabBarIndicator.d.ts.map +1 -0
  57. package/lib/typescript/src/TabBarItem.d.ts +18 -0
  58. package/lib/typescript/src/TabBarItem.d.ts.map +1 -0
  59. package/lib/typescript/src/TabBarItemLabel.d.ts +13 -0
  60. package/lib/typescript/src/TabBarItemLabel.d.ts.map +1 -0
  61. package/lib/typescript/src/TabView.d.ts +33 -0
  62. package/lib/typescript/src/TabView.d.ts.map +1 -0
  63. package/lib/typescript/src/index.d.ts +11 -0
  64. package/lib/typescript/src/index.d.ts.map +1 -0
  65. package/lib/typescript/src/types.d.ts +76 -0
  66. package/lib/typescript/src/types.d.ts.map +1 -0
  67. package/lib/typescript/src/useAnimatedValue.d.ts +3 -0
  68. package/lib/typescript/src/useAnimatedValue.d.ts.map +1 -0
  69. package/package.json +84 -0
  70. package/src/Pager.android.tsx +1 -0
  71. package/src/Pager.ios.tsx +1 -0
  72. package/src/Pager.tsx +1 -0
  73. package/src/PagerViewAdapter.tsx +186 -0
  74. package/src/PanResponderAdapter.tsx +344 -0
  75. package/src/PlatformPressable.tsx +91 -0
  76. package/src/SceneMap.tsx +30 -0
  77. package/src/SceneView.tsx +106 -0
  78. package/src/TabBar.tsx +725 -0
  79. package/src/TabBarIndicator.tsx +190 -0
  80. package/src/TabBarItem.tsx +301 -0
  81. package/src/TabBarItemLabel.tsx +50 -0
  82. package/src/TabView.tsx +198 -0
  83. package/src/index.tsx +16 -0
  84. package/src/types.tsx +94 -0
  85. package/src/useAnimatedValue.tsx +12 -0
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ import { type StyleProp, type ViewStyle } from 'react-native';
3
+ import type { LocaleDirection, NavigationState, Route, SceneRendererProps } from './types';
4
+ export type GetTabWidth = (index: number) => number;
5
+ export type Props<T extends Route> = SceneRendererProps & {
6
+ navigationState: NavigationState<T>;
7
+ width: 'auto' | `${number}%` | number;
8
+ getTabWidth: GetTabWidth;
9
+ direction: LocaleDirection;
10
+ style?: StyleProp<ViewStyle>;
11
+ gap?: number;
12
+ children?: React.ReactNode;
13
+ };
14
+ export declare function TabBarIndicator<T extends Route>({ getTabWidth, layout, navigationState, position, width, direction, gap, style, children, }: Props<T>): import("react/jsx-runtime").JSX.Element;
15
+ //# sourceMappingURL=TabBarIndicator.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,18 @@
1
+ import { Animated, type LayoutChangeEvent, type PressableAndroidRippleConfig, type StyleProp, type ViewStyle } from 'react-native';
2
+ import type { AnimatedStyles, NavigationState, Route, TabDescriptor } from './types';
3
+ export type Props<T extends Route> = TabDescriptor<T> & {
4
+ position: Animated.AnimatedInterpolation<number>;
5
+ route: T;
6
+ navigationState: NavigationState<T>;
7
+ pressColor?: string;
8
+ pressOpacity?: number;
9
+ onLayout?: (event: LayoutChangeEvent) => void;
10
+ onPress: () => void;
11
+ onLongPress: () => void;
12
+ defaultTabWidth?: number;
13
+ style: StyleProp<ViewStyle>;
14
+ android_ripple?: PressableAndroidRippleConfig;
15
+ animatedStyles?: AnimatedStyles;
16
+ };
17
+ export declare function TabBarItem<T extends Route>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
18
+ //# sourceMappingURL=TabBarItem.d.ts.map
@@ -0,0 +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;AA+MF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,2CAsB1D"}
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import type { StyleProp, TextStyle } from 'react-native';
3
+ import { type AnimatedStyle } from 'react-native-reanimated';
4
+ interface TabBarItemLabelProps {
5
+ label?: string;
6
+ style: StyleProp<TextStyle>;
7
+ animatedStyles: AnimatedStyle<TextStyle>;
8
+ icon: React.ReactNode;
9
+ labelAllowFontScaling?: boolean;
10
+ }
11
+ export declare const TabBarItemLabel: React.MemoExoticComponent<({ label, style, animatedStyles, icon, labelAllowFontScaling, }: TabBarItemLabelProps) => import("react/jsx-runtime").JSX.Element | null>;
12
+ export {};
13
+ //# sourceMappingURL=TabBarItemLabel.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,33 @@
1
+ import * as React from 'react';
2
+ import { type StyleProp, type ViewStyle } from 'react-native';
3
+ import type { Layout, LocaleDirection, NavigationState, PagerProps, Route, SceneRendererProps, TabDescriptor } from './types';
4
+ export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
5
+ onIndexChange: (index: number) => void;
6
+ onTabSelect?: (props: {
7
+ index: number;
8
+ }) => void;
9
+ navigationState: NavigationState<T>;
10
+ renderLazyPlaceholder?: (props: {
11
+ route: T;
12
+ }) => React.ReactNode;
13
+ renderTabBar?: (props: SceneRendererProps & {
14
+ navigationState: NavigationState<T>;
15
+ options: Record<string, TabDescriptor<T>> | undefined;
16
+ }) => React.ReactNode;
17
+ tabBarPosition?: 'top' | 'bottom';
18
+ initialLayout?: Partial<Layout>;
19
+ lazy?: ((props: {
20
+ route: T;
21
+ }) => boolean) | boolean;
22
+ lazyPreloadDistance?: number;
23
+ direction?: LocaleDirection;
24
+ pagerStyle?: StyleProp<ViewStyle>;
25
+ style?: StyleProp<ViewStyle>;
26
+ renderScene: (props: SceneRendererProps & {
27
+ route: T;
28
+ }) => React.ReactNode;
29
+ options?: Record<string, TabDescriptor<T>>;
30
+ commonOptions?: TabDescriptor<T>;
31
+ };
32
+ 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;
33
+ //# sourceMappingURL=TabView.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,11 @@
1
+ export { SceneMap } from './SceneMap';
2
+ export type { Props as TabBarProps } from './TabBar';
3
+ export { TabBar } from './TabBar';
4
+ export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
5
+ export { TabBarIndicator } from './TabBarIndicator';
6
+ export type { Props as TabBarItemProps } from './TabBarItem';
7
+ export { TabBarItem } from './TabBarItem';
8
+ export type { Props as TabViewProps } from './TabView';
9
+ export { TabView } from './TabView';
10
+ export type { AnimatedStyles, NavigationState, Route, SceneRendererProps, TabDescriptor, } from './types';
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +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"}
@@ -0,0 +1,76 @@
1
+ import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
2
+ import type { PagerViewProps } from 'react-native-pager-view';
3
+ import type { AnimatedStyle } from 'react-native-reanimated';
4
+ export type TabDescriptor<T extends Route> = {
5
+ accessibilityLabel?: string;
6
+ accessible?: boolean;
7
+ testID?: string;
8
+ labelText?: string;
9
+ labelAllowFontScaling?: boolean;
10
+ href?: string;
11
+ label?: (props: {
12
+ route: T;
13
+ labelText?: string;
14
+ focused: boolean;
15
+ allowFontScaling?: boolean;
16
+ style?: StyleProp<TextStyle>;
17
+ animatedStyles?: AnimatedStyle<TextStyle>;
18
+ }) => React.ReactNode;
19
+ labelStyle?: StyleProp<TextStyle>;
20
+ icon?: (props: {
21
+ route: T;
22
+ focused: boolean;
23
+ color: string;
24
+ size: number;
25
+ }) => React.ReactNode;
26
+ badge?: (props: {
27
+ route: T;
28
+ }) => React.ReactElement;
29
+ sceneStyle?: StyleProp<ViewStyle>;
30
+ };
31
+ export type LocaleDirection = 'ltr' | 'rtl';
32
+ export type Route = {
33
+ key: string;
34
+ icon?: string;
35
+ title?: string;
36
+ accessible?: boolean;
37
+ accessibilityLabel?: string;
38
+ testID?: string;
39
+ };
40
+ export type Event = {
41
+ defaultPrevented: boolean;
42
+ preventDefault(): void;
43
+ };
44
+ export type Scene<T extends Route> = {
45
+ route: T;
46
+ };
47
+ export type NavigationState<T extends Route> = {
48
+ index: number;
49
+ routes: T[];
50
+ };
51
+ export type Layout = {
52
+ width: number;
53
+ height: number;
54
+ };
55
+ export type Listener = (value: number) => void;
56
+ export type SceneRendererProps = {
57
+ layout: Layout;
58
+ position: Animated.AnimatedInterpolation<number>;
59
+ jumpTo: (key: string) => void;
60
+ };
61
+ export type EventEmitterProps = {
62
+ addEnterListener: (listener: Listener) => () => void;
63
+ };
64
+ export type PagerProps = Omit<PagerViewProps, 'initialPage' | 'scrollEnabled' | 'onPageScroll' | 'onPageSelected' | 'onPageScrollStateChanged' | 'keyboardDismissMode' | 'children'> & {
65
+ keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
66
+ swipeEnabled?: boolean;
67
+ animationEnabled?: boolean;
68
+ onSwipeStart?: () => void;
69
+ onSwipeEnd?: () => void;
70
+ };
71
+ export type AnimatedStyles = {
72
+ color?: [string, string];
73
+ opacity?: [number, number];
74
+ scale?: [number, number];
75
+ };
76
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ import { Animated } from 'react-native';
2
+ export declare function useAnimatedValue(initialValue: number): Animated.Value;
3
+ //# sourceMappingURL=useAnimatedValue.d.ts.map
@@ -0,0 +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"}
package/package.json ADDED
@@ -0,0 +1,84 @@
1
+ {
2
+ "name": "@zoverdoser/react-native-tab-view",
3
+ "description": "Tab view component for React Native",
4
+ "version": "1.0.0",
5
+ "keywords": [
6
+ "react-native-component",
7
+ "react-component",
8
+ "react-native",
9
+ "ios",
10
+ "android",
11
+ "tab",
12
+ "swipe",
13
+ "scrollable",
14
+ "coverflow"
15
+ ],
16
+ "license": "MIT",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "https://github.com/zoverdoser/react-navigation.git",
20
+ "directory": "packages/react-native-tab-view"
21
+ },
22
+ "bugs": {
23
+ "url": "https://github.com/zoverdoser/react-navigation/issues"
24
+ },
25
+ "homepage": "https://github.com/zoverdoser/react-navigation",
26
+ "main": "./lib/module/index.js",
27
+ "types": "./lib/typescript/src/index.d.ts",
28
+ "exports": {
29
+ ".": {
30
+ "source": "./src/index.tsx",
31
+ "types": "./lib/typescript/src/index.d.ts",
32
+ "default": "./lib/module/index.js"
33
+ },
34
+ "./package.json": "./package.json"
35
+ },
36
+ "files": [
37
+ "src",
38
+ "lib",
39
+ "!**/__tests__"
40
+ ],
41
+ "sideEffects": false,
42
+ "scripts": {
43
+ "prepack": "bob build",
44
+ "clean": "del lib"
45
+ },
46
+ "dependencies": {
47
+ "use-latest-callback": "^0.2.4"
48
+ },
49
+ "devDependencies": {
50
+ "@jest/globals": "^30.0.0",
51
+ "@testing-library/react-native": "^13.2.0",
52
+ "del-cli": "^6.0.0",
53
+ "react": "19.0.0",
54
+ "react-native": "0.79.3",
55
+ "react-native-builder-bob": "^0.40.12",
56
+ "react-native-pager-view": "6.8.1",
57
+ "react-test-renderer": "19.0.0",
58
+ "typescript": "^5.8.3"
59
+ },
60
+ "peerDependencies": {
61
+ "react": ">= 18.2.0",
62
+ "react-native": "*",
63
+ "react-native-pager-view": ">= 6.0.0",
64
+ "react-native-reanimated": ">= 2.0.0"
65
+ },
66
+ "react-native-builder-bob": {
67
+ "source": "src",
68
+ "output": "lib",
69
+ "targets": [
70
+ [
71
+ "module",
72
+ {
73
+ "esm": true
74
+ }
75
+ ],
76
+ [
77
+ "typescript",
78
+ {
79
+ "project": "tsconfig.build.json"
80
+ }
81
+ ]
82
+ ]
83
+ }
84
+ }
@@ -0,0 +1 @@
1
+ export { PagerViewAdapter as Pager } from './PagerViewAdapter';
@@ -0,0 +1 @@
1
+ export { PagerViewAdapter as Pager } from './PagerViewAdapter';
package/src/Pager.tsx ADDED
@@ -0,0 +1 @@
1
+ export { PanResponderAdapter as Pager } from './PanResponderAdapter';
@@ -0,0 +1,186 @@
1
+ import * as React from 'react';
2
+ import { Animated, Keyboard, Platform, StyleSheet } from 'react-native';
3
+ import ViewPager, {
4
+ type PageScrollStateChangedNativeEvent,
5
+ } from 'react-native-pager-view';
6
+ import useLatestCallback from 'use-latest-callback';
7
+
8
+ import type {
9
+ EventEmitterProps,
10
+ Listener,
11
+ NavigationState,
12
+ PagerProps,
13
+ Route,
14
+ } from './types';
15
+ import { useAnimatedValue } from './useAnimatedValue';
16
+
17
+ const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
18
+
19
+ type Props<T extends Route> = PagerProps & {
20
+ onIndexChange: (index: number) => void;
21
+ onTabSelect?: (props: { index: number }) => void;
22
+ navigationState: NavigationState<T>;
23
+ children: (
24
+ props: EventEmitterProps & {
25
+ // Animated value which represents the state of current index
26
+ // It can include fractional digits as it represents the intermediate value
27
+ position: Animated.AnimatedInterpolation<number>;
28
+ // Function to actually render the content of the pager
29
+ // The parent component takes care of rendering
30
+ render: (children: React.ReactNode) => React.ReactNode;
31
+ // Callback to call when switching the tab
32
+ // The tab switch animation is performed even if the index in state is unchanged
33
+ jumpTo: (key: string) => void;
34
+ }
35
+ ) => React.ReactElement;
36
+ };
37
+
38
+ const useNativeDriver = Platform.OS !== 'web';
39
+
40
+ export function PagerViewAdapter<T extends Route>({
41
+ keyboardDismissMode = 'auto',
42
+ swipeEnabled = true,
43
+ navigationState,
44
+ onIndexChange,
45
+ onTabSelect,
46
+ onSwipeStart,
47
+ onSwipeEnd,
48
+ children,
49
+ style,
50
+ animationEnabled,
51
+ ...rest
52
+ }: Props<T>) {
53
+ const { index } = navigationState;
54
+
55
+ const listenersRef = React.useRef<Listener[]>([]);
56
+
57
+ const pagerRef = React.useRef<ViewPager>(null);
58
+ const indexRef = React.useRef<number>(index);
59
+ const navigationStateRef = React.useRef(navigationState);
60
+
61
+ const position = useAnimatedValue(index);
62
+ const offset = useAnimatedValue(0);
63
+
64
+ React.useEffect(() => {
65
+ navigationStateRef.current = navigationState;
66
+ });
67
+
68
+ const jumpTo = useLatestCallback((key: string) => {
69
+ const index = navigationStateRef.current.routes.findIndex(
70
+ (route: { key: string }) => route.key === key
71
+ );
72
+
73
+ if (animationEnabled) {
74
+ pagerRef.current?.setPage(index);
75
+ } else {
76
+ pagerRef.current?.setPageWithoutAnimation(index);
77
+ position.setValue(index);
78
+ }
79
+
80
+ onIndexChange(index);
81
+ });
82
+
83
+ React.useEffect(() => {
84
+ if (keyboardDismissMode === 'auto') {
85
+ Keyboard.dismiss();
86
+ }
87
+
88
+ if (indexRef.current !== index) {
89
+ if (animationEnabled) {
90
+ pagerRef.current?.setPage(index);
91
+ } else {
92
+ pagerRef.current?.setPageWithoutAnimation(index);
93
+ position.setValue(index);
94
+ }
95
+ }
96
+ }, [keyboardDismissMode, index, animationEnabled, position]);
97
+
98
+ const onPageScrollStateChanged = (
99
+ state: PageScrollStateChangedNativeEvent
100
+ ) => {
101
+ const { pageScrollState } = state.nativeEvent;
102
+
103
+ switch (pageScrollState) {
104
+ case 'idle':
105
+ offset.setValue(0);
106
+ onSwipeEnd?.();
107
+ return;
108
+ case 'dragging': {
109
+ const subscription = offset.addListener(({ value }) => {
110
+ const next =
111
+ index + (value > 0 ? Math.ceil(value) : Math.floor(value));
112
+
113
+ if (next !== index) {
114
+ listenersRef.current.forEach((listener) => listener(next));
115
+ }
116
+
117
+ offset.removeListener(subscription);
118
+ });
119
+
120
+ onSwipeStart?.();
121
+ return;
122
+ }
123
+ }
124
+ };
125
+
126
+ const addEnterListener = useLatestCallback((listener: Listener) => {
127
+ listenersRef.current.push(listener);
128
+
129
+ return () => {
130
+ const index = listenersRef.current.indexOf(listener);
131
+
132
+ if (index > -1) {
133
+ listenersRef.current.splice(index, 1);
134
+ }
135
+ };
136
+ });
137
+
138
+ const memoizedPosition = React.useMemo(
139
+ () => Animated.add(position, offset),
140
+ [offset, position]
141
+ );
142
+
143
+ return children({
144
+ position: memoizedPosition,
145
+ addEnterListener,
146
+ jumpTo,
147
+ render: (children) => (
148
+ <AnimatedViewPager
149
+ {...rest}
150
+ ref={pagerRef}
151
+ style={[styles.container, style]}
152
+ initialPage={index}
153
+ keyboardDismissMode={
154
+ keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
155
+ }
156
+ onPageScroll={Animated.event(
157
+ [
158
+ {
159
+ nativeEvent: {
160
+ position: position,
161
+ offset: offset,
162
+ },
163
+ },
164
+ ],
165
+ { useNativeDriver }
166
+ )}
167
+ onPageSelected={(e) => {
168
+ const index = e.nativeEvent.position;
169
+ indexRef.current = index;
170
+ onIndexChange(index);
171
+ onTabSelect?.({ index });
172
+ }}
173
+ onPageScrollStateChanged={onPageScrollStateChanged}
174
+ scrollEnabled={swipeEnabled}
175
+ >
176
+ {children}
177
+ </AnimatedViewPager>
178
+ ),
179
+ });
180
+ }
181
+
182
+ const styles = StyleSheet.create({
183
+ container: {
184
+ flex: 1,
185
+ },
186
+ });