react-navigation-reanimated-top-tabs 0.2.0

package/src/context/TopTabContext.tsx

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,112 @@
+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 };
+};

package/src/index.tsx

@@ -0,0 +1,15 @@
+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';

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -0,0 +1,192 @@
+import {
+  createNavigatorFactory,
+  type ParamListBase,
+  TabActions,
+  type TabNavigationState,
+  TabRouter,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import type { DefaultRouterOptions } from '@react-navigation/routers';
+import { GestureWrapper } from '../components/wrappers/GestureWrapper';
+import {
+  type RenderTabsParams,
+  TabBarBaseComponent,
+} from '../components/elements/TabBarBaseComponent';
+import { Provider } from '../context/TopTabContext';
+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 type { ReanimatedTabViewTypes } from '../components/ReanimatedTopTab/types';
+import { ReanimatedTabView } from '../components/ReanimatedTopTab/ReanimatedTabView';
+
+const TabViewNavigator = ({
+  HeaderComponent,
+  TabBarComponent = TabBarBaseComponent,
+  children,
+  config,
+  initialRouteName,
+  screenOptions = {},
+}: ReanimatedTopTabNavigation.TabViewNavigatorProps) => {
+  const { NavigationContent, descriptors, navigation, state } =
+    useNavigationBuilder<
+      TabNavigationState<ParamListBase>,
+      DefaultRouterOptions,
+      {},
+      ReanimatedTopTabNavigation.NavigationOptions,
+      {}
+    >(TabRouter, {
+      children,
+      defaultScreenOptions: screenOptions,
+      initialRouteName,
+      screenOptions,
+    });
+
+  let _config: string[] = config!;
+
+  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 onIndexChange =
+    (
+      currentScreenIndex: SharedValue<number>,
+      gestureEnabled: SharedValue<boolean>
+    ) =>
+    (index: number) => {
+      navigation.navigate(state.routes[index]?.name ?? '');
+      currentScreenIndex.value = index;
+      switch (_config[index]) {
+        case 'normal': {
+          gestureEnabled.value = true;
+          break;
+        }
+        case 'minimalized': {
+          gestureEnabled.value = false;
+          break;
+        }
+      }
+    };
+
+  const navigationState = useMemo(
+    () => ({
+      index: state.index,
+      routes: state.routes.map((route, index) => {
+        const restOptions = omit(
+          descriptors[route.key]?.options,
+          'tabBarLabel'
+        );
+        const tabBarLabel = descriptors[route.key]?.options.tabBarLabel
+          ? () =>
+              descriptors[route.key]?.options.tabBarLabel?.({
+                focused: state.index === index,
+                title: descriptors[route.key]?.options.title || route.name,
+                index,
+              })
+          : undefined;
+
+        return {
+          ...route,
+          ...restOptions,
+          tabBarLabel,
+          title: descriptors[route.key]?.options.title || route.name,
+        };
+      }),
+    }),
+    [state]
+  );
+
+  const navigate = (route: any) => {
+    navigation.dispatch({
+      ...TabActions.jumpTo(route.name, route.params),
+      target: state.key,
+    });
+  };
+
+  const renderTabBar = useCallback(
+    (props: RenderTabsParams) => (
+      <TabBarComponent {...props} navigate={navigate} />
+    ),
+    []
+  );
+
+  const renderScene = ({ route }: ReanimatedTabViewTypes.SceneProps) =>
+    descriptors[route.key]?.render();
+
+  return (
+    <Provider config={_config} screenProperties={screenProperties}>
+      {({
+        currentScreenIndex,
+        gestureEnabled,
+        headerHeight,
+        transformationY,
+      }) => (
+        <>
+          <Reanimated.View
+            onLayout={({ nativeEvent }) => {
+              headerHeight.value = nativeEvent.layout.height;
+            }}
+          >
+            {HeaderComponent ? (
+              <HeaderComponent
+                headerHeight={headerHeight}
+                transformationY={transformationY}
+              />
+            ) : null}
+          </Reanimated.View>
+          <NavigationContent>
+            <GestureWrapper>
+              <ReanimatedTabView
+                navigationState={navigationState}
+                onIndexChange={onIndexChange(
+                  currentScreenIndex,
+                  gestureEnabled
+                )}
+                renderScene={renderScene}
+                renderTabBar={renderTabBar}
+              />
+            </GestureWrapper>
+          </NavigationContent>
+        </>
+      )}
+    </Provider>
+  );
+};
+
+export const createReanimatedTopTabNavigator = <
+  Params extends ParamListBase,
+>() =>
+  createNavigatorFactory<
+    TabNavigationState<Params>,
+    ReanimatedTopTabNavigation.NavigationOptions,
+    {},
+    typeof TabViewNavigator
+  >(TabViewNavigator)();

package/src/types.ts

@@ -0,0 +1,63 @@
+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 namespace ReanimatedTopTabNavigation {
+  export 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>;
+  }
+
+  export interface TabViewNavigatorProps {
+    HeaderComponent?: React.ComponentType<
+      Pick<ContextType, 'transformationY' | 'headerHeight'>
+    >;
+    TabBarComponent?: typeof TabBarBaseComponent;
+    children: ReactNode;
+    config?: string[];
+    initialRouteName?: string;
+    screenOptions?: StackNavigationOptions;
+  }
+
+  export type TopTabContextProps = Pick<
+    ContextType,
+    'screenProperties' | 'config'
+  > & {
+    children: (props: ContextType) => React.ReactNode;
+  };
+
+  export interface NavigationOptions {
+    tabBarLabel?: (props: {
+      focused: boolean;
+      index: number;
+      title: string;
+    }) => React.ReactNode;
+    title?: string;
+  }
+}