From 225988e4fa643bd7a092c3cb592025b0ea4dbeff Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:23:29 +0100
Subject: [PATCH] fix error: The fill color of the plus icon does not get
 animated

---
 src/components/FloatingActionButton/FabPlusIcon.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js
index ff1bc7d6023b..da89b57e779f 100644
--- a/src/components/FloatingActionButton/FabPlusIcon.js
+++ b/src/components/FloatingActionButton/FabPlusIcon.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -25,15 +26,20 @@ function FabPlusIcon({isActive}) {
     // Adapting fill and stroke properties from react-native-svg to be able to animate them with Reanimated
     const adapter = createAnimatedPropAdapter(
         (props) => {
-            if (Object.keys(props).includes('fill')) {
-                props.fill = {type: 0, payload: processColor(props.fill)};
+            const modifiedProps = {...props};
+            if (_.keys(modifiedProps).includes('fill')) {
+                modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)};
             }
-            if (Object.keys(props).includes('stroke')) {
-                props.stroke = {type: 0, payload: processColor(props.stroke)};
+            if (_.keys(modifiedProps).includes('stroke')) {
+                modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.stroke)};
             }
         },
         ['fill', 'stroke'],
     );
+    adapter.propTypes = {
+        fill: PropTypes.any,
+        stroke: PropTypes.any,
+    };
 
     const animatedProps = useAnimatedProps(
         () => {