From 2f661907b2fdecef5240553d4718d8e0b34b188d Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 13:32:18 +0100 Subject: [PATCH 01/16] Fix animation of fill prop of the SVG element --- .../FloatingActionButton/FabPlusIcon.js | 39 +++++++++++++------ src/components/FloatingActionButton/index.js | 15 +++---- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 09afa00f119d..bdc4e4074e0c 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, {useEffect} from 'react'; -import Animated, {Easing, interpolateColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated'; +import Animated, {Easing, interpolateColor, processColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated'; import Svg, {Path} from 'react-native-svg'; import useTheme from '@hooks/useTheme'; @@ -12,23 +12,40 @@ const propTypes = { }; 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]); + // 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)}; + } + if (Object.keys(props).includes('stroke')) { + props.stroke = {type: 0, payload: processColor(props.stroke)}; + } + }, + ['fill', 'stroke'], + ); + + const animatedProps = useAnimatedProps( + () => { + const fill = interpolateColor(sharedValue.value, [0, 1], [textLight, textDark]); - return { - fill, - }; - }); + return { + fill, + }; + }, + [], + adapter, + ); return ( { - 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: borderRadius, }; }); From 92f3b545365e2d826cf147be9967a210311c2fdf Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 13:59:04 +0100 Subject: [PATCH 02/16] fix error: importing createAnimatedPropAdapter --- src/components/FloatingActionButton/FabPlusIcon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index bdc4e4074e0c..ff1bc7d6023b 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, {useEffect} from 'react'; -import Animated, {Easing, interpolateColor, processColor, 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'; From 9c1da47c75285851af62da17c587c0019fcdb311 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 14:20:09 +0100 Subject: [PATCH 03/16] fix lint error --- src/components/FloatingActionButton/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 1266fb2d1653..6922c8b1949b 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -48,7 +48,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility return { transform: [{rotate: `${sharedValue.value * 135}deg`}], backgroundColor, - borderRadius: borderRadius, + borderRadius, }; }); 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 04/16] 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( () => { From 9042025ca4a3a49102792f1d509bf587de157ea4 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 14:28:56 +0100 Subject: [PATCH 05/16] fix propTypes declaration for the adapter --- src/components/FloatingActionButton/FabPlusIcon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index da89b57e779f..bb43dfa23f69 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -37,8 +37,8 @@ function FabPlusIcon({isActive}) { ['fill', 'stroke'], ); adapter.propTypes = { - fill: PropTypes.any, - stroke: PropTypes.any, + fill: PropTypes.string, + stroke: PropTypes.string, }; const animatedProps = useAnimatedProps( From adbb86600b2e2a831b0c8ffca7ea37d58663e867 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 14:40:01 +0100 Subject: [PATCH 06/16] move adapter outside of the component --- .../FloatingActionButton/FabPlusIcon.js | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index bb43dfa23f69..648691bda193 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -7,6 +7,24 @@ import useTheme from '@hooks/useTheme'; const AnimatedPath = Animated.createAnimatedComponent(Path); +// Adapting fill and stroke properties from react-native-svg to be able to animate them with Reanimated +const adapter = createAnimatedPropAdapter( + (props) => { + const modifiedProps = {...props}; + if (_.keys(modifiedProps).includes('fill')) { + modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; + } + if (_.keys(modifiedProps).includes('stroke')) { + modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.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, @@ -23,24 +41,6 @@ function FabPlusIcon({isActive}) { }); }, [isActive, sharedValue]); - // Adapting fill and stroke properties from react-native-svg to be able to animate them with Reanimated - const adapter = createAnimatedPropAdapter( - (props) => { - const modifiedProps = {...props}; - if (_.keys(modifiedProps).includes('fill')) { - modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; - } - if (_.keys(modifiedProps).includes('stroke')) { - modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.stroke)}; - } - }, - ['fill', 'stroke'], - ); - adapter.propTypes = { - fill: PropTypes.string, - stroke: PropTypes.string, - }; - const animatedProps = useAnimatedProps( () => { const fill = interpolateColor(sharedValue.value, [0, 1], [textLight, textDark]); From 62833d1d6a99dd6395fe6685fa50b87615665983 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 14:58:04 +0100 Subject: [PATCH 07/16] remove unnecessary comment --- src/components/FloatingActionButton/FabPlusIcon.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 648691bda193..c4c129b04157 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -7,7 +7,6 @@ import useTheme from '@hooks/useTheme'; const AnimatedPath = Animated.createAnimatedComponent(Path); -// Adapting fill and stroke properties from react-native-svg to be able to animate them with Reanimated const adapter = createAnimatedPropAdapter( (props) => { const modifiedProps = {...props}; From bf164fd9b110f2a9bf59243a6e24daaee8c14a4b Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 15:55:17 +0100 Subject: [PATCH 08/16] use native Object.keys instead of _.keys --- src/components/FloatingActionButton/FabPlusIcon.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index c4c129b04157..1efb1c51b51d 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -1,4 +1,3 @@ -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'; @@ -10,10 +9,10 @@ const AnimatedPath = Animated.createAnimatedComponent(Path); const adapter = createAnimatedPropAdapter( (props) => { const modifiedProps = {...props}; - if (_.keys(modifiedProps).includes('fill')) { + if (Object.keys(modifiedProps).includes('fill')) { modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; } - if (_.keys(modifiedProps).includes('stroke')) { + if (Object.keys(modifiedProps).includes('stroke')) { modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.stroke)}; } }, From ccec8cf7611bf4e5e7c2adf13032eb8d6a20c97b Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 18 Dec 2023 15:57:35 +0100 Subject: [PATCH 09/16] ignore prefer-underscore-method lint rule --- src/components/FloatingActionButton/FabPlusIcon.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 1efb1c51b51d..ae896fa96184 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -9,9 +9,11 @@ const AnimatedPath = Animated.createAnimatedComponent(Path); const adapter = createAnimatedPropAdapter( (props) => { const modifiedProps = {...props}; + // eslint-disable-next-line rulesdir/prefer-underscore-method if (Object.keys(modifiedProps).includes('fill')) { modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; } + // eslint-disable-next-line rulesdir/prefer-underscore-method if (Object.keys(modifiedProps).includes('stroke')) { modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.stroke)}; } From 2cf48f54c3cec7c867ca7e63b93b6c829184de86 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 14:08:16 +0100 Subject: [PATCH 10/16] move adapter inside the component --- .../FloatingActionButton/FabPlusIcon.js | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index ae896fa96184..2fbb901bd5d7 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -6,25 +6,6 @@ import useTheme from '@hooks/useTheme'; const AnimatedPath = Animated.createAnimatedComponent(Path); -const adapter = createAnimatedPropAdapter( - (props) => { - const modifiedProps = {...props}; - // eslint-disable-next-line rulesdir/prefer-underscore-method - if (Object.keys(modifiedProps).includes('fill')) { - modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; - } - // eslint-disable-next-line rulesdir/prefer-underscore-method - if (Object.keys(modifiedProps).includes('stroke')) { - modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.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, @@ -41,6 +22,25 @@ function FabPlusIcon({isActive}) { }); }, [isActive, sharedValue]); + const adapter = createAnimatedPropAdapter( + (props) => { + const modifiedProps = {...props}; + // eslint-disable-next-line rulesdir/prefer-underscore-method + if (Object.keys(modifiedProps).includes('fill')) { + modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; + } + // eslint-disable-next-line rulesdir/prefer-underscore-method + if (Object.keys(modifiedProps).includes('stroke')) { + modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.stroke)}; + } + }, + ['fill', 'stroke'], + ); + adapter.propTypes = { + fill: PropTypes.string, + stroke: PropTypes.string, + }; + const animatedProps = useAnimatedProps( () => { const fill = interpolateColor(sharedValue.value, [0, 1], [textLight, textDark]); From 28b8b7245fc864487d0090940264e6ac3a7119ab Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 14:34:24 +0100 Subject: [PATCH 11/16] fix error on android --- .../FloatingActionButton/FabPlusIcon.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 2fbb901bd5d7..3c07d8a572c7 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -6,6 +6,24 @@ import useTheme from '@hooks/useTheme'; const AnimatedPath = Animated.createAnimatedComponent(Path); +const adapter = createAnimatedPropAdapter( + (props) => { + // eslint-disable-next-line rulesdir/prefer-underscore-method no-param-reassign + if (Object.keys(props).includes('fill')) { + props.fill = {type: 0, payload: processColor(props.fill)}; + } + // eslint-disable-next-line rulesdir/prefer-underscore-method no-param-reassign + if (Object.keys(props).includes('stroke')) { + 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, From abf9500373e94a5c174189eae3706970636569d8 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 15:04:44 +0100 Subject: [PATCH 12/16] remove duplicate definition --- .../FloatingActionButton/FabPlusIcon.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 3c07d8a572c7..13c926d860c6 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -40,25 +40,6 @@ function FabPlusIcon({isActive}) { }); }, [isActive, sharedValue]); - const adapter = createAnimatedPropAdapter( - (props) => { - const modifiedProps = {...props}; - // eslint-disable-next-line rulesdir/prefer-underscore-method - if (Object.keys(modifiedProps).includes('fill')) { - modifiedProps.fill = {type: 0, payload: processColor(modifiedProps.fill)}; - } - // eslint-disable-next-line rulesdir/prefer-underscore-method - if (Object.keys(modifiedProps).includes('stroke')) { - modifiedProps.stroke = {type: 0, payload: processColor(modifiedProps.stroke)}; - } - }, - ['fill', 'stroke'], - ); - adapter.propTypes = { - fill: PropTypes.string, - stroke: PropTypes.string, - }; - const animatedProps = useAnimatedProps( () => { const fill = interpolateColor(sharedValue.value, [0, 1], [textLight, textDark]); From e1e2015cd84948bb8aea060aa1e2e33b60ce25a8 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 15:07:55 +0100 Subject: [PATCH 13/16] correct eslint-disable-next-line comment --- src/components/FloatingActionButton/FabPlusIcon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 13c926d860c6..655e1db49103 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -8,11 +8,11 @@ const AnimatedPath = Animated.createAnimatedComponent(Path); const adapter = createAnimatedPropAdapter( (props) => { - // eslint-disable-next-line rulesdir/prefer-underscore-method no-param-reassign + // eslint-disable-next-line rulesdir/prefer-underscore-method, no-param-reassign if (Object.keys(props).includes('fill')) { props.fill = {type: 0, payload: processColor(props.fill)}; } - // eslint-disable-next-line rulesdir/prefer-underscore-method no-param-reassign + // eslint-disable-next-line rulesdir/prefer-underscore-method, no-param-reassign if (Object.keys(props).includes('stroke')) { props.stroke = {type: 0, payload: processColor(props.stroke)}; } From 6487dcf7752a3e676632b73968691523961704dc Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 15:14:49 +0100 Subject: [PATCH 14/16] correct eslint-disable-next-line comment --- src/components/FloatingActionButton/FabPlusIcon.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index 655e1db49103..f179ca09692b 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -8,12 +8,14 @@ const AnimatedPath = Animated.createAnimatedComponent(Path); const adapter = createAnimatedPropAdapter( (props) => { - // eslint-disable-next-line rulesdir/prefer-underscore-method, no-param-reassign + // eslint-disable-next-line rulesdir/prefer-underscore-method if (Object.keys(props).includes('fill')) { + // eslint-disable-next-line rulesdir/no-param-reassign props.fill = {type: 0, payload: processColor(props.fill)}; } - // eslint-disable-next-line rulesdir/prefer-underscore-method, no-param-reassign + // eslint-disable-next-line rulesdir/prefer-underscore-method if (Object.keys(props).includes('stroke')) { + // eslint-disable-next-line rulesdir/no-param-reassign props.stroke = {type: 0, payload: processColor(props.stroke)}; } }, From c12ad0ff5ee9e0d3e26cf6e6b27579ae0331b048 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 15:18:52 +0100 Subject: [PATCH 15/16] correct eslint-disable-next-line comment --- src/components/FloatingActionButton/FabPlusIcon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index f179ca09692b..1dd09bc72db8 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -10,12 +10,12 @@ const adapter = createAnimatedPropAdapter( (props) => { // eslint-disable-next-line rulesdir/prefer-underscore-method if (Object.keys(props).includes('fill')) { - // eslint-disable-next-line rulesdir/no-param-reassign + // 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 rulesdir/no-param-reassign + // eslint-disable-next-line no-param-reassign props.stroke = {type: 0, payload: processColor(props.stroke)}; } }, From b57637d9a4d8898e02e7b1f7f3a6836fcff34775 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 19 Dec 2023 19:12:37 +0100 Subject: [PATCH 16/16] mock createAnimatedPropAdapter from react-native-reanimated --- tests/ui/UnreadIndicatorsTest.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 93bb2cb94d30..f4d054ab15e8 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/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