Skip to content

Commit

Permalink
fix error: The fill color of the plus icon does not get animated
Browse files Browse the repository at this point in the history
  • Loading branch information
rayane-djouah committed Dec 18, 2023
1 parent 9c1da47 commit 225988e
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/components/FloatingActionButton/FabPlusIcon.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,

Check failure on line 40 in src/components/FloatingActionButton/FabPlusIcon.js

View workflow job for this annotation

GitHub Actions / lint

Prop type "any" is forbidden
stroke: PropTypes.any,

Check failure on line 41 in src/components/FloatingActionButton/FabPlusIcon.js

View workflow job for this annotation

GitHub Actions / lint

Prop type "any" is forbidden
};

const animatedProps = useAnimatedProps(
() => {
Expand Down

0 comments on commit 225988e

Please sign in to comment.