react-navigation-reanimated-top-tabs 0.6.2 → 0.8.0

package/src/components/ReanimatedTopTab/types.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { SharedValue } from 'react-native-reanimated';
+import type { ReanimatedTopTabNavigation } from 'react-navigation-reanimated-top-tabs';
 
 export namespace ReanimatedTabViewTypes {
   export interface Route {
     key: string;
     name: string;
-    tabBarLabel?: () => React.ReactNode;
+    tabBarLabel?: (focused: boolean) => React.ReactNode;
     title?: string;
   }
 
@@ -15,6 +16,7 @@ export namespace ReanimatedTabViewTypes {
     navigationState: NavigationState;
     position: SharedValue<number>;
     navigate(index: number): void;
+    screenOptions?: ReanimatedTopTabNavigation.NavigationOptions;
   }
 
   export interface SceneProps {

package/src/components/elements/TabBarBaseComponent.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import { Pressable, StyleSheet, Text, useWindowDimensions } from 'react-native';
+import { StyleSheet, useWindowDimensions } from 'react-native';
 import Reanimated, {
-  type AnimatedStyle,
   interpolate,
   useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  type AnimatedStyle,
 } from 'react-native-reanimated';
 
 import { useTabContext } from '../../hooks/useTabContext';
 import { type ReanimatedTabViewTypes } from '../ReanimatedTopTab/types';
+import { TabBarBaseItem } from './TabBarBaseItem';
 
 export interface TabBarProps extends ReanimatedTabViewTypes.RenderTabsParams {
   children?: React.ReactNode;
@@ -20,10 +23,35 @@ export const TabBarBaseComponent = ({
   position,
   style,
   navigate,
+  screenOptions,
 }: TabBarProps) => {
   const layout = useWindowDimensions();
-
   const { topTabHeight, transformationX } = useTabContext();
+  const width = useSharedValue(0);
+
+  const { tabBarIndicatorStyle, tabBarItemStyle, tabBarStyle } =
+    screenOptions ?? {};
+
+  const inputRange = navigationState.routes.map((_, index) => index);
+
+  const indicatorStyle = useAnimatedStyle(() => {
+    const outputRange = navigationState.routes.map(
+      (_, index) => index * (width.value / navigationState.routes.length)
+    );
+
+    return {
+      transform: [
+        {
+          translateX: interpolate(
+            transformationX.value,
+            inputRange,
+            outputRange
+          ),
+        },
+      ],
+      width: width.value / navigationState.routes.length,
+    };
+  });
 
   //Assign interpolated offsetX to transformationX
   useAnimatedReaction(
@@ -46,21 +74,27 @@ export const TabBarBaseComponent = ({
         topTabHeight.value = nativeEvent.layout.height;
       }}
     >
-      <Reanimated.View style={[styles.wrapper, style]}>
+      <Reanimated.View
+        onLayout={({ nativeEvent }) => {
+          width.value = nativeEvent.layout.width;
+        }}
+        style={[styles.wrapper, tabBarStyle, style]}
+      >
+        <Reanimated.View
+          style={[styles.indicator, indicatorStyle, tabBarIndicatorStyle]}
+        />
         {navigationState.routes.map((route, index) => (
-          <Pressable
-            style={styles.labelWrapper}
+          <TabBarBaseItem
+            index={index}
+            inputRange={inputRange}
+            position={transformationX}
             key={route.key}
             onPress={() => {
               navigate(index);
             }}
-          >
-            {route.tabBarLabel ? (
-              route.tabBarLabel()
-            ) : (
-              <Text style={styles.label}>{route.title}</Text>
-            )}
-          </Pressable>
+            route={route}
+            style={tabBarItemStyle}
+          />
         ))}
       </Reanimated.View>
       {children}
@@ -75,14 +109,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  label: {
-    color: 'red',
-  },
   wrapper: {
-    width: '100%',
     flexDirection: 'row',
     backgroundColor: 'white',
-    paddingVertical: 8,
-    height: 50,
+  },
+  indicator: {
+    backgroundColor: 'black',
+    bottom: 0,
+    height: 2,
+    position: 'absolute',
   },
 });

package/src/components/elements/TabBarBaseItem.tsx

@@ -0,0 +1,76 @@
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  type SharedValue,
+  useAnimatedStyle,
+  interpolate,
+} from 'react-native-reanimated';
+import { type ReanimatedTabViewTypes } from '../ReanimatedTopTab/types';
+
+interface TabBarBaseItemProps {
+  position: SharedValue<number>;
+  index: number;
+  inputRange: Array<number>;
+  onPress: (index: number) => void;
+  route: ReanimatedTabViewTypes.Route;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const TabBarBaseItem = ({
+  position,
+  index,
+  inputRange,
+  onPress,
+  route,
+  style,
+}: TabBarBaseItemProps) => {
+  const activeStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      position.value,
+      inputRange,
+      inputRange.map((i) => (i === index ? 1 : 0))
+    ),
+    position: 'absolute',
+  }));
+
+  const inactiveStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      position.value,
+      inputRange,
+      inputRange.map((i) => (i === index ? 0 : 1))
+    ),
+  }));
+
+  return (
+    <Pressable onPress={() => onPress(index)} style={[styles.container, style]}>
+      <Animated.View style={activeStyle}>
+        {route.tabBarLabel ? (
+          route.tabBarLabel(true)
+        ) : (
+          <Text>{route.title}</Text>
+        )}
+      </Animated.View>
+      <Animated.View style={inactiveStyle}>
+        {route.tabBarLabel ? (
+          route.tabBarLabel(false)
+        ) : (
+          <Text>{route.title}</Text>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    minHeight: 50,
+  },
+});

package/src/components/wrappers/GestureWrapper.tsx

@@ -12,6 +12,7 @@ import Reanimated, {
 } from 'react-native-reanimated';
 
 import { useTabContext } from '../../hooks/useTabContext';
+import { StyleSheet, View } from 'react-native';
 
 interface GestureWrapperProps {
   children: React.ReactNode;
@@ -43,7 +44,7 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
     easing: Easing.bezier(0.25, 0.1, 0.25, 1),
   } as const;
 
-  const [_gestureEnabled, setGestureEnabled] = useState(gestureEnabled.value);
+  const [_gestureEnabled, setGestureEnabled] = useState(true);
 
   useAnimatedReaction(
     () => gestureEnabled.value,
@@ -124,7 +125,16 @@ export const GestureWrapper = ({ children }: GestureWrapperProps) => {
 
   return (
     <GestureDetector gesture={gesture}>
-      <Reanimated.View style={style}>{children}</Reanimated.View>
+      <View style={styles.container}>
+        <Reanimated.View style={style}>{children}</Reanimated.View>
+      </View>
     </GestureDetector>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    flex: 1,
+  },
+});

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,6 +15,7 @@ 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.
@@ -46,11 +47,18 @@ 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 });
     }
   };
 
@@ -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 },
     });

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, transformationX } = 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 };
+  return { hideHeader };
 };

package/src/hooks/useScreenDimensions.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+
+const screenDimensions = Dimensions.get('screen');
+
+export const useScreenDimensions = () => {
+  const [dimensions, setDimensions] = useState(screenDimensions);
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ screen }) => {
+      setDimensions(screen);
+    });
+    return () => subscription?.remove();
+  });
+
+  return dimensions;
+};

package/src/hooks/useScreenScrollable.ts

@@ -1,5 +1,4 @@
 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';
@@ -13,10 +12,11 @@ import {
 } from 'react-native-reanimated';
 
 import { useScreenProperties } from './useScreenProperties';
+import { useScreenDimensions } from './useScreenDimensions';
 
 export const useScreenScrollable = () => {
   const { key } = useRoute();
-  const { height } = useWindowDimensions();
+  const { height } = useScreenDimensions();
   const { bottom, top } = useSafeAreaInsets();
   const {
     currentYPosition,

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,6 +20,7 @@ import { ContextHooks } from '../context/Context.hooks';
 
 const TabViewNavigator = ({
   HeaderComponent,
+  TopComponent,
   TabBarComponent = TabBarBaseComponent,
   children,
   config,
@@ -62,10 +63,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 +90,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>
+            <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';
@@ -29,11 +34,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,6 +56,7 @@ export namespace ReanimatedTopTabNavigation {
     HeaderComponent?: React.ComponentType<
       Pick<ContextType, 'transformationY' | 'headerHeight'>
     >;
+    TopComponent?: React.ComponentType<Pick<ContextType, 'transformationY'>>;
     TabBarComponent?: typeof TabBarBaseComponent;
     children: ReactNode;
     config?: string[];
@@ -64,5 +75,8 @@ export namespace ReanimatedTopTabNavigation {
       title: string;
     }) => React.ReactNode;
     title?: string;
+    tabBarIndicatorStyle?: StyleProp<ViewStyle>;
+    tabBarItemStyle?: StyleProp<ViewStyle>;
+    tabBarStyle?: StyleProp<ViewStyle>;
   }
 }