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

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/Tab.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);

package/src/hooks/useTabOffset.ts

@@ -0,0 +1,8 @@
+// returns read-only property
+import { useTabContext } from './useTabContext';
+import { useDerivedValue } from 'react-native-reanimated';
+
+export const useTabOffset = () => {
+  const { transformationX } = useTabContext();
+  return useDerivedValue(() => transformationX.value);
+};

package/src/index.tsx

@@ -2,23 +2,33 @@ import { ScrollView } from './components/wrappers/ScrollView';
 import { ScreenWrapper } from './components/wrappers/ScreenWrapper';
 import { TabBarBaseComponent } from './components/elements/TabBarBaseComponent';
 import { TabBarLabelBaseComponent } from './components/elements/TabBarLabelBaseComponent';
-import {
-  useHeader,
-  useScreenGesture,
-  useScreenProperties,
-  useScreenScrollable,
-  useTabContext,
-} from './hooks/Tab.hooks';
+import { useEffect } from 'react';
+import { WarningService } from './services/Warning.service';
+import { useTabContext } from './hooks/useTabContext';
+import { useTabOffset } from './hooks/useTabOffset';
+import { useScreenGesture } from './hooks/useScreenGesture';
+import { useScreenScrollable } from './hooks/useScreenScrollable';
+import { useScreenProperties } from './hooks/useScreenProperties';
+import { useHeader } from './hooks/useHeader';
 
 export { type ReanimatedTopTabNavigation } from './types';
 export { createReanimatedTopTabNavigator } from './navigator/createReanimatedTopTabNavigator';
 
+const _useTabContext = () => {
+  useEffect(() => {
+    WarningService.warn();
+  }, []);
+
+  return useTabContext();
+};
+
 export const TabHooks = {
   useHeader,
   useScreenProperties,
   useScreenScrollable,
   useScreenGesture,
-  useTabContext,
+  useTabContext: _useTabContext,
+  useTabOffset,
 };
 
 export const Tab = {

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -12,17 +12,14 @@ import {
   type RenderTabsParams,
   TabBarBaseComponent,
 } from '../components/elements/TabBarBaseComponent';
-import { Provider } from '../context/TabContext';
+import { Provider } from '../context/Context';
 import { type ReanimatedTopTabNavigation } from '../types';
 import { omit } from 'lodash';
-import { useCallback, useMemo, useRef } from 'react';
-import { Gesture } from 'react-native-gesture-handler';
-import Reanimated, {
-  makeMutable,
-  type SharedValue,
-} from 'react-native-reanimated';
+import { useCallback, useMemo } from 'react';
+import Reanimated, { type SharedValue } from 'react-native-reanimated';
 import type { ReanimatedTabViewTypes } from '../components/ReanimatedTopTab/types';
 import { ReanimatedTabView } from '../components/ReanimatedTopTab/ReanimatedTabView';
+import { ContextHooks } from '../context/Context.hooks';
 
 const TabViewNavigator = ({
   HeaderComponent,
@@ -51,31 +48,10 @@ const TabViewNavigator = ({
   if (!config) {
     _config = state.routes.map(() => 'normal');
   }
-  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),
-        },
-      }),
-      {} as ReanimatedTopTabNavigation.ContextType['screenProperties']
-    )
-  ).current;
 
+  const context = ContextHooks.usePrepareContext({ state });
+
+  //NOTE: all belows reefers to Tabs component directly. Consider to move it somewhere
   const onIndexChange =
     (
       currentScreenIndex: SharedValue<number>,
@@ -142,7 +118,7 @@ const TabViewNavigator = ({
     descriptors[route.key]?.render();
 
   return (
-    <Provider config={_config} screenProperties={screenProperties}>
+    <Provider config={_config} context={context}>
       {({
         currentScreenIndex,
         gestureEnabled,

package/src/services/Warning.service.ts

@@ -0,0 +1,11 @@
+export const WarningService = {
+  hasWarned: false,
+  warn() {
+    if (__DEV__ && !this.hasWarned) {
+      console.warn(
+        '[react-navigation-reanimated-top-tabs]: You are directly using the tab context, which may lead to unexpected behavior. Please use the provided hooks or API for better stability.'
+      );
+      this.hasWarned = true;
+    }
+  },
+};