fix: fixes the sharp curvy tab scaling issues while active

Author: moeen-mahmud

example/app/(tabs)/_layout.tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 import React from "react";
-// import { ExpandBarTab } from "react-native-floating-tab";
+import { ElevatedTab, ExpandBarTab, RollingBallTab, SharpCurvyTab, SlideBarTab } from "react-native-floating-tab";
 
 import { Colors } from "@/constants/Colors";
 import { useColorScheme } from "@/hooks/useColorScheme";
@@ -18,7 +18,7 @@ export default function TabLayout() {
             initialRouteName="index"
             backBehavior="history"
             // tabBar={props => <RollingBallTab {...props} />}
-            // tabBar={props => <SharpCurvyTab {...props} />}
+            tabBar={props => <SharpCurvyTab {...props} />}
             // tabBar={props => <SlideBarTab {...props} />}
             // tabBar={props => <ElevatedTab {...props} />}
             // tabBar={props => <ExpandBarTab {...props} />}

example/metro.config.js

@@ -30,6 +30,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.5",
+        "react-native-floating-tab": "^1.0.20-beta.1",
         "react-native-gesture-handler": "~2.16.1",
         "react-native-reanimated": "~3.10.1",
         "react-native-safe-area-context": "4.10.5",

example/package.json

@@ -7053,6 +7053,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-floating-tab@^1.0.20-beta.1:
+  version "1.0.20-beta.1"
+  resolved "https://registry.yarnpkg.com/react-native-floating-tab/-/react-native-floating-tab-1.0.20-beta.1.tgz#9d8fbe99bb047876615739f74c78dd443d673e8c"
+  integrity sha512-sO0raa1HANIlNrFbwE1Ix/VY8g/u2GcjoS3KIGc/ljQE7oWpSl3U3nf3q2qv4rECP51OSbhhf+W0UXnQDW3nHg==
+
 react-native-gesture-handler@~2.16.1:
   version "2.16.2"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"

example/yarn.lock

@@ -10,13 +10,17 @@ const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpaci
 
 export const SharpCurvyTabButton: React.FC<TTabBarButton> = ({ isFocused, label, routeName, color, icon, routes, colors, fontSize, ...props }) => {
     const animatedStyles = useAnimatedStyle(() => {
+        const scale = withSpring(isFocused ? 1.4 : 1, springConfig);
+
         const backgroundColor = withSpring(isFocused ? colors.focusColor : "transparent", springConfig);
 
         return {
             backgroundColor,
-            transform: [{ translateY: withSpring(isFocused ? -35 : 0) }],
+
+            transform: [isFocused ? { translateY: withSpring(-35) } : { translateY: withSpring(0) }, { scale }],
         };
     }, [isFocused]);
+
     //TODO: Work in progress
     // const shouldCurveFirstItem = useMemo(() => {
     //     const index = routes.findIndex(route => route.name === routeName);
@@ -51,9 +55,7 @@ export const SharpCurvyTabButton: React.FC<TTabBarButton> = ({ isFocused, label,
                     colors={colors}
                 />
             )}
-            <Animated.View style={[{ transform: [{ scale: withSpring(isFocused ? 1.4 : 1, springConfig) }] }, animatedStyles, styles.iconWrapper]}>
-                {icon}
-            </Animated.View>
+            <Animated.View style={[animatedStyles, styles.iconWrapper]}>{icon}</Animated.View>
 
             <Text
                 style={{