From b723d56cf42435b7f53f4094c10d5c680a5c381b Mon Sep 17 00:00:00 2001 From: sumo_slonik Date: Thu, 16 Jan 2025 14:16:19 +0100 Subject: [PATCH 1/4] working fix --- .../TabSelector/getBackground/index.native.ts | 22 ------------------- .../TabSelector/getBackground/index.ts | 15 ++++++++++++- .../TabSelector/getOpacity/index.native.ts | 22 ------------------- .../TabSelector/getOpacity/index.ts | 11 +++++++++- 4 files changed, 24 insertions(+), 46 deletions(-) delete mode 100644 src/components/TabSelector/getBackground/index.native.ts delete mode 100644 src/components/TabSelector/getOpacity/index.native.ts diff --git a/src/components/TabSelector/getBackground/index.native.ts b/src/components/TabSelector/getBackground/index.native.ts deleted file mode 100644 index 2fd2a2ef6dd3..000000000000 --- a/src/components/TabSelector/getBackground/index.native.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type {Animated} from 'react-native'; -import type GetBackgroudColor from './types'; - -const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, position, isActive}) => { - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - if (position) { - return position.interpolate({ - inputRange, - outputRange: inputRange.map((i) => { - return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG; - }), - }) as unknown as Animated.AnimatedInterpolation; - } - - 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 index 2eb60a5115a1..2fd2a2ef6dd3 100644 --- a/src/components/TabSelector/getBackground/index.ts +++ b/src/components/TabSelector/getBackground/index.ts @@ -1,9 +1,22 @@ +import type {Animated} from 'react-native'; import type GetBackgroudColor from './types'; -const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, isActive}) => { +const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, position, isActive}) => { if (routesLength > 1) { + const inputRange = Array.from({length: routesLength}, (v, i) => i); + + if (position) { + return position.interpolate({ + inputRange, + outputRange: inputRange.map((i) => { + return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG; + }), + }) as unknown as Animated.AnimatedInterpolation; + } + return affectedTabs.includes(tabIndex) && isActive ? theme.border : theme.appBG; } return theme.border; }; + export default getBackgroundColor; diff --git a/src/components/TabSelector/getOpacity/index.native.ts b/src/components/TabSelector/getOpacity/index.native.ts deleted file mode 100644 index fcdb1d0fc31e..000000000000 --- a/src/components/TabSelector/getOpacity/index.native.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type GetOpacity from './types'; - -const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, position, isActive}) => { - const activeValue = active ? 1 : 0; - const inactiveValue = active ? 0 : 1; - - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - if (position) { - return position.interpolate({ - inputRange, - outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)), - }); - } - - 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 index d9f3a2eb6167..fcdb1d0fc31e 100644 --- a/src/components/TabSelector/getOpacity/index.ts +++ b/src/components/TabSelector/getOpacity/index.ts @@ -1,10 +1,19 @@ import type GetOpacity from './types'; -const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, isActive}) => { +const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, position, isActive}) => { const activeValue = active ? 1 : 0; const inactiveValue = active ? 0 : 1; if (routesLength > 1) { + const inputRange = Array.from({length: routesLength}, (v, i) => i); + + if (position) { + return position.interpolate({ + inputRange, + outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)), + }); + } + return affectedTabs.includes(tabIndex) && isActive ? activeValue : inactiveValue; } return activeValue; From 1000034ea90107de0964a96c0cc90781e804cc6b Mon Sep 17 00:00:00 2001 From: sumo_slonik Date: Wed, 22 Jan 2025 12:02:31 +0100 Subject: [PATCH 2/4] rename files --- .../TabSelector/getBackground/{index.ts => getBackground.ts} | 0 src/components/TabSelector/getOpacity/{index.ts => getOpacity.ts} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/TabSelector/getBackground/{index.ts => getBackground.ts} (100%) rename src/components/TabSelector/getOpacity/{index.ts => getOpacity.ts} (100%) diff --git a/src/components/TabSelector/getBackground/index.ts b/src/components/TabSelector/getBackground/getBackground.ts similarity index 100% rename from src/components/TabSelector/getBackground/index.ts rename to src/components/TabSelector/getBackground/getBackground.ts diff --git a/src/components/TabSelector/getOpacity/index.ts b/src/components/TabSelector/getOpacity/getOpacity.ts similarity index 100% rename from src/components/TabSelector/getOpacity/index.ts rename to src/components/TabSelector/getOpacity/getOpacity.ts From 765938fe299922845f735360d62e5e01db402763 Mon Sep 17 00:00:00 2001 From: sumo_slonik Date: Wed, 22 Jan 2025 15:57:36 +0100 Subject: [PATCH 3/4] Create simplified types for animations. --- .../{getBackground => }/getBackground.ts | 9 ++-- .../{getOpacity => }/getOpacity.ts | 9 ++-- .../TabSelector/getOpacity/types.ts | 45 ------------------- .../TabSelector/{getBackground => }/types.ts | 35 ++++++++------- 4 files changed, 29 insertions(+), 69 deletions(-) rename src/components/TabSelector/{getBackground => }/getBackground.ts (68%) rename src/components/TabSelector/{getOpacity => }/getOpacity.ts (68%) delete mode 100644 src/components/TabSelector/getOpacity/types.ts rename src/components/TabSelector/{getBackground => }/types.ts (56%) diff --git a/src/components/TabSelector/getBackground/getBackground.ts b/src/components/TabSelector/getBackground.ts similarity index 68% rename from src/components/TabSelector/getBackground/getBackground.ts rename to src/components/TabSelector/getBackground.ts index 2fd2a2ef6dd3..6ee238a82e7a 100644 --- a/src/components/TabSelector/getBackground/getBackground.ts +++ b/src/components/TabSelector/getBackground.ts @@ -1,9 +1,9 @@ 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({ @@ -16,7 +16,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/getOpacity/getOpacity.ts b/src/components/TabSelector/getOpacity.ts similarity index 68% rename from src/components/TabSelector/getOpacity/getOpacity.ts rename to src/components/TabSelector/getOpacity.ts index fcdb1d0fc31e..5bfaca8e9657 100644 --- a/src/components/TabSelector/getOpacity/getOpacity.ts +++ b/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/types.ts b/src/components/TabSelector/getOpacity/types.ts deleted file mode 100644 index a15eacf0d8cc..000000000000 --- a/src/components/TabSelector/getOpacity/types.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type {Animated} from 'react-native'; - -/** - * Configuration for the getOpacity function. - */ -type GetOpacityConfig = { - /** - * The number of routes in the tab bar. - */ - routesLength: number; - - /** - * The index of the tab. - */ - tabIndex: number; - - /** - * Whether we are calculating the opacity for the active tab. - */ - active: boolean; - - /** - * The indexes of the tabs that are affected by the animation. - */ - affectedTabs: number[]; - - /** - * Scene's position, value which we would like to interpolate. - */ - position: Animated.AnimatedInterpolation | undefined; - - /** - * Whether the tab is active. - */ - isActive: boolean; -}; - -/** - * Function to get the opacity. - * @param args - The configuration for the opacity. - * @returns The interpolated opacity or a fixed value (1 or 0). - */ -type GetOpacity = (args: GetOpacityConfig) => 1 | 0 | Animated.AnimatedInterpolation; - -export default GetOpacity; diff --git a/src/components/TabSelector/getBackground/types.ts b/src/components/TabSelector/types.ts similarity index 56% rename from src/components/TabSelector/getBackground/types.ts rename to src/components/TabSelector/types.ts index a207c3bab35e..54d8df8c6b0d 100644 --- a/src/components/TabSelector/getBackground/types.ts +++ b/src/components/TabSelector/types.ts @@ -1,10 +1,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. */ @@ -20,11 +17,6 @@ type GetBackgroudColorConfig = { */ affectedTabs: number[]; - /** - * The theme colors. - */ - theme: ThemeColors; - /** * The animated position interpolation. */ @@ -36,11 +28,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; +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; + +type Opacity = 1 | 0 | Animated.AnimatedInterpolation; -export default GetBackgroudColor; +export type {BackgroundColor, GetBackgroundColorConfig, Opacity, GetOpacityConfig}; From b67efc4d804dc4ebd160849b3074539476a6da59 Mon Sep 17 00:00:00 2001 From: sumo_slonik Date: Thu, 23 Jan 2025 16:34:52 +0100 Subject: [PATCH 4/4] merge main --- src/components/TabSelector/getOpacity/types.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/components/TabSelector/getOpacity/types.ts diff --git a/src/components/TabSelector/getOpacity/types.ts b/src/components/TabSelector/getOpacity/types.ts deleted file mode 100644 index e69de29bb2d1..000000000000