feat(mobile): enhance tab bar icon and label animations

- Implemented new TabIcon and TextLabel components for improved tab bar interactions
- Added fade and color interpolation animations for tab icons and labels
- Extracted icon and label rendering logic from main Tabbar component
- Introduced new animation configurations for tab bar elements

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/components/ui/tabbar/Tabbar.tsx

@@ -1,17 +1,18 @@
 import type { BottomTabBarProps } from "@react-navigation/bottom-tabs"
-import { TabBarIcon } from "@react-navigation/bottom-tabs/src/views/TabBarIcon"
 import { getLabel } from "@react-navigation/elements"
-import {
-  CommonActions,
-  NavigationContext,
-  NavigationRouteContext,
-  useTheme,
-} from "@react-navigation/native"
+import { CommonActions, NavigationContext, NavigationRouteContext } from "@react-navigation/native"
 import type { FC } from "react"
 import { useContext, useEffect } from "react"
-import type { StyleProp, ViewStyle } from "react-native"
-import { Platform, Pressable, StyleSheet, Text } from "react-native"
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
+import type { StyleProp, TextStyle } from "react-native"
+import { Platform, Pressable, StyleSheet, View } from "react-native"
+import Animated, {
+  FadeIn,
+  FadeOut,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
 import { SetBottomTabBarHeightContext } from "@/src/components/ui/tabbar/contexts/BottomTabBarHeightContext"
@@ -27,7 +28,6 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
   const { state, navigation, descriptors } = props
   const { routes } = state
   const setTabBarHeight = useContext(SetBottomTabBarHeightContext)
-  const { fonts } = useTheme()
 
   const insets = useSafeAreaInsets()
   const tabBarVisible = useContext(BottomTabBarVisibleContext)
@@ -85,23 +85,13 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
                 : undefined
 
           const renderIcon = ({ focused }: { focused: boolean }) => {
-            const activeOpacity = focused ? 1 : 0
-            const inactiveOpacity = focused ? 0 : 1
-
+            const iconSize = ICON_SIZE_ROUND
             return (
-              <TabBarIcon
-                route={route}
-                variant={"uikit"}
-                size={"regular"}
-                badge={undefined}
-                badgeStyle={undefined}
-                activeOpacity={activeOpacity}
-                allowFontScaling={true}
-                inactiveOpacity={inactiveOpacity}
-                activeTintColor={accentColor}
+              <TabIcon
+                focused={focused}
+                iconSize={iconSize}
                 inactiveTintColor={inactiveTintColor}
                 renderIcon={options.tabBarIcon!}
-                style={options.tabBarIconStyle as StyleProp<ViewStyle>}
               />
             )
           }
@@ -127,20 +117,13 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
             }
 
             return (
-              <Text
-                numberOfLines={1}
+              <TextLabel
+                focused={focused}
                 accessibilityLabel={accessibilityLabel}
-                style={StyleSheet.flatten([
-                  styles.labelBeneath,
-                  fonts.regular,
-                  {
-                    color: focused ? accentColor : inactiveTintColor,
-                  },
-                ])}
-                allowFontScaling
-              >
-                {label}
-              </Text>
+                label={label}
+                inactiveTintColor={inactiveTintColor}
+                style={styles.labelBeneath}
+              />
             )
           }
           const scene = { route, focused }
@@ -162,6 +145,89 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
     </Animated.View>
   )
 }
+
+const tabIconIconAnimations = {
+  in: FadeIn.springify(),
+  out: FadeOut.springify(),
+}
+
+const TextLabel = (props: {
+  focused: boolean
+  accessibilityLabel: string | undefined
+  label: string
+  inactiveTintColor: string
+  style: StyleProp<TextStyle>
+}) => {
+  const { focused, accessibilityLabel, label, inactiveTintColor, style } = props
+
+  const focusedValue = useSharedValue(focused ? 1 : 0)
+  const animatedStyle = useAnimatedStyle(() => ({
+    ...styles.labelBeneath,
+    color: interpolateColor(focusedValue.value, [0, 1], [inactiveTintColor, accentColor]),
+  }))
+  useEffect(() => {
+    focusedValue.value = withSpring(focused ? 1 : 0)
+  }, [focused, focusedValue])
+  return (
+    <Animated.Text
+      numberOfLines={1}
+      accessibilityLabel={accessibilityLabel}
+      style={StyleSheet.flatten([style, animatedStyle])}
+      allowFontScaling
+    >
+      {label}
+    </Animated.Text>
+  )
+}
+const TabIcon = ({
+  focused,
+  iconSize,
+  inactiveTintColor,
+  renderIcon,
+}: {
+  focused: boolean
+  iconSize: number
+  inactiveTintColor: string
+  renderIcon: (options: { focused: boolean; size: number; color: string }) => React.ReactNode
+}) => {
+  const activeOpacity = focused ? 1 : 0
+  const inactiveOpacity = focused ? 0 : 1
+  return (
+    <View style={styles.wrapperUikit}>
+      {focused && (
+        <Animated.View
+          entering={tabIconIconAnimations.in}
+          exiting={tabIconIconAnimations.out}
+          style={[styles.icon, { opacity: activeOpacity }]}
+        >
+          {renderIcon({
+            focused: true,
+            size: iconSize,
+            color: accentColor,
+          })}
+        </Animated.View>
+      )}
+      {!focused && (
+        <Animated.View
+          entering={tabIconIconAnimations.in}
+          exiting={tabIconIconAnimations.out}
+          style={[styles.icon, { opacity: inactiveOpacity }]}
+        >
+          {renderIcon({
+            focused: false,
+            size: iconSize,
+            color: inactiveTintColor,
+          })}
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+// @copy node_modules/@react-navigation/bottom-tabs/src/views/TabBarIcon.tsx
+const ICON_SIZE_WIDE = 31
+const ICON_SIZE_TALL = 28
+const ICON_SIZE_ROUND = 25
 const styles = StyleSheet.create({
   labelBeneath: {
     fontSize: 10,
@@ -172,6 +238,21 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
     borderTopWidth: StyleSheet.hairlineWidth,
   },
+  icon: {
+    // We render the icon twice at the same position on top of each other:
+    // active and inactive one, so we can fade between them:
+    // Cover the whole iconContainer:
+    position: "absolute",
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    width: "100%",
+  },
+  wrapperUikit: {
+    width: ICON_SIZE_WIDE,
+    height: ICON_SIZE_TALL,
+  },
 })
 
 const AnimatedThemedBlurView = Animated.createAnimatedComponent(ThemedBlurView)