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

package/src/context/TopTabContext.tsx

@@ -1,115 +0,0 @@
-import { type ReanimatedTopTabNavigation } from '../types';
-import { createContext, memo, useRef } from 'react';
-import { Gesture } from 'react-native-gesture-handler';
-import {
-  interpolate,
-  useAnimatedReaction,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-import { useScreenRefs } from '../hooks/TopTab.hooks';
-import { TopTabContextHooks } from './TopTabContext.hooks';
-
-export const Context = createContext<ReanimatedTopTabNavigation.ContextType>(
-  {} as ReanimatedTopTabNavigation.ContextType
-);
-
-export const Provider = memo(
-  ({
-    children,
-    config,
-    screenProperties,
-  }: ReanimatedTopTabNavigation.TopTabContextProps) => {
-    const transformationY = useSharedValue(0);
-    const transformationX = useSharedValue(0);
-    const currentYPosition = useSharedValue(0);
-
-    const gestureEnabled = useSharedValue(true);
-    const currentScreenIndex = useSharedValue(0);
-
-    const navHeight = useSharedValue(0);
-    const headerHeight = useSharedValue(0);
-    const closeOffset = useSharedValue(0);
-    const topTabHeight = useSharedValue(0);
-
-    const topTapNativeRef = useRef(Gesture.Native()).current;
-    const screenRefs = useScreenRefs(Object.keys(screenProperties));
-
-    //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'
-        );
-      }
-    );
-
-    TopTabContextHooks.useResetApproachingScreenScrollOffset({
-      screenRefs,
-      currentYPosition,
-      screenProperties,
-      transformationX,
-    });
-
-    return (
-      <Context.Provider
-        value={{
-          closeOffset,
-          config,
-          currentScreenIndex,
-          currentYPosition,
-          gestureEnabled,
-          headerHeight,
-          navHeight,
-          screenProperties,
-          topTabHeight,
-          topTapNativeRef,
-          transformationX,
-          transformationY,
-          screenRefs,
-        }}
-      >
-        {children({
-          screenRefs,
-          closeOffset,
-          config,
-          currentScreenIndex,
-          currentYPosition,
-          gestureEnabled,
-          headerHeight,
-          navHeight,
-          screenProperties,
-          topTabHeight,
-          topTapNativeRef,
-          transformationX,
-          transformationY,
-        })}
-      </Context.Provider>
-    );
-  }
-);

package/src/hooks/TopTab.hooks.ts

@@ -1,112 +0,0 @@
-import { useRoute } from '@react-navigation/native';
-import { Context } from '../context/TopTabContext';
-import { useContext } from 'react';
-import {
-  useAnimatedProps,
-  useAnimatedScrollHandler,
-  useAnimatedStyle,
-  useDerivedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useWindowDimensions } from 'react-native';
-
-export const useTabContext = () => useContext(Context);
-
-export const useScreenGesture = () => {
-  const { key } = useRoute();
-  const { screenProperties } = useTabContext();
-
-  const nativeRef = screenProperties[key]?.nativeGesture;
-
-  if (!nativeRef) throw 'GestureRef does not exist for this route';
-
-  return nativeRef;
-};
-
-export const useScreenScrollable = () => {
-  const { key } = useRoute();
-  const { height } = useWindowDimensions();
-  const { bottom } = useSafeAreaInsets();
-  const {
-    currentYPosition,
-    gestureEnabled,
-    headerHeight,
-    screenProperties,
-    topTabHeight,
-    transformationY,
-  } = useTabContext();
-
-  //TODO: Navigation header hook is available if Tabs are rendered inside the Stack (createNavigationStack())
-  //useHeaderHeight();
-  const navigationHeader = 50;
-
-  const animatedProps = useAnimatedProps(() => ({
-    scrollEnabled:
-      !gestureEnabled.value || currentYPosition.value === -headerHeight.value,
-  }));
-
-  const onScroll = useAnimatedScrollHandler(({ contentOffset }) => {
-    const scrollPosition = screenProperties[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 style = useAnimatedStyle(() => ({
-    minHeight:
-      height -
-      topTabHeight.value -
-      oppositeHeaderState.value -
-      navigationHeader,
-  }));
-
-  return {
-    animatedProps,
-    bounces: false,
-    contentContainerStyle: { paddingBottom: bottom },
-    onScroll,
-    style,
-  };
-};
-
-export const useScreenProperties = () => {
-  const { key } = useRoute();
-  const { screenProperties } = useTabContext();
-  const screen = screenProperties[key];
-  if (!screen) throw 'No screen properties registered for this route';
-
-  return screen;
-};
-
-export const useHeader = () => {
-  const { headerHeight, transformationX } = useTabContext();
-
-  const hideHeader = () => {
-    transformationX.value = withTiming(-headerHeight.value);
-  };
-
-  return { hideHeader };
-};
-
-export const useScreenRefs = (keys: string[]) => {
-  const refs = {
-    current: keys.reduce(
-      (prev, key) => ({
-        ...prev,
-        [key]: { current: null },
-      }),
-      {} as Record<string, { current: any }>
-    ),
-  };
-
-  const setRef = (key: string, ref: any) => {
-    refs.current = { ...refs.current, [key]: ref };
-  };
-
-  return { setRef, refs };
-};