animated tab bar

src/navigation/BottomTab.js

@@ -25,6 +25,7 @@ export const BottomTabScreen = () => {
       animate={{
         tintColor: focused ? Palette.white : "#8B8883",
       }}
+      transition={{ type: "spring", damping: 18, mass: 0.7 }}
       style={[
         {
           width: Platform.OS === "web" ? 30 : 24,

src/navigation/TabBar.js

@@ -1,5 +1,6 @@
+import { Motion } from "@legendapp/motion";
 import * as Haptics from "expo-haptics";
-import React from "react";
+import React, { useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 
 import ItemContainer from "../components/ItemContainer/ItemContainer";
@@ -9,6 +10,7 @@ import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
   const { isWeb } = useLayoutType();
+  const [pressedIndex, setPressedIndex] = useState(null);
 
   return (
     <View
@@ -87,18 +89,34 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
                   testID={options.tabBarTestID}
                   onPress={_onPressTabBar}
                   onLongPress={onLongPress}
+                  onPressIn={() => setPressedIndex(index)}
+                  onPressOut={() => setPressedIndex(null)}
                 >
-                  {options?.tabBarIcon({ focused: isFocused })}
-                  <Text
+                  <Motion.View
+                    animate={{
+                      scale: isFocused
+                        ? 1.12
+                        : pressedIndex === index
+                          ? 1.05
+                          : 1,
+                    }}
+                    transition={{ type: "spring", damping: 18, mass: 0.7 }}
                     style={{
-                      fontSize: isWeb ? 14 : 10,
-                      color: isFocused ? Palette.white : "#8B8883",
-                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-                      marginTop: 2,
+                      ...Style.containerCenter,
                     }}
                   >
-                    {label}
-                  </Text>
+                    {options?.tabBarIcon({ focused: isFocused })}
+                    <Text
+                      style={{
+                        fontSize: isWeb ? 14 : 10,
+                        color: isFocused ? Palette.white : "#8B8883",
+                        fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                        marginTop: 2,
+                      }}
+                    >
+                      {label}
+                    </Text>
+                  </Motion.View>
                 </TouchableOpacity>
               )
             );