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

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;
@@ -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/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>;
   }
 }