react-navigation-reanimated-top-tabs 0.7.0 → 0.9.0

package/src/components/wrappers/SectionList.tsx

@@ -0,0 +1,75 @@
+import {
+  type DefaultSectionT,
+  type LayoutChangeEvent,
+  type SectionListProps,
+  SectionList as RNSectionList,
+  StyleSheet,
+} from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Reanimated from 'react-native-reanimated';
+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 const SectionList = <ItemT, SectionT = DefaultSectionT>({
+  children,
+  style,
+  contentContainerStyle,
+  onLayout,
+  ...props
+}: SectionListProps<ItemT, SectionT>) => {
+  const gesture = useScreenGesture();
+  const {
+    style: _style,
+    contentContainerStyle: _contentContainerStyle,
+    onScroll,
+    bounces,
+    animatedProps,
+    overScrollMode,
+  } = useScreenScrollable();
+  const { innerLayout } = useScreenProperties();
+  const { context } = useTabContext();
+
+  const { key } = useRoute();
+  const _ref = useRef<RNSectionList<any>>(null);
+
+  const _onLayout = (event: LayoutChangeEvent) => {
+    onLayout?.(event);
+    innerLayout.value = event.nativeEvent.layout;
+    context.screen.setRef(key, _ref.current);
+  };
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <AnimatedSectionList
+        ref={_ref}
+        contentContainerStyle={[
+          _contentContainerStyle,
+          styleSheet.contentContainerStyle,
+          contentContainerStyle,
+        ]}
+        onLayout={_onLayout}
+        style={[_style, style]}
+        onScroll={onScroll}
+        bounces={bounces}
+        animatedProps={animatedProps}
+        overScrollMode={overScrollMode}
+        {...props}
+      >
+        {children}
+      </AnimatedSectionList>
+    </GestureDetector>
+  );
+};
+
+const styleSheet = StyleSheet.create({
+  contentContainerStyle: {
+    flexGrow: 1,
+  },
+});
+
+const AnimatedSectionList =
+  Reanimated.createAnimatedComponent<SectionListProps<any, any>>(RNSectionList);

package/src/context/Context.hooks.ts

@@ -15,13 +15,14 @@ import type {
 import { Gesture } from 'react-native-gesture-handler';
 import { assign, throttle } from 'lodash';
 import { ContextHelpers } from './Context.helpers';
+import { SectionList } from 'react-native';
 
 /**
  * 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["positionX"]} params.positionX - 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,
@@ -31,11 +32,11 @@ import { ContextHelpers } from './Context.helpers';
  */
 const useResetApproachingScreenScrollOffset = ({
   context,
-  transformationX,
+  positionX,
   currentYPosition,
 }: Pick<
   ReanimatedTopTabNavigation.ContextType,
-  'context' | 'currentYPosition' | 'transformationX'
+  'context' | 'currentYPosition' | 'positionX'
 >) => {
   const screenOffsets = useDerivedValue(() =>
     Object.values(context.screen.properties).map(({ scrollY }) => scrollY.value)
@@ -46,16 +47,23 @@ const useResetApproachingScreenScrollOffset = ({
     shouldReset: boolean
   ) => {
     if (shouldReset) {
-      const { scrollTo } = context.screen.getRef(
+      const ref = context.screen.getRef(
         context.route.getKeyForIndex(index)
-      ).current ?? { scrollTo: () => {} };
-      //NOTE: use reanimated scrollTo does not work
-      scrollTo({ y: 0, animated: false });
+      ).current;
+
+      if (ref instanceof SectionList) {
+        ref.scrollToLocation({
+          animated: false,
+          sectionIndex: 0,
+          itemIndex: 0,
+          viewOffset: 0,
+        });
+      } else ref?.scrollTo({ y: 0, animated: false });
     }
   };
 
   useAnimatedReaction(
-    () => transformationX.value,
+    () => positionX.value,
     (current, previous) => {
       const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
 
@@ -145,7 +153,7 @@ const usePrepareScreen = ({
     )
   );
 
-  const setRef = (key: string, ref: Reanimated.ScrollView) => {
+  const setRef = (key: string, ref: Reanimated.ScrollView | SectionList) => {
     const newProperties = assign({}, screenProperties.current[key], {
       scrollRef: { current: ref },
     });
@@ -197,7 +205,7 @@ const usePrepareContext = ({
  * @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.
+ * - positionX: 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.
  */
@@ -207,7 +215,8 @@ const useTransformHeaderOnTabChange = ({
   const headerHeight = useSharedValue(0);
   const isHeaderHeightSet = useSharedValue(false);
   const transformationY = useSharedValue(0);
-  const transformationX = useSharedValue(0);
+  const scrollY = useSharedValue(0);
+  const positionX = useSharedValue(0);
   const currentYPosition = useSharedValue(0);
 
   //Hide header base on config
@@ -255,7 +264,7 @@ const useTransformHeaderOnTabChange = ({
   );
 
   useAnimatedReaction(
-    () => transformationX.value,
+    () => positionX.value,
     (value) => {
       if (currentYPosition.value === -headerHeight.value) return;
       transformationY.value = interpolate(
@@ -269,21 +278,22 @@ const useTransformHeaderOnTabChange = ({
 
   return {
     transformationY,
-    transformationX,
+    positionX,
     currentYPosition,
     headerHeight,
     isHeaderHeightSet,
+    scrollY,
   };
 };
 
 const useApproachingTabChange = ({
   config,
-  transformationX,
+  positionX,
   gestureEnabled,
   currentScreenIndex,
 }: Pick<
   ReanimatedTopTabNavigation.ContextType,
-  'config' | 'transformationX' | 'currentScreenIndex' | 'gestureEnabled'
+  'config' | 'positionX' | 'currentScreenIndex' | 'gestureEnabled'
 >) => {
   const onIndexApproach = (index: number) => {
     'worklet';
@@ -301,7 +311,7 @@ const useApproachingTabChange = ({
   };
 
   useAnimatedReaction(
-    () => transformationX.value,
+    () => positionX.value,
     (current, previous) => {
       const approachingIndex = ContextHelpers.getTargetIndex(current, previous);
       onIndexApproach(approachingIndex);

package/src/context/Context.tsx

@@ -24,23 +24,24 @@ export const Provider = memo(
     const topTabNativeGesture = useRef(Gesture.Native()).current;
 
     const {
-      transformationX,
+      positionX,
       transformationY,
       currentYPosition,
       headerHeight,
       isHeaderHeightSet,
+      scrollY,
     } = ContextHooks.useTransformHeaderOnTabChange({ config });
 
     ContextHooks.useResetApproachingScreenScrollOffset({
       currentYPosition,
-      transformationX,
+      positionX,
       context,
     });
 
     ContextHooks.useApproachingTabChange({
       config,
       gestureEnabled,
-      transformationX,
+      positionX,
       currentScreenIndex,
     });
 
@@ -56,10 +57,11 @@ export const Provider = memo(
           navHeight,
           topTabHeight,
           topTabNativeGesture,
-          transformationX,
+          positionX,
           transformationY,
           context,
           isHeaderHeightSet,
+          scrollY,
         }}
       >
         {children({
@@ -72,10 +74,11 @@ export const Provider = memo(
           navHeight,
           topTabHeight,
           topTabNativeGesture,
-          transformationX,
+          positionX,
           transformationY,
           context,
           isHeaderHeightSet,
+          scrollY,
         })}
       </Context.Provider>
     );

package/src/hooks/useHeader.ts

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

package/src/hooks/useTabOffset.ts

@@ -3,6 +3,6 @@ import { useTabContext } from './useTabContext';
 import { useDerivedValue } from 'react-native-reanimated';
 
 export const useTabOffset = () => {
-  const { transformationX } = useTabContext();
-  return useDerivedValue(() => transformationX.value);
+  const { positionX } = useTabContext();
+  return useDerivedValue(() => positionX.value);
 };

package/src/index.tsx

@@ -1,4 +1,5 @@
 import { ScrollView } from './components/wrappers/ScrollView';
+import { SectionList } from './components/wrappers/SectionList';
 import { ScreenWrapper } from './components/wrappers/ScreenWrapper';
 import { TabBarBaseComponent } from './components/elements/TabBarBaseComponent';
 import { TabBarLabelBaseComponent } from './components/elements/TabBarLabelBaseComponent';
@@ -33,6 +34,7 @@ export const TabHooks = {
 
 export const Tab = {
   ScrollView,
+  SectionList,
   ScreenWrapper,
   TabBarBaseComponent,
   TabBarLabelBaseComponent,

package/src/navigator/createReanimatedTopTabNavigator.tsx

@@ -20,11 +20,13 @@ import { ContextHooks } from '../context/Context.hooks';
 
 const TabViewNavigator = ({
   HeaderComponent,
+  TopComponent,
   TabBarComponent = TabBarBaseComponent,
   children,
   config,
   initialRouteName,
   screenOptions = {},
+  bounces,
 }: ReanimatedTopTabNavigation.TabViewNavigatorProps) => {
   const { NavigationContent, descriptors, navigation, state } =
     useNavigationBuilder<
@@ -62,10 +64,11 @@ const TabViewNavigator = ({
           descriptors[route.key]?.options,
           'tabBarLabel'
         );
+
         const tabBarLabel = descriptors[route.key]?.options.tabBarLabel
-          ? () =>
+          ? (focused: boolean) =>
               descriptors[route.key]?.options.tabBarLabel?.({
-                focused: state.index === index,
+                focused,
                 title: descriptors[route.key]?.options.title || route.name,
                 index,
               })
@@ -88,30 +91,32 @@ const TabViewNavigator = ({
   return (
     <Provider config={_config} context={context}>
       {({ 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}
-                navigate={navigate}
-                renderScene={renderScene}
-                renderTabBar={TabBarComponent}
-              />
-            </GestureWrapper>
-          </NavigationContent>
-        </>
+        <NavigationContent>
+          {TopComponent ? (
+            <TopComponent transformationY={transformationY} />
+          ) : null}
+          <GestureWrapper bounces={bounces}>
+            <Reanimated.View
+              onLayout={({ nativeEvent }) => {
+                headerHeight.value = nativeEvent.layout.height;
+              }}
+            >
+              {HeaderComponent ? (
+                <HeaderComponent
+                  headerHeight={headerHeight}
+                  transformationY={transformationY}
+                />
+              ) : null}
+            </Reanimated.View>
+            <ReanimatedTabView
+              navigationState={navigationState}
+              navigate={navigate}
+              renderScene={renderScene}
+              renderTabBar={TabBarComponent}
+              screenOptions={screenOptions}
+            />
+          </GestureWrapper>
+        </NavigationContent>
       )}
     </Provider>
   );

package/src/types.ts

@@ -1,7 +1,12 @@
 import { TabBarBaseComponent } from './components/elements/TabBarBaseComponent';
 import * as React from 'react';
 import { type ReactNode } from 'react';
-import { type LayoutRectangle } from 'react-native';
+import {
+  SectionList,
+  type LayoutRectangle,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import { type NativeGesture } from 'react-native-gesture-handler';
 import Reanimated, { type SharedValue } from 'react-native-reanimated';
 import { type StackNavigationOptions } from '@react-navigation/stack';
@@ -18,8 +23,9 @@ export namespace ReanimatedTopTabNavigation {
     navHeight: SharedValue<number>;
     topTabHeight: SharedValue<number>;
     topTabNativeGesture: NativeGesture;
-    transformationX: SharedValue<number>;
+    positionX: SharedValue<number>;
     transformationY: SharedValue<number>;
+    scrollY: SharedValue<number>;
     context: {
       screen: {
         properties: Record<
@@ -29,11 +35,16 @@ export namespace ReanimatedTopTabNavigation {
             nativeGesture: NativeGesture;
             outerLayout: SharedValue<LayoutRectangle>;
             scrollY: SharedValue<number>;
-            scrollRef: { current: Reanimated.ScrollView | null };
+            scrollRef: { current: Reanimated.ScrollView | SectionList | null };
           }
         >;
-        setRef(key: string, ref: Reanimated.ScrollView | null): void;
-        getRef(key: string): { current: Reanimated.ScrollView | null };
+        setRef(
+          key: string,
+          ref: Reanimated.ScrollView | SectionList | null
+        ): void;
+        getRef(key: string): {
+          current: Reanimated.ScrollView | SectionList | null;
+        };
       };
       route: {
         map: Record<number, string>;
@@ -46,11 +57,13 @@ export namespace ReanimatedTopTabNavigation {
     HeaderComponent?: React.ComponentType<
       Pick<ContextType, 'transformationY' | 'headerHeight'>
     >;
+    TopComponent?: React.ComponentType<Pick<ContextType, 'transformationY'>>;
     TabBarComponent?: typeof TabBarBaseComponent;
     children: ReactNode;
     config?: string[];
     initialRouteName?: string;
     screenOptions?: StackNavigationOptions;
+    bounces?: boolean;
   }
 
   export type TopTabContextProps = Pick<ContextType, 'config' | 'context'> & {
@@ -64,5 +77,8 @@ export namespace ReanimatedTopTabNavigation {
       title: string;
     }) => React.ReactNode;
     title?: string;
+    tabBarIndicatorStyle?: StyleProp<ViewStyle>;
+    tabBarItemStyle?: StyleProp<ViewStyle>;
+    tabBarStyle?: StyleProp<ViewStyle>;
   }
 }