react-navigation-reanimated-top-tabs 0.2.0

package/lib/typescript/module/src/components/ReanimatedTopTab/ReanimatedTabView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReanimatedTabView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ReanimatedTopTab/ReanimatedTabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAiBvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,WAAW,sBAAsB;IACrC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,EAAE,sBAAsB,CAAC,eAAe,CAAC;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC;IACrE,WAAW,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5E,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,sBAAsB,CAAC,gBAAgB,KAC5C,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,oDA6J7B,CAAC"}

package/lib/typescript/module/src/components/ReanimatedTopTab/types.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+export declare namespace ReanimatedTabViewTypes {
+    interface Route {
+        key: string;
+        name: string;
+        tabBarLabel?: () => React.ReactNode;
+        title?: string;
+    }
+    type NavigationState = {
+        index: number;
+        routes: Route[];
+    };
+    interface RenderTabsParams {
+        navigationState: NavigationState;
+        position: SharedValue<number>;
+    }
+    interface SceneProps {
+        jumpTo?: (key: string) => void;
+        route: Route;
+    }
+    interface SceneMapRoutes {
+        [key: string]: React.ReactNode;
+    }
+    type PositionInterpolation = {
+        input: number[];
+        output: number[];
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/src/components/ReanimatedTopTab/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ReanimatedTopTab/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,yBAAiB,sBAAsB,CAAC;IACtC,UAAiB,KAAK;QACpB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;QACpC,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB;IAED,KAAY,eAAe,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,EAAE,CAAA;KAAE,CAAC;IAEjE,UAAiB,gBAAgB;QAC/B,eAAe,EAAE,eAAe,CAAC;QACjC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KAC/B;IAED,UAAiB,UAAU;QACzB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAC/B,KAAK,EAAE,KAAK,CAAC;KACd;IAED,UAAiB,cAAc;QAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;KAChC;IAED,KAAY,qBAAqB,GAAG;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CAC3E"}

package/lib/typescript/module/src/components/elements/TabBarBaseComponent.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type AnimatedStyle, type SharedValue } from 'react-native-reanimated';
+export interface Route {
+    key: string;
+    name?: string;
+    tabBarLabel?: () => React.ReactNode;
+    title?: string;
+}
+export type NavigationState = {
+    index: number;
+    routes: Route[];
+};
+export interface RenderTabsParams {
+    navigationState: NavigationState;
+    position: SharedValue<number>;
+}
+interface TabBarProps extends RenderTabsParams {
+    children?: React.ReactNode;
+    navigate: (route: Route) => void;
+    style?: AnimatedStyle;
+}
+export declare const TabBarBaseComponent: ({ children, navigate, navigationState, position, style, }: TabBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabBarBaseComponent.d.ts.map

package/lib/typescript/module/src/components/elements/TabBarBaseComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarBaseComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/elements/TabBarBaseComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAmB,EACjB,KAAK,aAAa,EAElB,KAAK,WAAW,EAEjB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,KAAK,EAAE,CAAA;CAAE,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,eAAe,EAAE,eAAe,CAAC;IACjC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,UAAU,WAAY,SAAQ,gBAAgB;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,mBAAmB,8DAM7B,WAAW,4CA8Cb,CAAC"}

package/lib/typescript/module/src/components/elements/TabBarLabelBaseComponent.d.ts

@@ -0,0 +1,8 @@
+interface TabBarLabelTypes {
+    focused: boolean;
+    index: number;
+    title: string;
+}
+export declare const TabBarLabelBaseComponent: ({ index, ...props }: TabBarLabelTypes) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabBarLabelBaseComponent.d.ts.map

package/lib/typescript/module/src/components/elements/TabBarLabelBaseComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarLabelBaseComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/elements/TabBarLabelBaseComponent.tsx"],"names":[],"mappings":"AAOA,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,wBAAwB,wBAGlC,gBAAgB,4CAgClB,CAAC"}

package/lib/typescript/module/src/components/wrappers/GestureWrapper.d.ts

@@ -0,0 +1,2 @@
+export declare const GestureWrapper: ({ children }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GestureWrapper.d.ts.map

package/lib/typescript/module/src/components/wrappers/GestureWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GestureWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/wrappers/GestureWrapper.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,cAAc,iBAAkB,GAAG,4CAwH/C,CAAC"}

package/lib/typescript/module/src/components/wrappers/ScreenWrapper.d.ts

@@ -0,0 +1,6 @@
+import { type ViewProps } from 'react-native';
+import { type AnimatedProps } from 'react-native-reanimated';
+export interface ScreenWrapperProps extends AnimatedProps<Omit<ViewProps, 'onLayout'>> {
+}
+export declare const ScreenWrapper: ({ children, ...viewProps }: ScreenWrapperProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScreenWrapper.d.ts.map

package/lib/typescript/module/src/components/wrappers/ScreenWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/wrappers/ScreenWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,WAAW,kBACf,SAAQ,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;CAAG;AAEvD,eAAO,MAAM,aAAa,+BAGvB,kBAAkB,4CAepB,CAAC"}

package/lib/typescript/module/src/components/wrappers/ScrollView.d.ts

@@ -0,0 +1,6 @@
+import { type ScrollViewProps } from 'react-native';
+import { type AnimatedProps } from 'react-native-reanimated';
+export interface ScreenWrapperProps extends AnimatedProps<Omit<ScrollViewProps, 'onScroll'>> {
+}
+export declare const ScrollView: ({ children, style, ...props }: ScreenWrapperProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScrollView.d.ts.map

package/lib/typescript/module/src/components/wrappers/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/wrappers/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,EAErB,MAAM,cAAc,CAAC;AAEtB,OAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAUzE,MAAM,WAAW,kBACf,SAAQ,aAAa,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;CAAG;AAE7D,eAAO,MAAM,UAAU,kCAIpB,kBAAkB,4CA6BpB,CAAC"}

package/lib/typescript/module/src/context/TopTabContext.d.ts

@@ -0,0 +1,4 @@
+import { type ReanimatedTopTabNavigation } from '../types';
+export declare const Context: import("react").Context<ReanimatedTopTabNavigation.ContextType>;
+export declare const Provider: import("react").MemoExoticComponent<({ children, config, screenProperties, }: ReanimatedTopTabNavigation.TopTabContextProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=TopTabContext.d.ts.map

package/lib/typescript/module/src/context/TopTabContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopTabContext.d.ts","sourceRoot":"","sources":["../../../../../src/context/TopTabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAY3D,eAAO,MAAM,OAAO,iEAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,gFAKhB,0BAA0B,CAAC,kBAAkB,6CA6FjD,CAAC"}

package/lib/typescript/module/src/context/TopTabContext.hooks.d.ts

@@ -0,0 +1,5 @@
+import type { ReanimatedTopTabNavigation } from 'react-navigation-reanimated-top-tabs';
+export declare const TopTabContextHooks: {
+    useResetApproachingScreenScrollOffset: ({ screenRefs, transformationX, screenProperties, currentYPosition, }: Pick<ReanimatedTopTabNavigation.ContextType, "screenRefs" | "screenProperties" | "currentYPosition" | "transformationX">) => void;
+};
+//# sourceMappingURL=TopTabContext.hooks.d.ts.map

package/lib/typescript/module/src/context/TopTabContext.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopTabContext.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/context/TopTabContext.hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAmDvF,eAAO,MAAM,kBAAkB;kHA5C5B,IAAI,CACL,0BAA0B,CAAC,WAAW,EACtC,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,CAC3E;CA2CA,CAAC"}

package/lib/typescript/module/src/hooks/TopTab.hooks.d.ts

@@ -0,0 +1,33 @@
+export declare const useTabContext: () => import("..").ReanimatedTopTabNavigation.ContextType;
+export declare const useScreenGesture: () => import("react-native-gesture-handler/lib/typescript/handlers/gestures/nativeGesture").NativeGesture;
+export declare const useScreenScrollable: () => {
+    animatedProps: Partial<{
+        scrollEnabled: boolean;
+    }>;
+    bounces: boolean;
+    contentContainerStyle: {
+        paddingBottom: number;
+    };
+    onScroll: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
+    style: {
+        minHeight: number;
+    };
+};
+export declare const useScreenProperties: () => {
+    innerLayout: import("react-native-reanimated").SharedValue<import("react-native").LayoutRectangle>;
+    nativeGesture: import("react-native-gesture-handler").NativeGesture;
+    outerLayout: import("react-native-reanimated").SharedValue<import("react-native").LayoutRectangle>;
+    scrollY: import("react-native-reanimated").SharedValue<number>;
+};
+export declare const useHeader: () => {
+    hideHeader: () => void;
+};
+export declare const useScreenRefs: (keys: string[]) => {
+    setRef: (key: string, ref: any) => void;
+    refs: {
+        current: Record<string, {
+            current: any;
+        }>;
+    };
+};
+//# sourceMappingURL=TopTab.hooks.d.ts.map

package/lib/typescript/module/src/hooks/TopTab.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopTab.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/TopTab.hooks.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,2DAA4B,CAAC;AAEvD,eAAO,MAAM,gBAAgB,2GAS5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAgD/B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;CAO/B,CAAC;AAEF,eAAO,MAAM,SAAS;;CAQrB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,MAAM,EAAE;kBAWrB,MAAM,OAAO,GAAG;;;qBAJD,GAAG;;;CASxC,CAAC"}

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

@@ -0,0 +1,10 @@
+export { Provider, Context } from './context/TopTabContext';
+export { createReanimatedTopTabNavigator } from './navigator/createReanimatedTopTabNavigator';
+export { ScrollView } from './components/wrappers/ScrollView';
+export { ScreenWrapper } from './components/wrappers/ScreenWrapper';
+export { GestureWrapper } from './components/wrappers/GestureWrapper';
+export { TabBarBaseComponent } from './components/elements/TabBarBaseComponent';
+export { TabBarLabelBaseComponent } from './components/elements/TabBarLabelBaseComponent';
+export { useTabContext, useHeader, useScreenProperties, useScreenScrollable, useScreenGesture, } from './hooks/TopTab.hooks';
+export { type ReanimatedTopTabNavigation } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,+BAA+B,EAAE,MAAM,6CAA6C,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,EACL,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/src/navigator/createReanimatedTopTabNavigator.d.ts

@@ -0,0 +1,4 @@
+import { type ParamListBase, type TabNavigationState } from '@react-navigation/native';
+import { type ReanimatedTopTabNavigation } from '../types';
+export declare const createReanimatedTopTabNavigator: <Params extends ParamListBase>() => import("@react-navigation/core").TypedNavigator<ParamListBase, TabNavigationState<Params>, ReanimatedTopTabNavigation.NavigationOptions, {}, ({ HeaderComponent, TabBarComponent, children, config, initialRouteName, screenOptions, }: ReanimatedTopTabNavigation.TabViewNavigatorProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=createReanimatedTopTabNavigator.d.ts.map

package/lib/typescript/module/src/navigator/createReanimatedTopTabNavigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReanimatedTopTabNavigator.d.ts","sourceRoot":"","sources":["../../../../../src/navigator/createReanimatedTopTabNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,kBAAkB,EAGxB,MAAM,0BAA0B,CAAC;AAQlC,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAwK3D,eAAO,MAAM,+BAA+B,GAC1C,MAAM,SAAS,aAAa,+OAvJ3B,0BAA0B,CAAC,qBAAqB,6CA8J5B,CAAC"}

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

@@ -0,0 +1,56 @@
+import { TabBarBaseComponent } from './components/elements/TabBarBaseComponent';
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { type LayoutRectangle } from 'react-native';
+import { type NativeGesture } from 'react-native-gesture-handler';
+import { type SharedValue } from 'react-native-reanimated';
+import { type StackNavigationOptions } from '@react-navigation/stack';
+export declare namespace ReanimatedTopTabNavigation {
+    interface ContextType {
+        screenRefs: {
+            refs: {
+                current: Record<string, {
+                    current: any;
+                }>;
+            };
+            setRef(key: string, ref: any): void;
+        };
+        closeOffset: SharedValue<number>;
+        config: string[];
+        currentScreenIndex: SharedValue<number>;
+        currentYPosition: SharedValue<number>;
+        gestureEnabled: SharedValue<boolean>;
+        headerHeight: SharedValue<number>;
+        navHeight: SharedValue<number>;
+        screenProperties: Record<string, {
+            innerLayout: SharedValue<LayoutRectangle>;
+            nativeGesture: NativeGesture;
+            outerLayout: SharedValue<LayoutRectangle>;
+            scrollY: SharedValue<number>;
+        }>;
+        topTabHeight: SharedValue<number>;
+        topTapNativeRef: NativeGesture;
+        transformationX: SharedValue<number>;
+        transformationY: SharedValue<number>;
+    }
+    interface TabViewNavigatorProps {
+        HeaderComponent?: React.ComponentType<Pick<ContextType, 'transformationY' | 'headerHeight'>>;
+        TabBarComponent?: typeof TabBarBaseComponent;
+        children: ReactNode;
+        config?: string[];
+        initialRouteName?: string;
+        screenOptions?: StackNavigationOptions;
+    }
+    type TopTabContextProps = Pick<ContextType, 'screenProperties' | 'config'> & {
+        children: (props: ContextType) => React.ReactNode;
+    };
+    interface NavigationOptions {
+        tabBarLabel?: (props: {
+            focused: boolean;
+            index: number;
+            title: string;
+        }) => React.ReactNode;
+        title?: string;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,yBAAiB,0BAA0B,CAAC;IAC1C,UAAiB,WAAW;QAC1B,UAAU,EAAE;YACV,IAAI,EAAE;gBAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE;oBAAE,OAAO,EAAE,GAAG,CAAA;iBAAE,CAAC,CAAA;aAAE,CAAC;YACpD,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;SACrC,CAAC;QACF,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACjC,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACxC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACtC,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACrC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAC/B,gBAAgB,EAAE,MAAM,CACtB,MAAM,EACN;YACE,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;YAC1C,aAAa,EAAE,aAAa,CAAC;YAC7B,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;YAC1C,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;SAC9B,CACF,CAAC;QACF,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,eAAe,EAAE,aAAa,CAAC;QAC/B,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QACrC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;KACtC;IAED,UAAiB,qBAAqB;QACpC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CACnC,IAAI,CAAC,WAAW,EAAE,iBAAiB,GAAG,cAAc,CAAC,CACtD,CAAC;QACF,eAAe,CAAC,EAAE,OAAO,mBAAmB,CAAC;QAC7C,QAAQ,EAAE,SAAS,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,aAAa,CAAC,EAAE,sBAAsB,CAAC;KACxC;IAED,KAAY,kBAAkB,GAAG,IAAI,CACnC,WAAW,EACX,kBAAkB,GAAG,QAAQ,CAC9B,GAAG;QACF,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC;KACnD,CAAC;IAEF,UAAiB,iBAAiB;QAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;YACpB,OAAO,EAAE,OAAO,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,KAAK,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB;CACF"}

package/package.json

@@ -0,0 +1,204 @@
+{
+  "name": "react-navigation-reanimated-top-tabs",
+  "version": "0.2.0",
+  "description": "react-navigation-reanimated-top-tabs",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-navigation-reanimated-top-tabs-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:irion94/react-navigation-reanimated-top-tabs.git"
+  },
+  "author": "irion94 <kozub@devanddeliver.com> (https://github.com/irion94)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/irion94/react-navigation-reanimated-top-tabs/issues"
+  },
+  "homepage": "https://github.com/irion94/react-navigation-reanimated-top-tabs",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.17.10",
+    "@types/react": "^18.2.44",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-builder-bob": "^0.30.2",
+    "release-it": "^15.0.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^5.*",
+    "react": ">=16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-native-reanimated": ">3.0.0",
+    "react-native": ">=0.60.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "react-hooks/exhaustive-deps": "warn",
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "version": "0.41.2"
+  },
+  "dependencies": {
+    "@react-navigation/elements": "^1.3.31",
+    "@react-navigation/native": "6.1.18",
+    "@react-navigation/routers": "^6.1.9",
+    "@react-navigation/stack": "^6.4.1",
+    "lodash": "^4.17.21",
+    "react-native-gesture-handler": "2.16.1",
+    "react-native-reanimated": "3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
+  }
+}

package/src/components/ReanimatedTopTab/AnimationHelper.ts

@@ -0,0 +1,94 @@
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureChangeEventPayload,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
+import { withTiming as reanimatedWithTiming } from 'react-native-reanimated';
+import type { ReanimatedTabViewTypes } from './types';
+
+const onChange = (
+  event: GestureUpdateEvent<
+    PanGestureHandlerEventPayload & PanGestureChangeEventPayload
+  >,
+  animationValue: number,
+  width: number,
+  navigationState: ReanimatedTabViewTypes.NavigationState
+) => {
+  'worklet';
+  if (animationValue > 0) {
+    return 0;
+  }
+  const routesLength = navigationState.routes.length - 1;
+  if (animationValue < -width * routesLength) {
+    return -width * routesLength;
+  }
+  return animationValue + event.changeX;
+};
+
+const getIndex = (
+  navigationState: ReanimatedTabViewTypes.NavigationState,
+  type: 'increment' | 'decrement'
+) => {
+  'worklet';
+  if (type === 'increment') {
+    return navigationState.index === navigationState.routes.length - 1
+      ? navigationState.index
+      : navigationState.index + 1;
+  }
+  return navigationState.index === 0
+    ? navigationState.index
+    : navigationState.index - 1;
+};
+
+const onEnd = (
+  event: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
+  minimumValueToChangeView: number,
+  width: number,
+  navigationState: ReanimatedTabViewTypes.NavigationState
+) => {
+  'worklet';
+  if (event.velocityX < -200) {
+    return {
+      index: getIndex(navigationState, 'increment'),
+      value: -width * (navigationState.index + 1),
+    };
+  }
+  if (event.velocityX > 200) {
+    return {
+      index: getIndex(navigationState, 'decrement'),
+      value: -width * (navigationState.index - 1),
+    };
+  }
+  if (event.translationX < 0) {
+    if (event.translationX < -minimumValueToChangeView) {
+      return {
+        index: getIndex(navigationState, 'increment'),
+        value: -width * (navigationState.index + 1),
+      };
+    }
+  }
+  if (event.translationX > 0) {
+    if (event.translationX > minimumValueToChangeView) {
+      return {
+        index: getIndex(navigationState, 'decrement'),
+        value: -width * (navigationState.index - 1),
+      };
+    }
+  }
+  return {
+    index: navigationState.index,
+    value: -width * navigationState.index,
+  };
+};
+
+const animation = (newValue: number, duration = 200) => {
+  'worklet';
+  return reanimatedWithTiming(newValue, { duration });
+};
+
+export const AnimationHelper = {
+  animation,
+  onChange,
+  onEnd,
+};