feat(navigation): implemented indicator responsible to scroll changes

Author: computools-anastasiia-nahaiska

src/navigation/tabs/primary-tabs/PrimaryTabs.component.tsx

@@ -1,6 +1,14 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {View, type ViewProps, type DimensionValue, type StyleProp, type ViewStyle, type TextStyle, type LayoutChangeEvent} from 'react-native';
-import Animated, {useSharedValue, type WithSpringConfig, Extrapolation, withSpring, useAnimatedStyle, interpolate} from 'react-native-reanimated';
+import Animated, {
+  withSpring,
+  interpolate,
+  Extrapolation,
+  useSharedValue,
+  useAnimatedStyle,
+  type SharedValue,
+  type WithSpringConfig,
+} from 'react-native-reanimated';
 
 import {type Tab} from '../tab.type';
 import {styles} from './primary-tabs.styles';
@@ -14,6 +22,7 @@ export interface PrimaryTabsProps<T, Y> extends ViewProps {
   activeTab: T;
 
   animConfig?: WithSpringConfig;
+  scrollAnim?: SharedValue<number>;
 
   tabIconProps?: Y;
   title?: string;
@@ -24,8 +33,6 @@ export interface PrimaryTabsProps<T, Y> extends ViewProps {
   indicatorStyle?: StyleProp<ViewStyle>;
   tabsContainerStyle?: StyleProp<ViewStyle>;
   tabInnerContentStyle?: StyleProp<ViewStyle>;
-
-  onTabPress: (routeName: T) => void;
 }
 
 const BASE_INDICATOR_WIDTH = 33;
@@ -35,6 +42,7 @@ export const PrimaryTabs = <T extends string, Y extends IconProps>({
   activeTab,
 
   badgeSize,
+  scrollAnim,
   animConfig = {} as WithSpringConfig,
 
   tabStyle,
@@ -44,8 +52,6 @@ export const PrimaryTabs = <T extends string, Y extends IconProps>({
   indicatorStyle,
   tabsContainerStyle,
   tabInnerContentStyle,
-
-  onTabPress,
   ...props
 }: PrimaryTabsProps<T, Y>) => {
   const [tabTextWidths, setTabTextWidths] = useState<number[]>(tabs.map(() => 0));
@@ -94,7 +100,12 @@ export const PrimaryTabs = <T extends string, Y extends IconProps>({
     const maxPosition = calcStartIndicatorPosition(tabs.length, tabs.length - 1);
 
     return {
-      start: `${interpolate(indicatorStartPos.value, [0, maxPosition], [0, maxPosition * 100], Extrapolation.CLAMP)}%`,
+      start: `${interpolate(
+        scrollAnim ? scrollAnim.value : indicatorStartPos.value,
+        [0, maxPosition],
+        [0, maxPosition * 100],
+        Extrapolation.CLAMP
+      )}%`,
     };
   }, [tabs]);
 
@@ -116,7 +127,6 @@ export const PrimaryTabs = <T extends string, Y extends IconProps>({
       key={tab.routeName}
       onInnerContentLayout={handleTextLayout(index)}
       {...tab}
-      onPress={onTabPress}
       active={tab.routeName === activeTab}
       iconProps={tabIconProps}
       badgeSize={badgeSize}

src/navigation/tabs/secondary-tabs/SecondaryTabs.component.tsx

@@ -1,6 +1,14 @@
 import React, {useCallback, useEffect} from 'react';
 import {View, type ViewProps, type StyleProp, type ViewStyle, type TextStyle} from 'react-native';
-import Animated, {useSharedValue, type WithSpringConfig, Extrapolation, withSpring, useAnimatedStyle, interpolate} from 'react-native-reanimated';
+import Animated, {
+  withSpring,
+  interpolate,
+  Extrapolation,
+  useSharedValue,
+  useAnimatedStyle,
+  type SharedValue,
+  type WithSpringConfig,
+} from 'react-native-reanimated';
 
 import {type Tab} from '../tab.type';
 import {styles} from './secondary-tabs.styles';
@@ -15,6 +23,7 @@ export interface SecondaryTabsProps<T, Y> extends ViewProps {
 
   badgeSize?: BadgeSize;
   animConfig?: WithSpringConfig;
+  scrollAnim?: SharedValue<number>;
 
   tabIconProps?: Y;
   tabStyle?: StyleProp<ViewStyle>;
@@ -23,15 +32,14 @@ export interface SecondaryTabsProps<T, Y> extends ViewProps {
   indicatorStyle?: StyleProp<ViewStyle>;
   tabsContainerStyle?: StyleProp<ViewStyle>;
   tabInnerContentStyle?: StyleProp<ViewStyle>;
-
-  onTabPress: (routeName: T) => void;
 }
 
 export const SecondaryTabs = <T extends string, Y extends IconProps>({
   tabs,
   activeTab,
 
   badgeSize,
+  scrollAnim,
   animConfig = {} as WithSpringConfig,
 
   tabStyle,
@@ -42,8 +50,6 @@ export const SecondaryTabs = <T extends string, Y extends IconProps>({
   tabsContainerStyle,
   tabInnerContentStyle,
 
-  onTabPress,
-
   ...props
 }: SecondaryTabsProps<T, Y>) => {
   const {primary, outlineVariant} = useTheme();
@@ -70,14 +76,20 @@ export const SecondaryTabs = <T extends string, Y extends IconProps>({
   const indicatorAnimatedStyle = useAnimatedStyle(() => {
     const maxPosition = calcStartIndicatorPosition(tabs.length, tabs.length - 1);
 
-    return {start: `${interpolate(indicatorStartPos.value, [0, maxPosition], [0, maxPosition * 100], Extrapolation.CLAMP)}%`};
+    return {
+      start: `${interpolate(
+        scrollAnim ? scrollAnim.value : indicatorStartPos.value,
+        [0, maxPosition],
+        [0, maxPosition * 100],
+        Extrapolation.CLAMP
+      )}%`,
+    };
   }, [tabs]);
 
   const renderSecondaryTab = (tab: Tab<T, Y>) => (
     <TabComponent
       key={tab.routeName}
       {...tab}
-      onPress={onTabPress}
       type={TabType.SECONDARY}
       active={tab.routeName === activeTab}
       iconProps={tabIconProps}

src/navigation/tabs/tab.type.ts

@@ -8,4 +8,6 @@ export interface Tab<T, Y> extends Omit<TouchableOpacityProps, 'onPress'> {
   badge?: string;
   iconProps?: Y;
   titleStyle?: StyleProp<TextStyle>;
+
+  onPress: (routeName: T) => void;
 }