Merge pull request Expensify#55347 from software-mansion-labs/feature…

…/kuba-nowakowski/fix-tab-switch-smoothness Tab shift from manual-scan-distance is delayed improvement of existing solution
Kalydosos · Jan 29, 2025 · 890b430 · 890b430
2 parents fbe3760 + b67efc4
commit 890b430
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 92 deletions.
diff --git a/...TabSelector/getBackground/index.native.ts → src/components/TabSelector/getBackground.ts b/...TabSelector/getBackground/index.native.ts → src/components/TabSelector/getBackground.ts
@@ -1,10 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
 import type {Animated} from 'react-native';
-import type GetBackgroudColor from './types';
+import type {BackgroundColor, GetBackgroundColorConfig} from './types';
 
-const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, position, isActive}) => {
+function getBackgroundColor({routesLength, tabIndex, affectedTabs, theme, position, isActive}: GetBackgroundColorConfig): BackgroundColor {
     if (routesLength > 1) {
-        const inputRange = Array.from({length: routesLength}, (v, i) => i);
+        const inputRange = Array.from({length: routesLength}, (_, i) => i);
 
         if (position) {
             return position.interpolate({
@@ -17,7 +17,8 @@ const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affected
 
         return affectedTabs.includes(tabIndex) && isActive ? theme.border : theme.appBG;
     }
+
     return theme.border;
-};
+}
 
 export default getBackgroundColor;
diff --git a/src/components/TabSelector/getBackground/index.ts b/src/components/TabSelector/getBackground/index.ts
diff --git a/...ts/TabSelector/getOpacity/index.native.ts → src/components/TabSelector/getOpacity.ts b/...ts/TabSelector/getOpacity/index.native.ts → src/components/TabSelector/getOpacity.ts
@@ -1,11 +1,11 @@
-import type GetOpacity from './types';
+import type {GetOpacityConfig, Opacity} from './types';
 
-const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, position, isActive}) => {
+function getOpacity({routesLength, tabIndex, active, affectedTabs, position, isActive}: GetOpacityConfig): Opacity {
     const activeValue = active ? 1 : 0;
     const inactiveValue = active ? 0 : 1;
 
     if (routesLength > 1) {
-        const inputRange = Array.from({length: routesLength}, (v, i) => i);
+        const inputRange = Array.from({length: routesLength}, (_, i) => i);
 
         if (position) {
             return position.interpolate({
@@ -16,7 +16,8 @@ const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, p
 
         return affectedTabs.includes(tabIndex) && isActive ? activeValue : inactiveValue;
     }
+
     return activeValue;
-};
+}
 
 export default getOpacity;
diff --git a/src/components/TabSelector/getOpacity/index.ts b/src/components/TabSelector/getOpacity/index.ts
diff --git a/src/components/TabSelector/getOpacity/types.ts b/src/components/TabSelector/getOpacity/types.ts
diff --git a/...onents/TabSelector/getBackground/types.ts → src/components/TabSelector/types.ts b/...onents/TabSelector/getBackground/types.ts → src/components/TabSelector/types.ts
@@ -2,10 +2,7 @@
 import type {Animated} from 'react-native';
 import type {ThemeColors} from '@styles/theme/types';
 
-/**
- * Configuration for the getBackgroundColor function.
- */
-type GetBackgroudColorConfig = {
+type AnimationConfigBase = {
     /**
      * The number of routes.
      */
@@ -21,11 +18,6 @@ type GetBackgroudColorConfig = {
      */
     affectedTabs: number[];
 
-    /**
-     * The theme colors.
-     */
-    theme: ThemeColors;
-
     /**
      * The animated position interpolation.
      */
@@ -37,11 +29,22 @@ type GetBackgroudColorConfig = {
     isActive: boolean;
 };
 
-/**
- * Function to get the background color.
- * @param args - The configuration for the background color.
- * @returns The interpolated background color or a string.
- */
-type GetBackgroudColor = (args: GetBackgroudColorConfig) => Animated.AnimatedInterpolation<string> | string;
+type GetBackgroundColorConfig = AnimationConfigBase & {
+    /**
+     * The theme colors.
+     */
+    theme: ThemeColors;
+};
+
+type GetOpacityConfig = AnimationConfigBase & {
+    /**
+     * Whether we are calculating the opacity for the active tab.
+     */
+    active: boolean;
+};
+
+type BackgroundColor = Animated.AnimatedInterpolation<string> | string;
+
+type Opacity = 1 | 0 | Animated.AnimatedInterpolation<number>;
 
-export default GetBackgroudColor;
+export type {BackgroundColor, GetBackgroundColorConfig, Opacity, GetOpacityConfig};