Fix animation of fill prop of the svg element

src/components/FloatingActionButton/FabPlusIcon.js

@@ -1,34 +1,58 @@
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
-import Animated, {Easing, interpolateColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
 import useTheme from '@hooks/useTheme';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
+const adapter = createAnimatedPropAdapter(
+    (props) => {
+        // eslint-disable-next-line rulesdir/prefer-underscore-method
+        if (Object.keys(props).includes('fill')) {
+            // eslint-disable-next-line no-param-reassign
+            props.fill = {type: 0, payload: processColor(props.fill)};
+        }
+        // eslint-disable-next-line rulesdir/prefer-underscore-method
+        if (Object.keys(props).includes('stroke')) {
+            // eslint-disable-next-line no-param-reassign
+            props.stroke = {type: 0, payload: processColor(props.stroke)};
+        }
+    },
+    ['fill', 'stroke'],
+);
+adapter.propTypes = {
+    fill: PropTypes.string,
+    stroke: PropTypes.string,
+};
+
 const propTypes = {
     /* Current state (active or not active) of the component */
     isActive: PropTypes.bool.isRequired,
 };
 
 function FabPlusIcon({isActive}) {
-    const theme = useTheme();
-    const animatedValue = useSharedValue(isActive ? 1 : 0);
+    const {textLight, textDark} = useTheme();
+    const sharedValue = useSharedValue(isActive ? 1 : 0);
 
     useEffect(() => {
-        animatedValue.value = withTiming(isActive ? 1 : 0, {
+        sharedValue.value = withTiming(isActive ? 1 : 0, {
             duration: 340,
             easing: Easing.inOut(Easing.ease),
         });
-    }, [isActive, animatedValue]);
+    }, [isActive, sharedValue]);
 
-    const animatedProps = useAnimatedProps(() => {
-        const fill = interpolateColor(animatedValue.value, [0, 1], [theme.textLight, theme.textDark]);
+    const animatedProps = useAnimatedProps(
+        () => {
+            const fill = interpolateColor(sharedValue.value, [0, 1], [textLight, textDark]);
 
-        return {
-            fill,
-        };
-    });
+            return {
+                fill,
+            };
+        },
+        [],
+        adapter,
+    );
 
     return (
         <Svg

src/components/FloatingActionButton/index.js

@@ -27,27 +27,28 @@ const propTypes = {
 };
 
 const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, role}, ref) => {
-    const theme = useTheme();
+    const {success, buttonDefaultBG} = useTheme();
     const styles = useThemeStyles();
+    const borderRadius = styles.floatingActionButton.borderRadius;
     const {translate} = useLocalize();
     const fabPressable = useRef(null);
-    const animatedValue = useSharedValue(isActive ? 1 : 0);
+    const sharedValue = useSharedValue(isActive ? 1 : 0);
     const buttonRef = ref;
 
     useEffect(() => {
-        animatedValue.value = withTiming(isActive ? 1 : 0, {
+        sharedValue.value = withTiming(isActive ? 1 : 0, {
             duration: 340,
             easing: Easing.inOut(Easing.ease),
         });
-    }, [isActive, animatedValue]);
+    }, [isActive, sharedValue]);
 
     const animatedStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(animatedValue.value, [0, 1], [theme.success, theme.buttonDefaultBG]);
+        const backgroundColor = interpolateColor(sharedValue.value, [0, 1], [success, buttonDefaultBG]);
 
         return {
-            transform: [{rotate: `${animatedValue.value * 135}deg`}],
+            transform: [{rotate: `${sharedValue.value * 135}deg`}],
             backgroundColor,
-            borderRadius: styles.floatingActionButton.borderRadius,
+            borderRadius,
         };
     });
 

tests/ui/UnreadIndicatorsTest.js

@@ -31,6 +31,11 @@ jest.setTimeout(30000);
 jest.mock('../../src/libs/Notification/LocalNotification');
 jest.mock('../../src/components/Icon/Expensicons');
 
+jest.mock('react-native-reanimated', () => ({
+    ...jest.requireActual('react-native-reanimated/mock'),
+    createAnimatedPropAdapter: jest.fn,
+}));
+
 beforeAll(() => {
     // In this test, we are generically mocking the responses of all API requests by mocking fetch() and having it
     // return 200. In other tests, we might mock HttpUtils.xhr() with a more specific mock data response (which means