fix: fixed problems with animation of icon in expo-vector-icons 14

Author: RichardLindhout

.yarn/install-state.gz

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~4.0.0",
-    "@expo/vector-icons": "^13.0.0",
+    "@expo/vector-icons": "^14.0.4",
     "expo": "~52.0.23",
     "expo-build-properties": "~0.13.1",
     "expo-status-bar": "~2.0.0",

example/package.json

@@ -1,4 +1,4 @@
-import { StyleSheet, Animated } from 'react-native';
+import { Animated } from 'react-native';
 
 let MaterialCommunityIcons: any;
 
@@ -39,27 +39,4 @@ try {
   };
 }
 
-const defaultIcon = ({ name, color, size, style, ...rest }: any) => (
-  <MaterialCommunityIcons
-    selectable={false}
-    name={name}
-    color={color}
-    size={size}
-    style={[
-      {
-        lineHeight: size,
-      },
-      styles.icon,
-      style,
-    ]}
-    {...rest}
-  />
-);
-
-const styles = StyleSheet.create({
-  icon: {
-    backgroundColor: 'transparent',
-  },
-});
-
-export default defaultIcon;
+export default MaterialCommunityIcons;

src/MaterialCommunityIcon.tsx

@@ -115,14 +115,30 @@ export default function TabsHeaderItem({
                 iconPosition !== 'top' && styles.marginRight,
               ]}
             >
-              <MaterialCommunityIcon
-                selectable={false}
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no"
-                name={tab.props.icon || ''}
-                style={{ color: color, opacity }}
-                size={24}
-              />
+              {/*<AnimatedText style={{ color, opacity }}>BB</AnimatedText>*/}
+              {tab.props.icon ? (
+                Platform.OS === 'android' ? (
+                  <Animated.View style={{ opacity }}>
+                    <MaterialCommunityIcon
+                      selectable={false}
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no"
+                      name={tab.props.icon}
+                      color={textColor}
+                      size={24}
+                    />
+                  </Animated.View>
+                ) : (
+                  <MaterialCommunityIcon
+                    selectable={false}
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no"
+                    name={tab.props.icon}
+                    style={{ color, opacity }}
+                    size={24}
+                  />
+                )
+              ) : null}
             </View>
           ) : null}
           {badgeIsFilled ? (

src/TabsHeaderItem.tsx

@@ -25,7 +25,7 @@ export function useAnimatedText({
     color:
       childrenA.length <= 1
         ? activeColor
-        : positionWithOffset.interpolate({
+        : positionWithOffset!.interpolate({
             inputRange: inputRange,
             outputRange: childrenA.map((_, i) =>
               i === tabIndex ? activeColor : textColor

src/internal.native.ts

@@ -2272,7 +2272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/vector-icons@npm:^14.0.0":
+"@expo/vector-icons@npm:^14.0.0, @expo/vector-icons@npm:^14.0.4":
   version: 14.0.4
   resolution: "@expo/vector-icons@npm:14.0.4"
   dependencies:
@@ -11914,7 +11914,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.0
     "@expo/metro-runtime": ~4.0.0
-    "@expo/vector-icons": ^13.0.0
+    "@expo/vector-icons": ^14.0.4
     expo: ~52.0.23
     expo-build-properties: ~0.13.1
     expo-status-bar: ~2.0.0