react-navigation-reanimated-top-tabs 0.2.0

package/src/components/ReanimatedTopTab/ReanimatedTabView.tsx

@@ -0,0 +1,200 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  LinearTransition,
+  runOnJS,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { AnimationHelper } from './AnimationHelper';
+import type { ReanimatedTabViewTypes } from './types';
+
+export interface ReanimatedTabViewProps {
+  LazyPlaceholder?: () => React.ReactNode;
+  lazy?: boolean;
+  navigationState: ReanimatedTabViewTypes.NavigationState;
+  onIndexChange: (index: number) => void;
+  percentageTrigger?: number;
+  positionInterpolation?: ReanimatedTabViewTypes.PositionInterpolation;
+  renderScene: (params: ReanimatedTabViewTypes.SceneProps) => React.ReactNode;
+  renderTabBar?: (
+    params: ReanimatedTabViewTypes.RenderTabsParams
+  ) => React.ReactNode;
+}
+
+export const ReanimatedTabView = React.memo<ReanimatedTabViewProps>(
+  ({
+    LazyPlaceholder = () => null,
+    lazy = false,
+    navigationState,
+    onIndexChange,
+    percentageTrigger = 0.4,
+    positionInterpolation,
+    renderScene,
+    renderTabBar,
+  }) => {
+    const { width } = useWindowDimensions();
+    const loadedScreens = useRef([
+      navigationState.routes[navigationState.index],
+    ]);
+    // const width = 160;
+    const scrollPosition = useSharedValue(navigationState.index);
+
+    const position = useDerivedValue(() => {
+      if (!positionInterpolation) {
+        return -scrollPosition.value;
+      }
+      return interpolate(
+        -scrollPosition.value,
+        positionInterpolation.input,
+        positionInterpolation.output,
+        Extrapolation.CLAMP
+      );
+    }, [positionInterpolation]);
+
+    useEffect(() => {
+      scrollPosition.value = AnimationHelper.animation(
+        -navigationState.index * width
+      );
+    }, [navigationState.index, scrollPosition, width]);
+
+    const minimumValueToChangeView = useMemo(
+      () => width * percentageTrigger,
+      [percentageTrigger, width]
+    );
+
+    const panGesture = React.useMemo(
+      () =>
+        Gesture.Pan()
+          .failOffsetY(-10)
+          .failOffsetY(10)
+          .activeOffsetX([-20, 20])
+          .onChange((event) => {
+            scrollPosition.value = AnimationHelper.onChange(
+              event,
+              scrollPosition.value,
+              width,
+              navigationState
+            );
+          })
+          .onEnd((event) => {
+            const state = AnimationHelper.onEnd(
+              event,
+              minimumValueToChangeView,
+              width,
+              navigationState
+            );
+            scrollPosition.value = AnimationHelper.animation(state.value);
+            runOnJS(onIndexChange)(state.index);
+          }),
+      [
+        minimumValueToChangeView,
+        navigationState,
+        onIndexChange,
+        scrollPosition,
+        width,
+      ]
+    );
+
+    const scrollPositionStyle = useAnimatedStyle(() => ({
+      transform: [
+        {
+          translateX: interpolate(
+            scrollPosition.value,
+            [-width * (navigationState.routes.length - 1), 0],
+            [-width * (navigationState.routes.length - 1), 0],
+            Extrapolation.CLAMP
+          ),
+        },
+      ],
+    }));
+
+    const jumpTo = React.useCallback(
+      (key: string) => {
+        const newIndex = navigationState.routes.findIndex((r) => r.key === key);
+        if (newIndex === -1) {
+          // throw
+          return;
+        }
+        scrollPosition.value = AnimationHelper.animation(-newIndex * width);
+        onIndexChange(newIndex);
+      },
+      [navigationState.routes, onIndexChange, scrollPosition, width]
+    );
+
+    const chooseRender = useCallback(
+      (params: ReanimatedTabViewTypes.SceneProps, useRenderScene = true) => (
+        <View key={`RNNTabView_${params.route.key}`} style={{ width }}>
+          {useRenderScene ? renderScene(params) : LazyPlaceholder()}
+        </View>
+      ),
+      [LazyPlaceholder, renderScene, width]
+    );
+
+    const Routes = useMemo(
+      () =>
+        navigationState.routes.map((route, index) => {
+          if (!lazy) {
+            return chooseRender({ jumpTo, route });
+          }
+          const screen = loadedScreens.current.find(
+            (loadedScreen) => loadedScreen?.key === route.key
+          );
+          if (screen !== undefined) {
+            return chooseRender({ jumpTo, route });
+          }
+          if (navigationState.index === index) {
+            loadedScreens.current.push(route);
+            return chooseRender({ jumpTo, route });
+          }
+          return chooseRender({ jumpTo, route }, false);
+        }),
+      [
+        navigationState.routes,
+        navigationState.index,
+        lazy,
+        chooseRender,
+        jumpTo,
+      ]
+    );
+
+    return (
+      <GestureHandlerRootView style={defaultStyles.flex}>
+        <Animated.View layout={LinearTransition} style={defaultStyles.flex}>
+          {renderTabBar ? renderTabBar({ navigationState, position }) : null}
+          <GestureDetector gesture={panGesture}>
+            <Animated.View
+              layout={LinearTransition}
+              style={[
+                scrollPositionStyle,
+                defaultStyles.flex,
+                { width: width * navigationState.routes.length - 1 },
+                defaultStyles.viewsContainer,
+              ]}
+            >
+              {Routes}
+            </Animated.View>
+          </GestureDetector>
+        </Animated.View>
+      </GestureHandlerRootView>
+    );
+  }
+);
+
+//NOTE: purposely use of StyleSheet - simplify migration to library
+const defaultStyles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  viewsContainer: {
+    flexDirection: 'row',
+  },
+});

package/src/components/ReanimatedTopTab/types.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+export namespace ReanimatedTabViewTypes {
+  export interface Route {
+    key: string;
+    name: string;
+    tabBarLabel?: () => React.ReactNode;
+    title?: string;
+  }
+
+  export type NavigationState = { index: number; routes: Route[] };
+
+  export interface RenderTabsParams {
+    navigationState: NavigationState;
+    position: SharedValue<number>;
+  }
+
+  export interface SceneProps {
+    jumpTo?: (key: string) => void;
+    route: Route;
+  }
+
+  export interface SceneMapRoutes {
+    [key: string]: React.ReactNode;
+  }
+
+  export type PositionInterpolation = { input: number[]; output: number[] };
+}

package/src/components/elements/TabBarBaseComponent.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, useWindowDimensions } from 'react-native';
+import Reanimated, {
+  type AnimatedStyle,
+  interpolate,
+  type SharedValue,
+  useAnimatedReaction,
+} from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/TopTab.hooks';
+
+export interface Route {
+  key: string;
+  name?: string;
+  tabBarLabel?: () => React.ReactNode;
+  title?: string;
+}
+
+export type NavigationState = { index: number; routes: Route[] };
+
+export interface RenderTabsParams {
+  navigationState: NavigationState;
+  position: SharedValue<number>;
+}
+
+interface TabBarProps extends RenderTabsParams {
+  children?: React.ReactNode;
+  navigate: (route: Route) => void;
+  style?: AnimatedStyle;
+}
+
+export const TabBarBaseComponent = ({
+  children,
+  navigate,
+  navigationState,
+  position,
+  style,
+}: TabBarProps) => {
+  const layout = useWindowDimensions();
+
+  const { topTabHeight, transformationX } = useTabContext();
+
+  //Assign interpolated offsetX to transformationX
+  useAnimatedReaction(
+    () =>
+      interpolate(
+        position.value,
+        navigationState.routes.map((_, i) => i * layout.width),
+        navigationState.routes.map((_, i) => i),
+        'clamp'
+      ),
+    (value) => {
+      transformationX.value = value;
+    },
+    [navigationState.routes]
+  );
+
+  return (
+    <Reanimated.View
+      onLayout={({ nativeEvent }) => {
+        topTabHeight.value = nativeEvent.layout.height;
+      }}
+    >
+      <Reanimated.View style={[styles.wrapper, style]}>
+        {navigationState.routes.map((route) => (
+          <Pressable
+            style={styles.labelWrapper}
+            key={route.key}
+            onPress={() => {
+              navigate(route);
+            }}
+          >
+            {route.tabBarLabel ? (
+              route.tabBarLabel()
+            ) : (
+              <Text style={{ color: 'red' }}>{route.title}</Text>
+            )}
+          </Pressable>
+        ))}
+      </Reanimated.View>
+      {children}
+    </Reanimated.View>
+  );
+};
+
+// Static styles
+const styles = StyleSheet.create({
+  labelWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wrapper: {
+    width: '100%',
+    flexDirection: 'row',
+    backgroundColor: 'white',
+    paddingVertical: 8,
+    height: 50,
+  },
+});

package/src/components/elements/TabBarLabelBaseComponent.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+import Reanimated, {
+  interpolateColor,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/TopTab.hooks';
+
+interface TabBarLabelTypes {
+  focused: boolean;
+  index: number;
+  title: string;
+}
+
+export const TabBarLabelBaseComponent = ({
+  index,
+  ...props
+}: TabBarLabelTypes) => {
+  const { transformationX } = useTabContext();
+
+  const style = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        transformationX.value,
+        [index - 1, index, index + 1],
+        ['transparent', 'blue', 'transparent']
+      ),
+    }),
+    []
+  );
+
+  const textStyle = useAnimatedStyle(
+    () => ({
+      color: interpolateColor(
+        transformationX.value,
+        [index - 1, index, index + 1],
+        ['black', 'white', 'black']
+      ),
+    }),
+    []
+  );
+
+  return (
+    <Reanimated.View style={[style, styles.wrapper]}>
+      <Reanimated.Text style={[textStyle, styles.text]}>
+        {props.title}
+      </Reanimated.Text>
+    </Reanimated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+  wrapper: {
+    borderRadius: 10,
+    height: 35,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+});

package/src/components/wrappers/GestureWrapper.tsx

@@ -0,0 +1,135 @@
+import { useMemo, useRef, useState } from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Reanimated, {
+  Easing,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useTabContext } from '../../hooks/TopTab.hooks';
+
+//TODO: types
+export const GestureWrapper = ({ children }: any) => {
+  const {
+    currentScreenIndex,
+    currentYPosition,
+    gestureEnabled,
+    headerHeight,
+    screenProperties,
+    transformationY,
+    screenRefs,
+  } = useTabContext();
+
+  const movedY = useSharedValue(0);
+
+  const gestureRef = useRef(Gesture.Pan());
+
+  const withTimingConfig = {
+    duration: 300,
+    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+  } as const;
+
+  const [_gestureEnabled, setGestureEnabled] = useState(gestureEnabled.value);
+
+  useAnimatedReaction(
+    () => gestureEnabled.value,
+    (nextValue) => {
+      runOnJS(setGestureEnabled)(nextValue);
+    },
+    []
+  );
+
+  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) {
+            stateManager.fail();
+          }
+        })
+        .onUpdate(({ translationY }) => {
+          if (translationY <= -headerHeight.value) {
+            runOnJS(_scrollTo)(
+              currentScreenIndex.value,
+              Math.abs(translationY + headerHeight.value)
+            );
+          }
+
+          transformationY.value =
+            currentYPosition.value + translationY - movedY.value;
+        })
+        .onEnd(({ translationY, velocityY }) => {
+          const gestureValue = translationY + velocityY * 0.2;
+          const changeOffset = 0.2 * headerHeight.value;
+
+          if (gestureValue < -changeOffset && transformationY.value < 0) {
+            transformationY.value = withTiming(
+              -headerHeight.value,
+              withTimingConfig
+            );
+            currentYPosition.value = -headerHeight.value;
+          } else if (gestureValue > changeOffset) {
+            const destination = 0;
+            transformationY.value = withTiming(destination, withTimingConfig);
+            currentYPosition.value = destination;
+          } else {
+            transformationY.value = withTiming(
+              currentYPosition.value,
+              withTimingConfig
+            );
+          }
+        })
+        .onFinalize(() => {
+          movedY.value = 0;
+        })
+        .simultaneousWithExternalGesture(
+          ...Object.values(screenProperties).map(
+            ({ nativeGesture }) => nativeGesture
+          )
+        )
+        .withRef(gestureRef)
+        .enabled(_gestureEnabled),
+    [_gestureEnabled]
+  );
+
+  const style = useAnimatedStyle(
+    () => ({
+      flex: 1,
+      transform: [
+        {
+          translateY: interpolate(
+            transformationY.value,
+            [0, -headerHeight.value],
+            [0, -headerHeight.value],
+            'clamp'
+          ),
+        },
+      ],
+    }),
+    []
+  );
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Reanimated.View style={style}>{children}</Reanimated.View>
+    </GestureDetector>
+  );
+};

package/src/components/wrappers/ScreenWrapper.tsx

@@ -0,0 +1,27 @@
+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';
+
+export interface ScreenWrapperProps
+  extends AnimatedProps<Omit<ViewProps, 'onLayout'>> {}
+
+export const ScreenWrapper = ({
+  children,
+  ...viewProps
+}: ScreenWrapperProps) => {
+  const { key } = useRoute();
+  const { screenProperties } = useTabContext();
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const screen = screenProperties[key];
+    if (!screen) throw 'No screen property registered for this route';
+    screen.outerLayout.value = event.nativeEvent.layout;
+  };
+
+  return (
+    <Reanimated.View {...viewProps} onLayout={onLayout}>
+      {children}
+    </Reanimated.View>
+  );
+};

package/src/components/wrappers/ScrollView.tsx

@@ -0,0 +1,59 @@
+import {
+  type LayoutChangeEvent,
+  type ScrollViewProps,
+  StyleSheet,
+} 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';
+
+export interface ScreenWrapperProps
+  extends AnimatedProps<Omit<ScrollViewProps, 'onScroll'>> {}
+
+export const ScrollView = ({
+  children,
+  style,
+  ...props
+}: ScreenWrapperProps) => {
+  const gesture = useScreenGesture();
+  const { style: animatedStyle, ...scrollProps } = useScreenScrollable();
+  const { innerLayout } = useScreenProperties();
+  const { screenRefs } = useTabContext();
+
+  const { key } = useRoute();
+
+  const _ref = useRef<Reanimated.ScrollView>(null);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    innerLayout.value = event.nativeEvent.layout;
+    screenRefs.setRef(key, _ref);
+  };
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Reanimated.ScrollView
+        {...scrollProps}
+        {...props}
+        ref={_ref}
+        contentContainerStyle={_style.contentContainerStyle}
+        onLayout={onLayout}
+        style={[style, animatedStyle]}
+      >
+        {children}
+      </Reanimated.ScrollView>
+    </GestureDetector>
+  );
+};
+
+const _style = StyleSheet.create({
+  contentContainerStyle: {
+    flexGrow: 1,
+  },
+});

package/src/context/TopTabContext.hooks.ts

@@ -0,0 +1,55 @@
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import type { ReanimatedTopTabNavigation } from 'react-navigation-reanimated-top-tabs';
+
+const useResetApproachingScreenScrollOffset = ({
+  screenRefs,
+  transformationX,
+  screenProperties,
+  currentYPosition,
+}: Pick<
+  ReanimatedTopTabNavigation.ContextType,
+  'screenRefs' | 'screenProperties' | 'currentYPosition' | 'transformationX'
+>) => {
+  const resetApproachingScreenOffset = (
+    index: number,
+    shouldReset: boolean
+  ) => {
+    if (shouldReset) {
+      //NOTE: use reanimated scrollTo does not work
+      const { scrollTo } = Object.values(screenRefs.refs.current)[index]
+        ?.current ?? { scrollTo: () => null };
+
+      scrollTo({ y: 0, animated: false });
+    }
+  };
+
+  useAnimatedReaction(
+    () => transformationX.value,
+    (current, previous) => {
+      const approachingIndex = getTargetIndex(current, previous);
+
+      const approachingScreenOffset =
+        Object.values(screenProperties).map(({ scrollY }) => scrollY.value)[
+          approachingIndex
+        ] ?? -1;
+
+      runOnJS(resetApproachingScreenOffset)(
+        approachingIndex,
+        approachingScreenOffset > 0 && currentYPosition.value === 0
+      );
+    }
+  );
+};
+
+function getTargetIndex(currentValue: number, previousValue: number | null) {
+  'worklet';
+  if (currentValue > (previousValue ?? 0)) {
+    return Math.ceil(currentValue);
+  } else {
+    return Math.floor(currentValue);
+  }
+}
+
+export const TopTabContextHooks = {
+  useResetApproachingScreenScrollOffset,
+};