react-navigation-reanimated-top-tabs 0.2.0 → 0.4.0

package/lib/typescript/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 → src}/components/elements/TabBarBaseComponent.d.ts

@@ -14,11 +14,10 @@ export interface RenderTabsParams {
     navigationState: NavigationState;
     position: SharedValue<number>;
 }
-interface TabBarProps extends RenderTabsParams {
+export 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/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;AAIjC,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,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACnD,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/{commonjs/src → src}/components/elements/TabBarLabelBaseComponent.d.ts

@@ -1,8 +1,7 @@
-interface TabBarLabelTypes {
+export 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/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":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,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/src/components/wrappers/GestureWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface GestureWrapperProps {
+    children: React.ReactNode;
+}
+export declare const GestureWrapper: ({ children }: GestureWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GestureWrapper.d.ts.map

package/lib/typescript/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":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAezD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,4CAiH/D,CAAC"}

package/lib/typescript/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;AAIzE,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/src/components/wrappers/ScrollView.d.ts

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

package/lib/typescript/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;AAQzE,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAC5C,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC,CAC3D,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,mEAMpB,kBAAkB,4CAyCpB,CAAC"}

package/lib/typescript/{commonjs/src/context/TopTabContext.d.ts → src/context/Context.d.ts}

@@ -1,4 +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
+export declare const Provider: import("react").MemoExoticComponent<({ children, config, context, }: ReanimatedTopTabNavigation.TopTabContextProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Context.d.ts.map

package/lib/typescript/src/context/Context.d.ts.map

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

package/lib/typescript/src/context/Context.helpers.d.ts

@@ -0,0 +1,4 @@
+export declare const ContextHelpers: {
+    getTargetIndex: (currentValue: number, previousValue: number | null) => number;
+};
+//# sourceMappingURL=Context.helpers.d.ts.map

package/lib/typescript/src/context/Context.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.helpers.d.ts","sourceRoot":"","sources":["../../../../src/context/Context.helpers.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc;mCATW,MAAM,iBAAiB,MAAM,GAAG,IAAI;CAS1B,CAAC"}

package/lib/typescript/src/context/Context.hooks.d.ts

@@ -0,0 +1,15 @@
+import { type ReanimatedTopTabNavigation } from '../types';
+import type { ParamListBase, TabNavigationState } from '@react-navigation/native';
+export declare const ContextHooks: {
+    useResetApproachingScreenScrollOffset: ({ context, transformationX, currentYPosition, }: Pick<ReanimatedTopTabNavigation.ContextType, "context" | "currentYPosition" | "transformationX">) => void;
+    usePrepareContext: ({ state, }: {
+        state: TabNavigationState<ParamListBase>;
+    }) => ReanimatedTopTabNavigation.TopTabContextProps["context"];
+    useTransformHeaderOnTabChange: ({ config, }: Pick<ReanimatedTopTabNavigation.ContextType, "config">) => {
+        transformationY: import("react-native-reanimated").SharedValue<number>;
+        transformationX: import("react-native-reanimated").SharedValue<number>;
+        currentYPosition: import("react-native-reanimated").SharedValue<number>;
+        headerHeight: import("react-native-reanimated").SharedValue<number>;
+    };
+};
+//# sourceMappingURL=Context.hooks.d.ts.map

package/lib/typescript/src/context/Context.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.hooks.d.ts","sourceRoot":"","sources":["../../../../src/context/Context.hooks.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AA2OlC,eAAO,MAAM,YAAY;6FArNtB,IAAI,CACL,0BAA0B,CAAC,WAAW,EACtC,SAAS,GAAG,kBAAkB,GAAG,iBAAiB,CACnD;oCA8IE;QACD,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;KAC1C,KAAG,0BAA0B,CAAC,kBAAkB,CAAC,SAAS,CAAC;iDAuBzD,IAAI,CAAC,0BAA0B,CAAC,WAAW,EAAE,QAAQ,CAAC;;;;;;CA+CxD,CAAC"}

package/lib/typescript/src/hooks/useHeader.d.ts

@@ -0,0 +1,10 @@
+export declare const useHeader: () => {
+    hideHeader: () => void;
+    defaultStyle: {
+        transform: {
+            translateY: number;
+        }[];
+        zIndex: number;
+    };
+};
+//# sourceMappingURL=useHeader.d.ts.map

package/lib/typescript/src/hooks/useHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeader.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useHeader.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;CAsBrB,CAAC"}

package/lib/typescript/src/hooks/useScreenGesture.d.ts

@@ -0,0 +1,2 @@
+export declare const useScreenGesture: () => import("react-native-gesture-handler/lib/typescript/handlers/gestures/nativeGesture").NativeGesture;
+//# sourceMappingURL=useScreenGesture.d.ts.map

package/lib/typescript/src/hooks/useScreenGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenGesture.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScreenGesture.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,2GAS5B,CAAC"}

package/lib/typescript/src/hooks/useScreenProperties.d.ts

@@ -0,0 +1,10 @@
+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>;
+    scrollRef: {
+        current: import("react-native-reanimated/lib/typescript/Animated").ScrollView | null;
+    };
+};
+//# sourceMappingURL=useScreenProperties.d.ts.map

package/lib/typescript/src/hooks/useScreenProperties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenProperties.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScreenProperties.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB;;;;;;;;CAO/B,CAAC"}

package/lib/typescript/src/hooks/useScreenScrollable.d.ts

@@ -0,0 +1,14 @@
+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;
+    };
+};
+//# sourceMappingURL=useScreenScrollable.d.ts.map

package/lib/typescript/src/hooks/useScreenScrollable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenScrollable.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScreenScrollable.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAqD/B,CAAC"}

package/lib/typescript/src/hooks/useTabContext.d.ts

@@ -0,0 +1,2 @@
+export declare const useTabContext: () => import("..").ReanimatedTopTabNavigation.ContextType;
+//# sourceMappingURL=useTabContext.d.ts.map

package/lib/typescript/src/hooks/useTabContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTabContext.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,2DAA4B,CAAC"}

package/lib/typescript/src/hooks/useTabOffset.d.ts

@@ -0,0 +1,2 @@
+export declare const useTabOffset: () => import("react-native-reanimated").DerivedValue<number>;
+//# sourceMappingURL=useTabOffset.d.ts.map

package/lib/typescript/src/hooks/useTabOffset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabOffset.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTabOffset.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,8DAGxB,CAAC"}

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

@@ -0,0 +1,45 @@
+export { type ReanimatedTopTabNavigation } from './types';
+export { createReanimatedTopTabNavigator } from './navigator/createReanimatedTopTabNavigator';
+export declare const TabHooks: {
+    useHeader: () => {
+        hideHeader: () => void;
+        defaultStyle: {
+            transform: {
+                translateY: number;
+            }[];
+            zIndex: number;
+        };
+    };
+    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>;
+        scrollRef: {
+            current: import("react-native-reanimated/lib/typescript/Animated").ScrollView | null;
+        };
+    };
+    useScreenScrollable: () => {
+        animatedProps: Partial<{
+            scrollEnabled: boolean;
+        }>;
+        bounces: boolean;
+        contentContainerStyle: {
+            paddingBottom: number;
+        };
+        onScroll: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
+        style: {
+            minHeight: number;
+        };
+    };
+    useScreenGesture: () => import("react-native-gesture-handler/lib/typescript/handlers/gestures/nativeGesture").NativeGesture;
+    useTabContext: () => import("./types").ReanimatedTopTabNavigation.ContextType;
+    useTabOffset: () => import("react-native-reanimated").DerivedValue<number>;
+};
+export declare const Tab: {
+    ScrollView: ({ children, style, contentContainerStyle, onLayout, ...props }: import("./components/wrappers/ScrollView").ScreenWrapperProps) => import("react/jsx-runtime").JSX.Element;
+    ScreenWrapper: ({ children, ...viewProps }: import("./components/wrappers/ScreenWrapper").ScreenWrapperProps) => import("react/jsx-runtime").JSX.Element;
+    TabBarBaseComponent: ({ children, navigate, navigationState, position, style, }: import("./components/elements/TabBarBaseComponent").TabBarProps) => import("react/jsx-runtime").JSX.Element;
+    TabBarLabelBaseComponent: ({ index, ...props }: import("./components/elements/TabBarLabelBaseComponent").TabBarLabelTypes) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,6CAA6C,CAAC;AAU9F,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;CAKf,CAAC"}

package/lib/typescript/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;AAgJ3D,eAAO,MAAM,+BAA+B,GAC1C,MAAM,SAAS,aAAa,+OAlI3B,0BAA0B,CAAC,qBAAqB,6CAyI5B,CAAC"}

package/lib/typescript/src/services/Warning.service.d.ts

@@ -0,0 +1,5 @@
+export declare const WarningService: {
+    hasWarned: boolean;
+    warn(): void;
+};
+//# sourceMappingURL=Warning.service.d.ts.map

package/lib/typescript/src/services/Warning.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Warning.service.d.ts","sourceRoot":"","sources":["../../../../src/services/Warning.service.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;CAU1B,CAAC"}

package/lib/typescript/{module/src → src}/types.d.ts

@@ -3,18 +3,10 @@ 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 Reanimated, { 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>;
@@ -22,16 +14,31 @@ export declare namespace ReanimatedTopTabNavigation {
         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;
+        topTabNativeGesture: NativeGesture;
         transformationX: SharedValue<number>;
         transformationY: SharedValue<number>;
+        context: {
+            screen: {
+                properties: Record<string, {
+                    innerLayout: SharedValue<LayoutRectangle>;
+                    nativeGesture: NativeGesture;
+                    outerLayout: SharedValue<LayoutRectangle>;
+                    scrollY: SharedValue<number>;
+                    scrollRef: {
+                        current: Reanimated.ScrollView | null;
+                    };
+                }>;
+                setRef(key: string, ref: Reanimated.ScrollView | null): void;
+                getRef(key: string): {
+                    current: Reanimated.ScrollView | null;
+                };
+            };
+            route: {
+                map: Record<number, string>;
+                getKeyForIndex(index: number): string;
+            };
+        };
     }
     interface TabViewNavigatorProps {
         HeaderComponent?: React.ComponentType<Pick<ContextType, 'transformationY' | 'headerHeight'>>;
@@ -41,7 +48,7 @@ export declare namespace ReanimatedTopTabNavigation {
         initialRouteName?: string;
         screenOptions?: StackNavigationOptions;
     }
-    type TopTabContextProps = Pick<ContextType, 'screenProperties' | 'config'> & {
+    type TopTabContextProps = Pick<ContextType, 'config' | 'context'> & {
         children: (props: ContextType) => React.ReactNode;
     };
     interface NavigationOptions {

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

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

package/package.json

@@ -1,22 +1,11 @@
 {
   "name": "react-navigation-reanimated-top-tabs",
-  "version": "0.2.0",
+  "version": "0.4.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"
-      }
-    }
-  },
+  "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -66,6 +55,10 @@
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
     "@react-native/eslint-config": "^0.73.1",
+    "@react-navigation/elements": "^1.3.31",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/routers": "^6.1.9",
+    "@react-navigation/stack": "^6.4.1",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^29.5.5",
     "@types/lodash": "^4.17.10",
@@ -77,10 +70,16 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-builder-bob": "^0.30.2",
+    "react-native-gesture-handler": "^2.16.1",
+    "react-native-reanimated": "^3.10.1",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-screens": "^3.31.1",
+    "react-native-web": "~0.19.10",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
   },
@@ -88,12 +87,18 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^5.*",
+    "@react-navigation/elements": ">=1.3.0",
+    "@react-navigation/native": ">=6.0.0",
+    "@react-navigation/routers": ">=6.0.0",
+    "@react-navigation/stack": ">=6.0.0",
+    "lodash": "^4.17.21",
     "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"
+    "react-native-reanimated": ">3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-screens": ">=3.0.0",
+    "react-native-web": ">=0.19.0"
   },
   "workspaces": [
     "example"
@@ -165,22 +170,15 @@
     "output": "lib",
     "targets": [
       [
-        "commonjs",
-        {
-          "esm": true
-        }
+        "commonjs"
       ],
       [
-        "module",
-        {
-          "esm": true
-        }
+        "module"
       ],
       [
         "typescript",
         {
-          "project": "tsconfig.build.json",
-          "esm": true
+          "project": "tsconfig.build.json"
         }
       ]
     ]
@@ -188,17 +186,5 @@
   "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/ReanimatedTabView.tsx

@@ -5,7 +5,7 @@ import {
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
-import Animated, {
+import Reanimated, {
   Extrapolation,
   interpolate,
   LinearTransition,
@@ -78,6 +78,7 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
           .failOffsetY(10)
           .activeOffsetX([-20, 20])
           .onChange((event) => {
+            'worklet';
             scrollPosition.value = AnimationHelper.onChange(
               event,
               scrollPosition.value,
@@ -86,6 +87,7 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
             );
           })
           .onEnd((event) => {
+            'worklet';
             const state = AnimationHelper.onEnd(
               event,
               minimumValueToChangeView,
@@ -168,10 +170,10 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
 
     return (
       <GestureHandlerRootView style={defaultStyles.flex}>
-        <Animated.View layout={LinearTransition} style={defaultStyles.flex}>
+        <Reanimated.View layout={LinearTransition} style={defaultStyles.flex}>
           {renderTabBar ? renderTabBar({ navigationState, position }) : null}
           <GestureDetector gesture={panGesture}>
-            <Animated.View
+            <Reanimated.View
               layout={LinearTransition}
               style={[
                 scrollPositionStyle,
@@ -181,15 +183,14 @@ export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
               ]}
             >
               {Routes}
-            </Animated.View>
+            </Reanimated.View>
           </GestureDetector>
-        </Animated.View>
+        </Reanimated.View>
       </GestureHandlerRootView>
     );
   }
 );
 
-//NOTE: purposely use of StyleSheet - simplify migration to library
 const defaultStyles = StyleSheet.create({
   flex: {
     flex: 1,

package/src/components/elements/TabBarBaseComponent.tsx

@@ -6,7 +6,8 @@ import Reanimated, {
   type SharedValue,
   useAnimatedReaction,
 } from 'react-native-reanimated';
-import { useTabContext } from '../../hooks/TopTab.hooks';
+
+import { useTabContext } from '../../hooks/useTabContext';
 
 export interface Route {
   key: string;
@@ -22,7 +23,7 @@ export interface RenderTabsParams {
   position: SharedValue<number>;
 }
 
-interface TabBarProps extends RenderTabsParams {
+export interface TabBarProps extends RenderTabsParams {
   children?: React.ReactNode;
   navigate: (route: Route) => void;
   style?: AnimatedStyle;
@@ -72,7 +73,7 @@ export const TabBarBaseComponent = ({
             {route.tabBarLabel ? (
               route.tabBarLabel()
             ) : (
-              <Text style={{ color: 'red' }}>{route.title}</Text>
+              <Text style={styles.label}>{route.title}</Text>
             )}
           </Pressable>
         ))}
@@ -89,6 +90,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  label: {
+    color: 'red',
+  },
   wrapper: {
     width: '100%',
     flexDirection: 'row',

package/src/components/elements/TabBarLabelBaseComponent.tsx

@@ -3,9 +3,10 @@ import Reanimated, {
   interpolateColor,
   useAnimatedStyle,
 } from 'react-native-reanimated';
-import { useTabContext } from '../../hooks/TopTab.hooks';
 
-interface TabBarLabelTypes {
+import { useTabOffset } from '../../hooks/useTabOffset';
+
+export interface TabBarLabelTypes {
   focused: boolean;
   index: number;
   title: string;
@@ -15,7 +16,7 @@ export const TabBarLabelBaseComponent = ({
   index,
   ...props
 }: TabBarLabelTypes) => {
-  const { transformationX } = useTabContext();
+  const transformationX = useTabOffset();
 
   const style = useAnimatedStyle(
     () => ({