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

package/src/components/wrappers/GestureWrapper.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Reanimated, {
   Easing,
@@ -6,27 +6,38 @@ import Reanimated, {
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { useTabContext } from '../../hooks/TopTab.hooks';
 
-//TODO: types
-export const GestureWrapper = ({ children }: any) => {
+import { useTabContext } from '../../hooks/useTabContext';
+
+interface GestureWrapperProps {
+  children: React.ReactNode;
+}
+
+export const GestureWrapper = ({ children }: GestureWrapperProps) => {
   const {
+    context,
     currentScreenIndex,
     currentYPosition,
     gestureEnabled,
     headerHeight,
-    screenProperties,
     transformationY,
-    screenRefs,
   } = useTabContext();
 
   const movedY = useSharedValue(0);
 
   const gestureRef = useRef(Gesture.Pan());
 
+  const currentScreenScrollOffset = useDerivedValue(
+    () =>
+      Object.values(context.screen.properties).map(({ scrollY }) => scrollY)[
+        currentScreenIndex.value
+      ]?.value ?? 0
+  );
+
   const withTimingConfig = {
     duration: 300,
     easing: Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -42,41 +53,27 @@ export const GestureWrapper = ({ children }: any) => {
     []
   );
 
-  const _scrollTo = (index: number, value: number = 0) => {
-    const { scrollTo } = Object.values(screenRefs.refs.current)[index]
-      ?.current ?? { scrollTo: () => null };
-
-    scrollTo({
-      y: value,
-      animated: false,
-    });
-  };
-
   const gesture = useMemo(
     () =>
       Gesture.Pan()
         .activeOffsetY([-10, 10])
         .onTouchesMove(({ state }, stateManager) => {
-          const current = Object.values(screenProperties).map(
-            ({ scrollY }) => scrollY
-          )[currentScreenIndex.value];
-
-          if ((current?.value ?? 0) > 0 && state !== 4 && state !== 3) {
+          'worklet';
+          if (
+            currentScreenScrollOffset.value > 0 &&
+            state !== 4 &&
+            state !== 3
+          ) {
             stateManager.fail();
           }
         })
         .onUpdate(({ translationY }) => {
-          if (translationY <= -headerHeight.value) {
-            runOnJS(_scrollTo)(
-              currentScreenIndex.value,
-              Math.abs(translationY + headerHeight.value)
-            );
-          }
-
+          'worklet';
           transformationY.value =
             currentYPosition.value + translationY - movedY.value;
         })
         .onEnd(({ translationY, velocityY }) => {
+          'worklet';
           const gestureValue = translationY + velocityY * 0.2;
           const changeOffset = 0.2 * headerHeight.value;
 
@@ -98,10 +95,11 @@ export const GestureWrapper = ({ children }: any) => {
           }
         })
         .onFinalize(() => {
+          'worklet';
           movedY.value = 0;
         })
         .simultaneousWithExternalGesture(
-          ...Object.values(screenProperties).map(
+          ...Object.values(context.screen.properties).map(
             ({ nativeGesture }) => nativeGesture
           )
         )

package/src/components/wrappers/ScreenWrapper.tsx

@@ -1,7 +1,8 @@
 import { useRoute } from '@react-navigation/native';
 import { type LayoutChangeEvent, type ViewProps } from 'react-native';
 import Reanimated, { type AnimatedProps } from 'react-native-reanimated';
-import { useTabContext } from '../../hooks/TopTab.hooks';
+
+import { useTabContext } from '../../hooks/useTabContext';
 
 export interface ScreenWrapperProps
   extends AnimatedProps<Omit<ViewProps, 'onLayout'>> {}
@@ -11,10 +12,10 @@ export const ScreenWrapper = ({
   ...viewProps
 }: ScreenWrapperProps) => {
   const { key } = useRoute();
-  const { screenProperties } = useTabContext();
+  const { context } = useTabContext();
 
   const onLayout = (event: LayoutChangeEvent) => {
-    const screen = screenProperties[key];
+    const screen = context.screen.properties[key];
     if (!screen) throw 'No screen property registered for this route';
     screen.outerLayout.value = event.nativeEvent.layout;
   };

package/src/components/wrappers/ScrollView.tsx

@@ -5,46 +5,60 @@ import {
 } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 import Reanimated, { type AnimatedProps } from 'react-native-reanimated';
-import {
-  useScreenGesture,
-  useScreenProperties,
-  useScreenScrollable,
-  useTabContext,
-} from '../../hooks/TopTab.hooks';
 import { useRef } from 'react';
 import { useRoute } from '@react-navigation/native';
+import { useTabContext } from '../../hooks/useTabContext';
+import { useScreenGesture } from '../../hooks/useScreenGesture';
+import { useScreenScrollable } from '../../hooks/useScreenScrollable';
+import { useScreenProperties } from '../../hooks/useScreenProperties';
 
-export interface ScreenWrapperProps
-  extends AnimatedProps<Omit<ScrollViewProps, 'onScroll'>> {}
+export type ScreenWrapperProps = AnimatedProps<
+  Omit<ScrollViewProps, 'onScroll' | 'onLayout' | 'bounces'>
+> &
+  Pick<ScrollViewProps, 'onLayout'> & {};
 
 export const ScrollView = ({
   children,
   style,
+  contentContainerStyle,
+  onLayout,
   ...props
 }: ScreenWrapperProps) => {
   const gesture = useScreenGesture();
-  const { style: animatedStyle, ...scrollProps } = useScreenScrollable();
+  const {
+    style: _style,
+    contentContainerStyle: _contentContainerStyle,
+    onScroll,
+    bounces,
+    animatedProps,
+  } = useScreenScrollable();
   const { innerLayout } = useScreenProperties();
-  const { screenRefs } = useTabContext();
+  const { context } = useTabContext();
 
   const { key } = useRoute();
-
   const _ref = useRef<Reanimated.ScrollView>(null);
 
-  const onLayout = (event: LayoutChangeEvent) => {
+  const _onLayout = (event: LayoutChangeEvent) => {
+    onLayout?.(event);
     innerLayout.value = event.nativeEvent.layout;
-    screenRefs.setRef(key, _ref);
+    context.screen.setRef(key, _ref.current);
   };
 
   return (
     <GestureDetector gesture={gesture}>
       <Reanimated.ScrollView
-        {...scrollProps}
-        {...props}
         ref={_ref}
-        contentContainerStyle={_style.contentContainerStyle}
-        onLayout={onLayout}
-        style={[style, animatedStyle]}
+        contentContainerStyle={[
+          _contentContainerStyle,
+          styleSheet.contentContainerStyle,
+          contentContainerStyle,
+        ]}
+        onLayout={_onLayout}
+        style={[_style, style]}
+        onScroll={onScroll}
+        bounces={bounces}
+        animatedProps={animatedProps}
+        {...props}
       >
         {children}
       </Reanimated.ScrollView>
@@ -52,7 +66,7 @@ export const ScrollView = ({
   );
 };
 
-const _style = StyleSheet.create({
+const styleSheet = StyleSheet.create({
   contentContainerStyle: {
     flexGrow: 1,
   },

package/src/context/Context.helpers.tsx

@@ -0,0 +1,10 @@
+const getTargetIndex = (currentValue: number, previousValue: number | null) => {
+  'worklet';
+  if (currentValue > (previousValue ?? 0)) {
+    return Math.ceil(currentValue);
+  } else {
+    return Math.floor(currentValue);
+  }
+};
+
+export const ContextHelpers = { getTargetIndex };

package/src/context/Context.hooks.ts

@@ -0,0 +1,253 @@
+import Reanimated, {
+  interpolate,
+  makeMutable,
+  runOnJS,
+  useAnimatedReaction,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { type ReanimatedTopTabNavigation } from '../types';
+import { useRef } from 'react';
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from '@react-navigation/native';
+import { Gesture } from 'react-native-gesture-handler';
+import { assign } from 'lodash';
+import { ContextHelpers } from './Context.helpers';
+
+/**
+ * Hook to reset the scroll offset for the approaching screen in a tab navigation context.
+ *
+ * @param {Object} params - The parameters for configuring the scroll offset reset.
+ * @param {ReanimatedTopTabNavigation.ContextType["context"]} params.context - The context containing navigation and screen information.
+ * @param {ReanimatedTopTabNavigation.ContextType["transformationX"]} params.transformationX - The horizontal transformation value used in animations.
+ * @param {ReanimatedTopTabNavigation.ContextType["currentYPosition"]} params.currentYPosition - The current vertical scroll position.
+ *
+ * The hook is responsible for resetting the vertical scroll offset of the "approaching" screen within a tabbed navigation interface,
+ * ensuring a smooth user experience by resetting the scroll position to the top under certain conditions.
+ * When the user swipes across tabs, it checks if the approaching screen has a non-zero scroll offset and resets it
+ * if the current screen is at the top position.
+ */
+const useResetApproachingScreenScrollOffset = ({
+  context,
+  transformationX,
+  currentYPosition,
+}: Pick<
+  ReanimatedTopTabNavigation.ContextType,
+  'context' | 'currentYPosition' | 'transformationX'
+>) => {
+  const screenOffsets = useDerivedValue(() =>
+    Object.values(context.screen.properties).map(({ scrollY }) => scrollY.value)
+  );
+
+  const resetApproachingScreenOffset = (
+    index: number,
+    shouldReset: boolean
+  ) => {
+    if (shouldReset) {
+      const { scrollTo } = context.screen.getRef(
+        context.route.getKeyForIndex(index)
+      ).current ?? { scrollTo: () => {} };
+      //NOTE: use reanimated scrollTo does not work
+      scrollTo({ y: 0, animated: false });
+    }
+  };
+
+  useAnimatedReaction(
+    () => transformationX.value,
+    (current, previous) => {
+      const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
+
+      const approachingScreenOffset =
+        screenOffsets.value[approachingIndex] ?? -1;
+
+      runOnJS(resetApproachingScreenOffset)(
+        approachingIndex,
+        approachingScreenOffset > 0 && currentYPosition.value === 0
+      );
+    }
+  );
+};
+
+/**
+ * Custom hook to prepare a key map for Tab Navigation.
+ *
+ * @param {Object} params - The parameters for the hook.
+ * @param {TabNavigationState<any>} params.state - The navigation state object containing route information.
+ * @returns {ReanimatedTopTabNavigation.TopTabContextProps['context']['route']} An object containing:
+ *    - map: A mapping of tab indices to route keys.
+ *    - getKeyForIndex: A function that takes an index and returns the corresponding route key.
+ * @throws Will throw an error if the key for the provided index does not exist.
+ */
+const usePrepareKeyMap = ({
+  state,
+}: {
+  state: TabNavigationState<any>;
+}): ReanimatedTopTabNavigation.TopTabContextProps['context']['route'] => {
+  const indexToKeyMap = useRef(
+    state.routes.reduce(
+      (previousValue, currentValue, currentIndex) => ({
+        ...previousValue,
+        [currentIndex]: currentValue.key,
+      }),
+      {} as Record<number, string>
+    )
+  );
+
+  const getKeyForIndex = (index: number) => {
+    const key = indexToKeyMap.current[index];
+    if (!key) throw '[getKeyForIndex]: Key does not exist';
+    return key;
+  };
+
+  return { map: indexToKeyMap.current, getKeyForIndex };
+};
+
+/**
+ * Prepares screen properties and manages scroll references for each route in the navigation state.
+ *
+ * @param {Object} params - The parameters for preparing the screen.
+ * @param {TabNavigationState<any>} params.state - The navigation state containing route information.
+ * @returns {Object} An object containing screen properties, and methods to set and get scroll references.
+ * @property {Object} properties - The current screen properties.
+ * @property {Function} setRef - Function to set the scroll reference for a specific route.
+ * @property {Function} getRef - Function to get the scroll reference of a specific route.
+ */
+const usePrepareScreen = ({
+  state,
+}: {
+  state: TabNavigationState<ParamListBase>;
+}) => {
+  const screenProperties = useRef(
+    state.routes.reduce(
+      (prev, route) => ({
+        ...prev,
+        [route.key]: {
+          innerLayout: makeMutable({
+            height: 0,
+            width: 0,
+            x: 0,
+            y: 0,
+          }),
+          nativeGesture: Gesture.Native(),
+          outerLayout: makeMutable({
+            height: 0,
+            width: 0,
+            x: 0,
+            y: 0,
+          }),
+          scrollY: makeMutable(0),
+          scrollRef: { current: null },
+        },
+      }),
+      {} as ReanimatedTopTabNavigation.ContextType['context']['screen']['properties']
+    )
+  );
+
+  const setRef = (key: string, ref: Reanimated.ScrollView) => {
+    const newProperties = assign({}, screenProperties.current[key], {
+      scrollRef: { current: ref },
+    });
+
+    screenProperties.current = assign({}, screenProperties.current, {
+      [key]: newProperties,
+    });
+  };
+
+  const getRef = (key: string) => {
+    const _ref = screenProperties.current[key]?.scrollRef;
+    if (!_ref) throw '[getRef]: Ref does not exist';
+    return _ref;
+  };
+
+  return { properties: screenProperties.current, setRef, getRef };
+};
+
+/**
+ * Prepares the context required for top tab navigation.
+ *
+ * This function takes the current state of the navigation
+ * and prepares the necessary context properties such as `screen`
+ * and `route`, which are then used for navigation purposes.
+ *
+ * @param {Object} params - The parameters for preparing the context.
+ * @param {TabNavigationState<any>} params.state - The current state of the navigation.
+ *
+ * @returns {ReanimatedTopTabNavigation.TopTabContextProps['context']} The prepared context containing screen and route properties.
+ */
+const usePrepareContext = ({
+  state,
+}: {
+  state: TabNavigationState<ParamListBase>;
+}): ReanimatedTopTabNavigation.TopTabContextProps['context'] => {
+  const screen = usePrepareScreen({ state });
+  const route = usePrepareKeyMap({ state });
+
+  return { screen, route };
+};
+
+/**
+ * Custom hook that handles the transformation of a header component based on tab changes, particularly
+ * for animations and configurations involving header behavior. Utilizes shared and derived values to
+ * manage the translation of the header on the Y-axis and maintain its position based on the specified
+ * configurations.
+ *
+ * @param {Object} params - The parameters object.
+ * @param {Array} params.config - An array of configuration settings to determine the header's transformation.
+ * @returns {Object} An object containing shared values for header transformations and positioning:
+ * - transformationY: The derived Y-axis transformation value for the header.
+ * - transformationX: The shared X-axis transformation value to be observed.
+ * - currentYPosition: The shared Y-axis position of the header.
+ * - headerHeight: The shared height value of the header.
+ */
+const useTransformHeaderOnTabChange = ({
+  config,
+}: Pick<ReanimatedTopTabNavigation.ContextType, 'config'>) => {
+  const headerHeight = useSharedValue(0);
+  const transformationY = useSharedValue(0);
+  const transformationX = useSharedValue(0);
+  const currentYPosition = useSharedValue(0);
+
+  //Hide header base on config
+  const inputRange = useDerivedValue(
+    () => config.map((_, idx) => idx),
+    [config]
+  );
+
+  const outputRange = useDerivedValue(
+    () =>
+      config.map((type) => {
+        switch (type) {
+          case 'normal':
+            return 0;
+          case 'minimalized':
+            return -headerHeight.value;
+          default:
+            return 0;
+        }
+      }),
+    [config]
+  );
+
+  useAnimatedReaction(
+    () => transformationX.value,
+    (value) => {
+      if (currentYPosition.value === -headerHeight.value) return;
+      transformationY.value = interpolate(
+        value,
+        inputRange.value,
+        outputRange.value,
+        'clamp'
+      );
+    }
+  );
+
+  return { transformationY, transformationX, currentYPosition, headerHeight };
+};
+
+export const ContextHooks = {
+  useResetApproachingScreenScrollOffset,
+  usePrepareContext,
+  useTransformHeaderOnTabChange,
+};

package/src/context/Context.tsx

@@ -0,0 +1,69 @@
+import { type ReanimatedTopTabNavigation } from '../types';
+import { createContext, memo, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { useSharedValue } from 'react-native-reanimated';
+import { ContextHooks } from './Context.hooks';
+
+export const Context = createContext<ReanimatedTopTabNavigation.ContextType>(
+  {} as ReanimatedTopTabNavigation.ContextType
+);
+
+export const Provider = memo(
+  ({
+    children,
+    config,
+    context,
+  }: ReanimatedTopTabNavigation.TopTabContextProps) => {
+    const gestureEnabled = useSharedValue(true);
+    const currentScreenIndex = useSharedValue(0);
+
+    const navHeight = useSharedValue(0);
+    const closeOffset = useSharedValue(0);
+    const topTabHeight = useSharedValue(0);
+
+    const topTabNativeGesture = useRef(Gesture.Native()).current;
+
+    const { transformationX, transformationY, currentYPosition, headerHeight } =
+      ContextHooks.useTransformHeaderOnTabChange({ config });
+
+    ContextHooks.useResetApproachingScreenScrollOffset({
+      currentYPosition,
+      transformationX,
+      context,
+    });
+
+    return (
+      <Context.Provider
+        value={{
+          closeOffset,
+          config,
+          currentScreenIndex,
+          currentYPosition,
+          gestureEnabled,
+          headerHeight,
+          navHeight,
+          topTabHeight,
+          topTabNativeGesture,
+          transformationX,
+          transformationY,
+          context,
+        }}
+      >
+        {children({
+          closeOffset,
+          config,
+          currentScreenIndex,
+          currentYPosition,
+          gestureEnabled,
+          headerHeight,
+          navHeight,
+          topTabHeight,
+          topTabNativeGesture,
+          transformationX,
+          transformationY,
+          context,
+        })}
+      </Context.Provider>
+    );
+  }
+);

package/src/hooks/useHeader.ts

@@ -0,0 +1,30 @@
+import { useTabContext } from './useTabContext';
+import {
+  interpolate,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+export const useHeader = () => {
+  const { headerHeight, transformationX, transformationY } = useTabContext();
+
+  const hideHeader = () => {
+    transformationX.value = withTiming(-headerHeight.value);
+  };
+
+  const defaultStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateY: interpolate(
+          transformationY.value,
+          [0, -headerHeight.value],
+          [0, -headerHeight.value],
+          'clamp'
+        ),
+      },
+    ],
+    zIndex: -1,
+  }));
+
+  return { hideHeader, defaultStyle };
+};

package/src/hooks/useScreenGesture.ts

@@ -0,0 +1,13 @@
+import { useRoute } from '@react-navigation/native';
+import { useTabContext } from './useTabContext';
+
+export const useScreenGesture = () => {
+  const { key } = useRoute();
+  const { context } = useTabContext();
+
+  const nativeRef = context.screen.properties[key]?.nativeGesture;
+
+  if (!nativeRef) throw 'GestureRef does not exist for this route';
+
+  return nativeRef;
+};

package/src/hooks/useScreenProperties.ts

@@ -0,0 +1,11 @@
+import { useRoute } from '@react-navigation/native';
+import { useTabContext } from './useTabContext';
+
+export const useScreenProperties = () => {
+  const { key } = useRoute();
+  const { context } = useTabContext();
+  const screen = context.screen.properties[key];
+  if (!screen) throw 'No screen properties registered for this route';
+
+  return screen;
+};

package/src/hooks/useScreenScrollable.ts

@@ -0,0 +1,69 @@
+import { useRoute } from '@react-navigation/native';
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTabContext } from './useTabContext';
+import * as React from 'react';
+import { HeaderHeightContext } from '@react-navigation/elements';
+import {
+  useAnimatedProps,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+
+import { useScreenProperties } from './useScreenProperties';
+
+export const useScreenScrollable = () => {
+  const { key } = useRoute();
+  const { height } = useWindowDimensions();
+  const { bottom, top } = useSafeAreaInsets();
+  const {
+    currentYPosition,
+    gestureEnabled,
+    headerHeight,
+    context,
+    topTabHeight,
+    transformationY,
+  } = useTabContext();
+
+  const screen = useScreenProperties();
+
+  const navigationHeader = React.useContext(HeaderHeightContext) ?? top;
+
+  const animatedProps = useAnimatedProps(() => ({
+    scrollEnabled:
+      !gestureEnabled.value || currentYPosition.value === -headerHeight.value,
+  }));
+
+  const onScroll = useAnimatedScrollHandler(({ contentOffset }) => {
+    const scrollPosition = context.screen.properties[key]?.scrollY;
+    if (!scrollPosition)
+      throw 'ScrollPosition property does not exist for this route';
+    scrollPosition.value = contentOffset.y;
+  });
+
+  const oppositeHeaderState = useDerivedValue(() =>
+    transformationY.value >= 0 ? headerHeight.value : 0
+  );
+
+  const difference = useDerivedValue(() =>
+    Math.abs(screen.outerLayout.value.height - screen.innerLayout.value.height)
+  );
+
+  const style = useAnimatedStyle(() => ({
+    minHeight:
+      height -
+      topTabHeight.value -
+      oppositeHeaderState.value -
+      navigationHeader -
+      difference.value,
+  }));
+
+  return {
+    animatedProps,
+    bounces: false,
+    contentContainerStyle: { paddingBottom: bottom },
+    onScroll,
+    style,
+  };
+};

package/src/hooks/useTabContext.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { Context } from '../context/Context';
+
+export const useTabContext = () => useContext(Context);