From 8b2eca69ae9289c65de1c2a19197b41d1ca52e08 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 18 Aug 2023 02:12:21 +0000 Subject: [PATCH 01/34] Migrate Icon/index.js to function component --- src/components/FloatingActionButton.js | 4 +- src/components/Icon/index.js | 71 +++++++++++++------------- src/components/withAnimated.js | 16 ++++++ 3 files changed, 53 insertions(+), 38 deletions(-) create mode 100644 src/components/withAnimated.js diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js index f1174988e955..74b9bb1a9b5c 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -9,9 +9,9 @@ import themeColors from '../styles/themes/default'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import {withAnimated} from './withAnimated'; -const AnimatedIcon = Animated.createAnimatedComponent(Icon); -AnimatedIcon.displayName = 'AnimatedIcon'; +const AnimatedIcon = withAnimated(Icon); const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); AnimatedPressable.displayName = 'AnimatedPressable'; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 5cdd5c79704d..5aac15ff0625 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1,4 +1,4 @@ -import React, {PureComponent} from 'react'; +import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import themeColors from '../../styles/themes/default'; @@ -47,51 +47,50 @@ const defaultProps = { pressed: false, }; -// We must use a class component to create an animatable component with the Animated API -// eslint-disable-next-line react/prefer-stateless-function -class Icon extends PureComponent { - render() { - const width = this.props.small ? variables.iconSizeSmall : this.props.width; - const height = this.props.small ? variables.iconSizeSmall : this.props.height; - const iconStyles = [StyleUtils.getWidthAndHeightStyle(width, height), IconWrapperStyles, styles.pAbsolute, ...this.props.additionalStyles]; - - if (this.props.inline) { - return ( - - - - - - ); - } +function Icon({src, width, height, fill, small, inline, additionalStyles, hovered, pressed}) { + const effectiveWidth = small ? variables.iconSizeSmall : width; + const effectiveHeight = small ? variables.iconSizeSmall : height; + const iconStyles = [StyleUtils.getWidthAndHeightStyle(effectiveWidth, effectiveHeight), IconWrapperStyles, styles.pAbsolute, ...additionalStyles]; + + const IconComponent = src; + if (inline) { return ( - + + + ); } + + return ( + + + + ); } Icon.propTypes = propTypes; Icon.defaultProps = defaultProps; +Icon.displayName = 'Icon'; export default Icon; diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js new file mode 100644 index 000000000000..468fc84e6d9b --- /dev/null +++ b/src/components/withAnimated.js @@ -0,0 +1,16 @@ +import React from 'react'; +import {Animated} from 'react-native'; + +export function withAnimated(WrappedComponent) { + const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; + + class WithAnimated extends React.Component { + static displayName = `WithAnimated(${displayName})`; + + render() { + return ; + } + } + + return Animated.createAnimatedComponent(WithAnimated); +} From 16a2adfee112aaac2715976aa970099bf30072ec Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 18 Aug 2023 02:35:57 +0000 Subject: [PATCH 02/34] fix lint errors --- src/components/withAnimated.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js index 468fc84e6d9b..e06491065c2a 100644 --- a/src/components/withAnimated.js +++ b/src/components/withAnimated.js @@ -1,16 +1,19 @@ import React from 'react'; import {Animated} from 'react-native'; -export function withAnimated(WrappedComponent) { - const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; - - class WithAnimated extends React.Component { - static displayName = `WithAnimated(${displayName})`; - - render() { - return ; - } +// eslint-disable-next-line react/prefer-stateless-function +class WithAnimated extends React.Component { + render() { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; } +} + +function withAnimated(WrappedComponent) { + const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; + WithAnimated.displayName = `WithAnimated(${displayName})`; return Animated.createAnimatedComponent(WithAnimated); } + +export default withAnimated; From c41e8f21eb4ce9e3fb19aecd69a086fd6b0fb1a7 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 18 Aug 2023 02:44:45 +0000 Subject: [PATCH 03/34] fix lint errors --- src/components/withAnimated.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js index e06491065c2a..80cfefe0d662 100644 --- a/src/components/withAnimated.js +++ b/src/components/withAnimated.js @@ -1,19 +1,20 @@ import React from 'react'; import {Animated} from 'react-native'; -// eslint-disable-next-line react/prefer-stateless-function -class WithAnimated extends React.Component { - render() { - // eslint-disable-next-line react/jsx-props-no-spreading - return ; - } -} - function withAnimated(WrappedComponent) { const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; - WithAnimated.displayName = `WithAnimated(${displayName})`; + + // eslint-disable-next-line react/prefer-stateless-function + class WithAnimated extends React.Component { + static displayName = `WithAnimated(${displayName})`; + + render() { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; + } + } return Animated.createAnimatedComponent(WithAnimated); } -export default withAnimated; +export default withAnimated; \ No newline at end of file From ebf02366698259331d0403f20554365a9a9b0e3a Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 18 Aug 2023 02:57:30 +0000 Subject: [PATCH 04/34] fix errors --- src/components/FloatingActionButton.js | 2 +- src/components/withAnimated.js | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js index 74b9bb1a9b5c..eee279c497c1 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -9,7 +9,7 @@ import themeColors from '../styles/themes/default'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import {withAnimated} from './withAnimated'; +import withAnimated from './withAnimated'; const AnimatedIcon = withAnimated(Icon); diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js index 80cfefe0d662..bc725de80afc 100644 --- a/src/components/withAnimated.js +++ b/src/components/withAnimated.js @@ -1,7 +1,7 @@ import React from 'react'; import {Animated} from 'react-native'; -function withAnimated(WrappedComponent) { +export default function withAnimated(WrappedComponent) { const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; // eslint-disable-next-line react/prefer-stateless-function @@ -15,6 +15,4 @@ function withAnimated(WrappedComponent) { } return Animated.createAnimatedComponent(WithAnimated); -} - -export default withAnimated; \ No newline at end of file +} \ No newline at end of file From 3ad83ef34b1a001d76f4024c0d2a7282f3af4b76 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 18 Aug 2023 03:02:35 +0000 Subject: [PATCH 05/34] declare 'displayName' outside the class body --- src/components/withAnimated.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js index bc725de80afc..c0c2e50e4736 100644 --- a/src/components/withAnimated.js +++ b/src/components/withAnimated.js @@ -1,18 +1,19 @@ import React from 'react'; import {Animated} from 'react-native'; -export default function withAnimated(WrappedComponent) { - const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; +function withAnimated(WrappedComponent) { // eslint-disable-next-line react/prefer-stateless-function class WithAnimated extends React.Component { - static displayName = `WithAnimated(${displayName})`; - render() { // eslint-disable-next-line react/jsx-props-no-spreading return ; } } + + const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; + WithAnimated.displayName = `WithAnimated(${displayName})`; return Animated.createAnimatedComponent(WithAnimated); -} \ No newline at end of file +} +export default withAnimated; From ac21c391de14fc3103b2eb4fef5991b449ef26f4 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 18 Aug 2023 08:37:18 +0000 Subject: [PATCH 06/34] run prettier --- src/components/withAnimated.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js index c0c2e50e4736..cdf8c1d4c294 100644 --- a/src/components/withAnimated.js +++ b/src/components/withAnimated.js @@ -2,7 +2,6 @@ import React from 'react'; import {Animated} from 'react-native'; function withAnimated(WrappedComponent) { - // eslint-disable-next-line react/prefer-stateless-function class WithAnimated extends React.Component { render() { @@ -10,7 +9,7 @@ function withAnimated(WrappedComponent) { return ; } } - + const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; WithAnimated.displayName = `WithAnimated(${displayName})`; From 9b50cb8db8a5fd975e799cfc9acecd0847347da0 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 4 Sep 2023 10:53:29 +0000 Subject: [PATCH 07/34] fix for the fab plus icon, migrate FloatingActionButton to function comp, add FABPlusIcon custom svg icon --- .gitconfig | 8 ++ src/components/FloatingActionButton.js | 124 ------------------ .../FloatingActionButton/FABPlusIcon.js | 47 +++++++ .../FloatingActionButton.js | 77 +++++++++++ src/components/Icon/index.js | 8 +- src/components/withAnimated.js | 18 --- .../FloatingActionButtonAndPopover.js | 2 +- src/styles/StyleUtils.js | 13 -- 8 files changed, 138 insertions(+), 159 deletions(-) create mode 100644 .gitconfig delete mode 100644 src/components/FloatingActionButton.js create mode 100644 src/components/FloatingActionButton/FABPlusIcon.js create mode 100644 src/components/FloatingActionButton/FloatingActionButton.js delete mode 100644 src/components/withAnimated.js diff --git a/.gitconfig b/.gitconfig new file mode 100644 index 000000000000..8354e2bc0e3f --- /dev/null +++ b/.gitconfig @@ -0,0 +1,8 @@ +[commit] + gpgsign = true +[user] + email = 77965000+rayane-djouah@users.noreply.github.com + name = Rayane Djouah + signingkey = D23D62C4BF91F160 +[gpg] + program = gpg \ No newline at end of file diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js deleted file mode 100644 index eee279c497c1..000000000000 --- a/src/components/FloatingActionButton.js +++ /dev/null @@ -1,124 +0,0 @@ -import React, {PureComponent} from 'react'; -import {Animated, Easing, View} from 'react-native'; -import PropTypes from 'prop-types'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import styles from '../styles/styles'; -import * as StyleUtils from '../styles/StyleUtils'; -import themeColors from '../styles/themes/default'; -import Tooltip from './Tooltip'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import withAnimated from './withAnimated'; - -const AnimatedIcon = withAnimated(Icon); - -const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); -AnimatedPressable.displayName = 'AnimatedPressable'; - -const propTypes = { - // Callback to fire on request to toggle the FloatingActionButton - onPress: PropTypes.func.isRequired, - - // Current state (active or not active) of the component - isActive: PropTypes.bool.isRequired, - - // Ref for the button - buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - buttonRef: () => {}, -}; - -class FloatingActionButton extends PureComponent { - constructor(props) { - super(props); - this.animatedValue = new Animated.Value(props.isActive ? 1 : 0); - } - - componentDidUpdate(prevProps) { - if (prevProps.isActive === this.props.isActive) { - return; - } - - this.animateFloatingActionButton(); - } - - /** - * Animates the floating action button - * Method is called when the isActive prop changes - */ - animateFloatingActionButton() { - const animationFinalValue = this.props.isActive ? 1 : 0; - - Animated.timing(this.animatedValue, { - toValue: animationFinalValue, - duration: 340, - easing: Easing.inOut(Easing.ease), - useNativeDriver: false, - }).start(); - } - - render() { - const rotate = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: ['0deg', '135deg'], - }); - - const backgroundColor = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [themeColors.success, themeColors.buttonDefaultBG], - }); - - const fill = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [themeColors.textLight, themeColors.textDark], - }); - - return ( - - - { - this.fabPressable = el; - if (this.props.buttonRef) { - this.props.buttonRef.current = el; - } - }} - accessibilityLabel={this.props.accessibilityLabel} - accessibilityRole={this.props.accessibilityRole} - pressDimmingValue={1} - onPress={(e) => { - // Drop focus to avoid blue focus ring. - this.fabPressable.blur(); - this.props.onPress(e); - }} - onLongPress={() => {}} - style={[styles.floatingActionButton, StyleUtils.getAnimatedFABStyle(rotate, backgroundColor)]} - > - - - - - ); - } -} - -FloatingActionButton.propTypes = propTypes; -FloatingActionButton.defaultProps = defaultProps; - -const FloatingActionButtonWithLocalize = withLocalize(FloatingActionButton); - -export default React.forwardRef((props, ref) => ( - -)); diff --git a/src/components/FloatingActionButton/FABPlusIcon.js b/src/components/FloatingActionButton/FABPlusIcon.js new file mode 100644 index 000000000000..20d963f341e6 --- /dev/null +++ b/src/components/FloatingActionButton/FABPlusIcon.js @@ -0,0 +1,47 @@ +import React, {useEffect} from 'react'; +import PropTypes from 'prop-types'; +import Animated, {useSharedValue, useAnimatedProps, withTiming, interpolateColor} from 'react-native-reanimated'; +import Svg, {Path} from 'react-native-svg'; +import themeColors from '../../styles/themes/default'; + +const AnimatedPath = Animated.createAnimatedComponent(Path); + +const propTypes = { + /* Current state (active or not active) of the component */ + isActive: PropTypes.bool.isRequired, +}; + +function FABPlusIcon({isActive}) { + const animatedValue = useSharedValue(isActive ? 1 : 0); + + useEffect(() => { + animatedValue.value = withTiming(isActive ? 1 : 0, { + duration: 340, + }); + }, [isActive, animatedValue]); + + const animatedProps = useAnimatedProps(() => { + const fill = interpolateColor(animatedValue.value, [0, 1], [themeColors.textLight, themeColors.textDark]); + + return { + fill, + }; + }); + + return ( + + + + ); +} + +FABPlusIcon.propTypes = propTypes; +FABPlusIcon.displayName = 'FABPlusIcon'; + +export default FABPlusIcon; diff --git a/src/components/FloatingActionButton/FloatingActionButton.js b/src/components/FloatingActionButton/FloatingActionButton.js new file mode 100644 index 000000000000..383bf5cf3537 --- /dev/null +++ b/src/components/FloatingActionButton/FloatingActionButton.js @@ -0,0 +1,77 @@ +import React, {useEffect, useRef} from 'react'; +import {View} from 'react-native'; +import Animated, {useSharedValue, useAnimatedStyle, withTiming, Easing, interpolateColor} from 'react-native-reanimated'; +import PropTypes from 'prop-types'; +import styles from '../../styles/styles'; +import themeColors from '../../styles/themes/default'; +import Tooltip from '../Tooltip'; +import PressableWithFeedback from '../Pressable/PressableWithFeedback'; +import useLocalize from '../../hooks/useLocalize'; +import {withLocalizePropTypes} from '../withLocalize'; +import FABPlusIcon from './FABPlusIcon'; + +const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); + +const propTypes = { + /* Callback to fire on request to toggle the FloatingActionButton */ + onPress: PropTypes.func.isRequired, + /* Current state (active or not active) of the component */ + isActive: PropTypes.bool.isRequired, + + ...withLocalizePropTypes, +}; + +const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, accessibilityRole}, ref) => { + const {translate} = useLocalize(); + const fabPressable = useRef(null); + const animatedValue = useSharedValue(isActive ? 1 : 0); + + useEffect(() => { + animatedValue.value = withTiming(isActive ? 1 : 0, { + duration: 340, + easing: Easing.inOut(Easing.ease), + }); + }, [isActive, animatedValue]); + + const animatedStyle = useAnimatedStyle(() => { + const backgroundColor = interpolateColor(animatedValue.value, [0, 1], [themeColors.success, themeColors.buttonDefaultBG]); + + return { + transform: [{rotate: `${animatedValue.value * 135}deg`}], + backgroundColor, + }; + }); + + return ( + + + { + fabPressable.current = el; + if (ref) { + // eslint-disable-next-line no-param-reassign + ref.current = el; + } + }} + accessibilityLabel={accessibilityLabel} + accessibilityRole={accessibilityRole} + pressDimmingValue={1} + onPress={(e) => { + // Drop focus to avoid blue focus ring. + fabPressable.current.blur(); + onPress(e); + }} + onLongPress={() => {}} + style={[styles.floatingActionButton, animatedStyle]} + > + + + + + ); +}); + +FloatingActionButton.propTypes = propTypes; +FloatingActionButton.displayName = 'FloatingActionButton'; + +export default FloatingActionButton; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 5aac15ff0625..1eb3b7fa40c0 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -47,7 +47,7 @@ const defaultProps = { pressed: false, }; -function Icon({src, width, height, fill, small, inline, additionalStyles, hovered, pressed}) { +const Icon = React.forwardRef(({src, width, height, fill, small, inline, additionalStyles, hovered, pressed}, ref) => { const effectiveWidth = small ? variables.iconSizeSmall : width; const effectiveHeight = small ? variables.iconSizeSmall : height; const iconStyles = [StyleUtils.getWidthAndHeightStyle(effectiveWidth, effectiveHeight), IconWrapperStyles, styles.pAbsolute, ...additionalStyles]; @@ -57,8 +57,9 @@ function Icon({src, width, height, fill, small, inline, additionalStyles, hovere if (inline) { return ( @@ -87,7 +89,7 @@ function Icon({src, width, height, fill, small, inline, additionalStyles, hovere /> ); -} +}); Icon.propTypes = propTypes; Icon.defaultProps = defaultProps; diff --git a/src/components/withAnimated.js b/src/components/withAnimated.js deleted file mode 100644 index cdf8c1d4c294..000000000000 --- a/src/components/withAnimated.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import {Animated} from 'react-native'; - -function withAnimated(WrappedComponent) { - // eslint-disable-next-line react/prefer-stateless-function - class WithAnimated extends React.Component { - render() { - // eslint-disable-next-line react/jsx-props-no-spreading - return ; - } - } - - const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; - WithAnimated.displayName = `WithAnimated(${displayName})`; - - return Animated.createAnimatedComponent(WithAnimated); -} -export default withAnimated; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index abade067f4fc..2f37de8a2d9f 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -14,7 +14,7 @@ import * as Policy from '../../../../libs/actions/Policy'; import * as PolicyUtils from '../../../../libs/PolicyUtils'; import PopoverMenu from '../../../../components/PopoverMenu'; import CONST from '../../../../CONST'; -import FloatingActionButton from '../../../../components/FloatingActionButton'; +import FloatingActionButton from '../../../../components/FloatingActionButton/FloatingActionButton'; import compose from '../../../../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import withWindowDimensions from '../../../../components/withWindowDimensions'; diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index fe910389c39c..69ee87c27ebd 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -513,18 +513,6 @@ function getIconFillColor(buttonState = CONST.BUTTON_STATES.DEFAULT, isMenuIcon } } -/** - * @param {Animated.Value} rotate - * @param {Animated.Value} backgroundColor - * @returns {Object} - */ -function getAnimatedFABStyle(rotate, backgroundColor) { - return { - transform: [{rotate}], - backgroundColor, - }; -} - /** * @param {Number} width * @param {Number | null} height @@ -1325,7 +1313,6 @@ export { getBadgeColorStyle, getButtonBackgroundColorStyle, getIconFillColor, - getAnimatedFABStyle, getWidthAndHeightStyle, getModalPaddingStyles, getFontFamilyMonospace, From 062b7a6b92ddf11b1122a63d5416b823f5bdd31f Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 4 Sep 2023 12:01:58 +0100 Subject: [PATCH 08/34] Delete .gitconfig --- .gitconfig | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 .gitconfig diff --git a/.gitconfig b/.gitconfig deleted file mode 100644 index 8354e2bc0e3f..000000000000 --- a/.gitconfig +++ /dev/null @@ -1,8 +0,0 @@ -[commit] - gpgsign = true -[user] - email = 77965000+rayane-djouah@users.noreply.github.com - name = Rayane Djouah - signingkey = D23D62C4BF91F160 -[gpg] - program = gpg \ No newline at end of file From 08ac9fe36fb17920611033e71f7c8ed83eb070c0 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 4 Sep 2023 11:38:04 +0000 Subject: [PATCH 09/34] refactor FloatingActionButton ref use, and renam the file to index.js --- .../{FloatingActionButton.js => index.js} | 7 ++++--- .../SidebarScreen/FloatingActionButtonAndPopover.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) rename src/components/FloatingActionButton/{FloatingActionButton.js => index.js} (94%) diff --git a/src/components/FloatingActionButton/FloatingActionButton.js b/src/components/FloatingActionButton/index.js similarity index 94% rename from src/components/FloatingActionButton/FloatingActionButton.js rename to src/components/FloatingActionButton/index.js index 383bf5cf3537..d39b86af5267 100644 --- a/src/components/FloatingActionButton/FloatingActionButton.js +++ b/src/components/FloatingActionButton/index.js @@ -11,6 +11,7 @@ import {withLocalizePropTypes} from '../withLocalize'; import FABPlusIcon from './FABPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); +AnimatedPressable.displayName = 'AnimatedPressable'; const propTypes = { /* Callback to fire on request to toggle the FloatingActionButton */ @@ -25,6 +26,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility const {translate} = useLocalize(); const fabPressable = useRef(null); const animatedValue = useSharedValue(isActive ? 1 : 0); + const buttonRef = ref; useEffect(() => { animatedValue.value = withTiming(isActive ? 1 : 0, { @@ -48,9 +50,8 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility { fabPressable.current = el; - if (ref) { - // eslint-disable-next-line no-param-reassign - ref.current = el; + if (buttonRef) { + buttonRef.current = el; } }} accessibilityLabel={accessibilityLabel} diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 2f37de8a2d9f..abade067f4fc 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -14,7 +14,7 @@ import * as Policy from '../../../../libs/actions/Policy'; import * as PolicyUtils from '../../../../libs/PolicyUtils'; import PopoverMenu from '../../../../components/PopoverMenu'; import CONST from '../../../../CONST'; -import FloatingActionButton from '../../../../components/FloatingActionButton/FloatingActionButton'; +import FloatingActionButton from '../../../../components/FloatingActionButton'; import compose from '../../../../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import withWindowDimensions from '../../../../components/withWindowDimensions'; From 4f20a47d688e3d457aac1899509d976665fb9acd Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 4 Sep 2023 11:41:20 +0000 Subject: [PATCH 10/34] rename FabPlusIcon component --- src/components/FloatingActionButton/FABPlusIcon.js | 8 ++++---- src/components/FloatingActionButton/index.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/FloatingActionButton/FABPlusIcon.js b/src/components/FloatingActionButton/FABPlusIcon.js index 20d963f341e6..a3f7f5b5164c 100644 --- a/src/components/FloatingActionButton/FABPlusIcon.js +++ b/src/components/FloatingActionButton/FABPlusIcon.js @@ -11,7 +11,7 @@ const propTypes = { isActive: PropTypes.bool.isRequired, }; -function FABPlusIcon({isActive}) { +function FabPlusIcon({isActive}) { const animatedValue = useSharedValue(isActive ? 1 : 0); useEffect(() => { @@ -41,7 +41,7 @@ function FABPlusIcon({isActive}) { ); } -FABPlusIcon.propTypes = propTypes; -FABPlusIcon.displayName = 'FABPlusIcon'; +FabPlusIcon.propTypes = propTypes; +FabPlusIcon.displayName = 'FabPlusIcon'; -export default FABPlusIcon; +export default FabPlusIcon; diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index d39b86af5267..671521bf3e80 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -8,7 +8,7 @@ import Tooltip from '../Tooltip'; import PressableWithFeedback from '../Pressable/PressableWithFeedback'; import useLocalize from '../../hooks/useLocalize'; import {withLocalizePropTypes} from '../withLocalize'; -import FABPlusIcon from './FABPlusIcon'; +import FabPlusIcon from './FabPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); AnimatedPressable.displayName = 'AnimatedPressable'; @@ -65,7 +65,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility onLongPress={() => {}} style={[styles.floatingActionButton, animatedStyle]} > - + From 5cb09cc7d6b20f4a7cae954634dae268c9391761 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 4 Sep 2023 11:46:46 +0000 Subject: [PATCH 11/34] rename FabPlusIcon component --- .../FloatingActionButton/{FABPlusIcon.js => FabPlusIcon.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/FloatingActionButton/{FABPlusIcon.js => FabPlusIcon.js} (100%) diff --git a/src/components/FloatingActionButton/FABPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js similarity index 100% rename from src/components/FloatingActionButton/FABPlusIcon.js rename to src/components/FloatingActionButton/FabPlusIcon.js From 9fe112536a8271a891a067b69caa21f2977aa7eb Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 9 Sep 2023 16:38:35 +0200 Subject: [PATCH 12/34] run prettier --- src/styles/StyleUtils.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 56d16b7f26f1..99de705b5d9e 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -491,8 +491,6 @@ function getIconFillColor(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEF } } - - function getWidthAndHeightStyle(width: number, height: number | undefined = undefined): ViewStyle | CSSProperties { return { width, From 43373cf3e4c60f0a1e50df0164dc670d4abb53da Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 15 Sep 2023 11:10:08 +0000 Subject: [PATCH 13/34] remove unused proptypes and add missing ones --- src/components/FloatingActionButton/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 671521bf3e80..513331503d79 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -7,7 +7,6 @@ import themeColors from '../../styles/themes/default'; import Tooltip from '../Tooltip'; import PressableWithFeedback from '../Pressable/PressableWithFeedback'; import useLocalize from '../../hooks/useLocalize'; -import {withLocalizePropTypes} from '../withLocalize'; import FabPlusIcon from './FabPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); @@ -16,10 +15,15 @@ AnimatedPressable.displayName = 'AnimatedPressable'; const propTypes = { /* Callback to fire on request to toggle the FloatingActionButton */ onPress: PropTypes.func.isRequired, + /* Current state (active or not active) of the component */ isActive: PropTypes.bool.isRequired, - ...withLocalizePropTypes, + /* An accessibility label for the button */ + accessibilityLabel: PropTypes.string.isRequired, + + /* An accessibility role for the button */ + accessibilityRole: PropTypes.string.isRequired, }; const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, accessibilityRole}, ref) => { From 91482f40369141ae03db4c253b9bf731ef9742c0 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:39:22 +0000 Subject: [PATCH 14/34] update react-native-svg --- package-lock.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd763dffefbe..fd19fa880f01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41100,8 +41100,9 @@ } }, "node_modules/react-native-svg": { - "version": "13.9.0", - "license": "MIT", + "version": "13.14.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.14.0.tgz", + "integrity": "sha512-27ZnxUkHgWICimhuj6MuqBkISN53lVvgWJB7pIypjXysAyM+nqgQBPh4vXg+7MbqLBoYvR4PiBgKfwwGAqVxHg==", "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3" @@ -76801,7 +76802,9 @@ } }, "react-native-svg": { - "version": "13.9.0", + "version": "13.14.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.14.0.tgz", + "integrity": "sha512-27ZnxUkHgWICimhuj6MuqBkISN53lVvgWJB7pIypjXysAyM+nqgQBPh4vXg+7MbqLBoYvR4PiBgKfwwGAqVxHg==", "requires": { "css-select": "^5.1.0", "css-tree": "^1.1.3" From 8e060c357a33ac61686c6405b7d2cd62cc51c82e Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Sep 2023 14:35:06 +0000 Subject: [PATCH 15/34] fix Typescript error --- src/components/MapView/PendingMapView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 6a35d2a9c369..6e6fcf6d5963 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -23,7 +23,7 @@ function PendingMapView({title = '', subtitle = ''}: PendingMapViewProps) { ) : ( From 8eb99b14fd3afa046cf817b21cd67b67ecc1f893 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 23 Sep 2023 18:13:29 +0000 Subject: [PATCH 16/34] revert latest change --- src/components/MapView/PendingMapView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 6e6fcf6d5963..6a35d2a9c369 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -23,7 +23,7 @@ function PendingMapView({title = '', subtitle = ''}: PendingMapViewProps) { ) : ( From a8406e0051bfd4fde97c04ad017e549be28fd829 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 23 Sep 2023 19:32:45 +0000 Subject: [PATCH 17/34] remove forwarding ref --- src/components/Icon/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 1eb3b7fa40c0..11456d6da807 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -47,7 +47,7 @@ const defaultProps = { pressed: false, }; -const Icon = React.forwardRef(({src, width, height, fill, small, inline, additionalStyles, hovered, pressed}, ref) => { +function Icon({src, width, height, fill, small, inline, additionalStyles, hovered, pressed}) { const effectiveWidth = small ? variables.iconSizeSmall : width; const effectiveHeight = small ? variables.iconSizeSmall : height; const iconStyles = [StyleUtils.getWidthAndHeightStyle(effectiveWidth, effectiveHeight), IconWrapperStyles, styles.pAbsolute, ...additionalStyles]; @@ -57,7 +57,6 @@ const Icon = React.forwardRef(({src, width, height, fill, small, inline, additio if (inline) { return ( @@ -76,7 +75,6 @@ const Icon = React.forwardRef(({src, width, height, fill, small, inline, additio return ( @@ -89,7 +87,7 @@ const Icon = React.forwardRef(({src, width, height, fill, small, inline, additio /> ); -}); +} Icon.propTypes = propTypes; Icon.defaultProps = defaultProps; From b88da065666acecd25affe1f01ad10a3d3bdc143 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 28 Sep 2023 13:36:28 +0000 Subject: [PATCH 18/34] Fix (On iOS, the + button is showing as a square): Preserve borderRadius in FloatingActionButton's animated style --- src/components/FloatingActionButton/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 513331503d79..9e73460225c8 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -45,6 +45,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility return { transform: [{rotate: `${animatedValue.value * 135}deg`}], backgroundColor, + borderRadius: styles.floatingActionButton.borderRadius, }; }); From 1ed2d44906dbde3d88c5cc0cd629d7ef416c3b32 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 3 Oct 2023 18:29:53 +0000 Subject: [PATCH 19/34] add easing to FabPlusIcon --- src/components/FloatingActionButton/FabPlusIcon.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index a3f7f5b5164c..8b32a66926a8 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -1,6 +1,6 @@ import React, {useEffect} from 'react'; import PropTypes from 'prop-types'; -import Animated, {useSharedValue, useAnimatedProps, withTiming, interpolateColor} from 'react-native-reanimated'; +import Animated, {useSharedValue, useAnimatedProps, withTiming, interpolateColor, Easing} from 'react-native-reanimated'; import Svg, {Path} from 'react-native-svg'; import themeColors from '../../styles/themes/default'; @@ -17,6 +17,7 @@ function FabPlusIcon({isActive}) { useEffect(() => { animatedValue.value = withTiming(isActive ? 1 : 0, { duration: 340, + easing: Easing.inOut(Easing.ease), }); }, [isActive, animatedValue]); From 6647b2575bb9ec973f37cf5d0013dbde0dfc4cc8 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 8 Oct 2023 19:01:37 +0000 Subject: [PATCH 20/34] bugfix/react-native-reanimated: Fix animated UI Props on Web #5169 --- patches/react-native-reanimated+3.5.4.patch | 383 ++++++++++++++++++++ 1 file changed, 383 insertions(+) create mode 100644 patches/react-native-reanimated+3.5.4.patch diff --git a/patches/react-native-reanimated+3.5.4.patch b/patches/react-native-reanimated+3.5.4.patch new file mode 100644 index 000000000000..bc1b57d46b54 --- /dev/null +++ b/patches/react-native-reanimated+3.5.4.patch @@ -0,0 +1,383 @@ +diff --git a/node_modules/react-native-reanimated/src/ConfigHelper.ts b/node_modules/react-native-reanimated/src/ConfigHelper.ts +index fac2429..c2ae2c9 100644 +--- a/node_modules/react-native-reanimated/src/ConfigHelper.ts ++++ b/node_modules/react-native-reanimated/src/ConfigHelper.ts +@@ -1,148 +1,41 @@ ++'use strict'; ++import { PropsAllowlists } from './propsAllowlists'; + import { configureProps as jsiConfigureProps } from './reanimated2/core'; + +-/** +- * Styles allowed to be direcly updated in UI thread +- */ +-let UI_THREAD_PROPS_WHITELIST: Record = { +- opacity: true, +- transform: true, +- /* colors */ +- backgroundColor: true, +- borderRightColor: true, +- borderBottomColor: true, +- borderColor: true, +- borderEndColor: true, +- borderLeftColor: true, +- borderStartColor: true, +- borderTopColor: true, +- /* ios styles */ +- shadowOpacity: true, +- shadowRadius: true, +- /* legacy android transform properties */ +- scaleX: true, +- scaleY: true, +- translateX: true, +- translateY: true, +-}; +- +-/** +- * Whitelist of view props that can be updated in native thread via UIManagerModule +- */ +-let NATIVE_THREAD_PROPS_WHITELIST: Record = { +- borderBottomWidth: true, +- borderEndWidth: true, +- borderLeftWidth: true, +- borderRightWidth: true, +- borderStartWidth: true, +- borderTopWidth: true, +- borderWidth: true, +- bottom: true, +- flex: true, +- flexGrow: true, +- flexShrink: true, +- height: true, +- left: true, +- margin: true, +- marginBottom: true, +- marginEnd: true, +- marginHorizontal: true, +- marginLeft: true, +- marginRight: true, +- marginStart: true, +- marginTop: true, +- marginVertical: true, +- maxHeight: true, +- maxWidth: true, +- minHeight: true, +- minWidth: true, +- padding: true, +- paddingBottom: true, +- paddingEnd: true, +- paddingHorizontal: true, +- paddingLeft: true, +- paddingRight: true, +- paddingStart: true, +- paddingTop: true, +- paddingVertical: true, +- right: true, +- start: true, +- top: true, +- width: true, +- zIndex: true, +- borderBottomEndRadius: true, +- borderBottomLeftRadius: true, +- borderBottomRightRadius: true, +- borderBottomStartRadius: true, +- borderRadius: true, +- borderTopEndRadius: true, +- borderTopLeftRadius: true, +- borderTopRightRadius: true, +- borderTopStartRadius: true, +- elevation: true, +- fontSize: true, +- lineHeight: true, +- textShadowRadius: true, +- letterSpacing: true, +- aspectRatio: true, +- columnGap: true, // iOS only +- end: true, // number or string +- flexBasis: true, // number or string +- gap: true, +- rowGap: true, +- /* strings */ +- display: true, +- backfaceVisibility: true, +- overflow: true, +- resizeMode: true, +- fontStyle: true, +- fontWeight: true, +- textAlign: true, +- textDecorationLine: true, +- fontFamily: true, +- textAlignVertical: true, +- fontVariant: true, +- textDecorationStyle: true, +- textTransform: true, +- writingDirection: true, +- alignContent: true, +- alignItems: true, +- alignSelf: true, +- direction: true, // iOS only +- flexDirection: true, +- flexWrap: true, +- justifyContent: true, +- position: true, +- /* text color */ +- color: true, +- tintColor: true, +- shadowColor: true, +- placeholderTextColor: true, +-}; +- + function configureProps(): void { + jsiConfigureProps( +- Object.keys(UI_THREAD_PROPS_WHITELIST), +- Object.keys(NATIVE_THREAD_PROPS_WHITELIST) ++ Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST), ++ Object.keys(PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST) + ); + } + + export function addWhitelistedNativeProps( + props: Record + ): void { +- const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length; +- NATIVE_THREAD_PROPS_WHITELIST = { +- ...NATIVE_THREAD_PROPS_WHITELIST, ++ const oldSize = Object.keys( ++ PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST ++ ).length; ++ PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST = { ++ ...PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST, + ...props, + }; +- if (oldSize !== Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length) { ++ if ( ++ oldSize !== ++ Object.keys(PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST).length ++ ) { + configureProps(); + } + } + + export function addWhitelistedUIProps(props: Record): void { +- const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length; +- UI_THREAD_PROPS_WHITELIST = { ...UI_THREAD_PROPS_WHITELIST, ...props }; +- if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) { ++ const oldSize = Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST).length; ++ PropsAllowlists.UI_THREAD_PROPS_WHITELIST = { ++ ...PropsAllowlists.UI_THREAD_PROPS_WHITELIST, ++ ...props, ++ }; ++ if ( ++ oldSize !== Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST).length ++ ) { + configureProps(); + } + } +@@ -169,8 +62,8 @@ export function adaptViewConfig(viewConfig: ViewConfig): void { + // we don't want to add native props as they affect layout + // we also skip props which repeat here + if ( +- !(key in NATIVE_THREAD_PROPS_WHITELIST) && +- !(key in UI_THREAD_PROPS_WHITELIST) ++ !(key in PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST) && ++ !(key in PropsAllowlists.UI_THREAD_PROPS_WHITELIST) + ) { + propsToAdd[key] = true; + } +diff --git a/node_modules/react-native-reanimated/src/propsAllowlists.ts b/node_modules/react-native-reanimated/src/propsAllowlists.ts +new file mode 100644 +index 0000000..893cdfa +--- /dev/null ++++ b/node_modules/react-native-reanimated/src/propsAllowlists.ts +@@ -0,0 +1,125 @@ ++type AllowlistsHolder = { ++ UI_THREAD_PROPS_WHITELIST: Record; ++ NATIVE_THREAD_PROPS_WHITELIST: Record; ++}; ++ ++export const PropsAllowlists: AllowlistsHolder = { ++ /** ++ * Styles allowed to be direcly updated in UI thread ++ */ ++ UI_THREAD_PROPS_WHITELIST: { ++ opacity: true, ++ transform: true, ++ /* colors */ ++ backgroundColor: true, ++ borderRightColor: true, ++ borderBottomColor: true, ++ borderColor: true, ++ borderEndColor: true, ++ borderLeftColor: true, ++ borderStartColor: true, ++ borderTopColor: true, ++ /* ios styles */ ++ shadowOpacity: true, ++ shadowRadius: true, ++ /* legacy android transform properties */ ++ scaleX: true, ++ scaleY: true, ++ translateX: true, ++ translateY: true, ++ }, ++ /** ++ * Whitelist of view props that can be updated in native thread via UIManagerModule ++ */ ++ NATIVE_THREAD_PROPS_WHITELIST: { ++ borderBottomWidth: true, ++ borderEndWidth: true, ++ borderLeftWidth: true, ++ borderRightWidth: true, ++ borderStartWidth: true, ++ borderTopWidth: true, ++ borderWidth: true, ++ bottom: true, ++ flex: true, ++ flexGrow: true, ++ flexShrink: true, ++ height: true, ++ left: true, ++ margin: true, ++ marginBottom: true, ++ marginEnd: true, ++ marginHorizontal: true, ++ marginLeft: true, ++ marginRight: true, ++ marginStart: true, ++ marginTop: true, ++ marginVertical: true, ++ maxHeight: true, ++ maxWidth: true, ++ minHeight: true, ++ minWidth: true, ++ padding: true, ++ paddingBottom: true, ++ paddingEnd: true, ++ paddingHorizontal: true, ++ paddingLeft: true, ++ paddingRight: true, ++ paddingStart: true, ++ paddingTop: true, ++ paddingVertical: true, ++ right: true, ++ start: true, ++ top: true, ++ width: true, ++ zIndex: true, ++ borderBottomEndRadius: true, ++ borderBottomLeftRadius: true, ++ borderBottomRightRadius: true, ++ borderBottomStartRadius: true, ++ borderRadius: true, ++ borderTopEndRadius: true, ++ borderTopLeftRadius: true, ++ borderTopRightRadius: true, ++ borderTopStartRadius: true, ++ elevation: true, ++ fontSize: true, ++ lineHeight: true, ++ textShadowRadius: true, ++ textShadowOffset: true, ++ letterSpacing: true, ++ aspectRatio: true, ++ columnGap: true, // iOS only ++ end: true, // number or string ++ flexBasis: true, // number or string ++ gap: true, ++ rowGap: true, ++ /* strings */ ++ display: true, ++ backfaceVisibility: true, ++ overflow: true, ++ resizeMode: true, ++ fontStyle: true, ++ fontWeight: true, ++ textAlign: true, ++ textDecorationLine: true, ++ fontFamily: true, ++ textAlignVertical: true, ++ fontVariant: true, ++ textDecorationStyle: true, ++ textTransform: true, ++ writingDirection: true, ++ alignContent: true, ++ alignItems: true, ++ alignSelf: true, ++ direction: true, // iOS only ++ flexDirection: true, ++ flexWrap: true, ++ justifyContent: true, ++ position: true, ++ /* text color */ ++ color: true, ++ tintColor: true, ++ shadowColor: true, ++ placeholderTextColor: true, ++ }, ++}; +diff --git a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts +index c218fa0..2ea9523 100644 +--- a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts ++++ b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts +@@ -1,7 +1,9 @@ ++'use strict'; + import JSReanimated from './JSReanimated'; + import type { StyleProps } from '../commonTypes'; + import type { AnimatedStyle } from '../helperTypes'; + import { isWeb } from '../PlatformChecker'; ++import { PropsAllowlists } from '../../propsAllowlists'; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let createReactDOMStyle: (style: any) => any; +@@ -54,9 +56,18 @@ interface JSReanimatedComponent { + }; + } + ++export interface ReanimatedHTMLElement extends HTMLElement { ++ previousStyle: StyleProps; ++ setNativeProps?: (style: StyleProps) => void; ++ props: Record; ++ _touchableNode: { ++ setAttribute: (key: string, props: unknown) => void; ++ }; ++} ++ + export const _updatePropsJS = ( + updates: StyleProps | AnimatedStyle, +- viewRef: { _component?: JSReanimatedComponent }, ++ viewRef: { _component?: JSReanimatedComponent | ReanimatedHTMLElement }, + isAnimatedProps?: boolean + ): void => { + if (viewRef._component) { +@@ -98,13 +109,20 @@ export const _updatePropsJS = ( + }; + + const setNativeProps = ( +- component: JSReanimatedComponent, ++ component: JSReanimatedComponent | ReanimatedHTMLElement, + newProps: StyleProps, + isAnimatedProps?: boolean + ): void => { + if (isAnimatedProps) { +- component.setNativeProps?.(newProps); +- return; ++ const uiProps: Record = {}; ++ for (const key in newProps) { ++ if (isNativeProp(key)) { ++ uiProps[key] = newProps[key]; ++ } ++ } ++ // Only update UI props directly on the component, ++ // other props can be updated as standard style props. ++ component.setNativeProps?.(uiProps); + } + + const previousStyle = component.previousStyle ? component.previousStyle : {}; +@@ -152,4 +170,8 @@ const updatePropsDOM = ( + } + }; + ++function isNativeProp(propName: string): boolean { ++ return !!PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST[propName]; ++} ++ + export default reanimatedJS; From 31939a494a7fb8db103818815df7f8d0f6d2b039 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 8 Oct 2023 19:55:56 +0000 Subject: [PATCH 21/34] delete react-native-reanimated patch --- patches/react-native-reanimated+3.5.4.patch | 383 -------------------- 1 file changed, 383 deletions(-) delete mode 100644 patches/react-native-reanimated+3.5.4.patch diff --git a/patches/react-native-reanimated+3.5.4.patch b/patches/react-native-reanimated+3.5.4.patch deleted file mode 100644 index bc1b57d46b54..000000000000 --- a/patches/react-native-reanimated+3.5.4.patch +++ /dev/null @@ -1,383 +0,0 @@ -diff --git a/node_modules/react-native-reanimated/src/ConfigHelper.ts b/node_modules/react-native-reanimated/src/ConfigHelper.ts -index fac2429..c2ae2c9 100644 ---- a/node_modules/react-native-reanimated/src/ConfigHelper.ts -+++ b/node_modules/react-native-reanimated/src/ConfigHelper.ts -@@ -1,148 +1,41 @@ -+'use strict'; -+import { PropsAllowlists } from './propsAllowlists'; - import { configureProps as jsiConfigureProps } from './reanimated2/core'; - --/** -- * Styles allowed to be direcly updated in UI thread -- */ --let UI_THREAD_PROPS_WHITELIST: Record = { -- opacity: true, -- transform: true, -- /* colors */ -- backgroundColor: true, -- borderRightColor: true, -- borderBottomColor: true, -- borderColor: true, -- borderEndColor: true, -- borderLeftColor: true, -- borderStartColor: true, -- borderTopColor: true, -- /* ios styles */ -- shadowOpacity: true, -- shadowRadius: true, -- /* legacy android transform properties */ -- scaleX: true, -- scaleY: true, -- translateX: true, -- translateY: true, --}; -- --/** -- * Whitelist of view props that can be updated in native thread via UIManagerModule -- */ --let NATIVE_THREAD_PROPS_WHITELIST: Record = { -- borderBottomWidth: true, -- borderEndWidth: true, -- borderLeftWidth: true, -- borderRightWidth: true, -- borderStartWidth: true, -- borderTopWidth: true, -- borderWidth: true, -- bottom: true, -- flex: true, -- flexGrow: true, -- flexShrink: true, -- height: true, -- left: true, -- margin: true, -- marginBottom: true, -- marginEnd: true, -- marginHorizontal: true, -- marginLeft: true, -- marginRight: true, -- marginStart: true, -- marginTop: true, -- marginVertical: true, -- maxHeight: true, -- maxWidth: true, -- minHeight: true, -- minWidth: true, -- padding: true, -- paddingBottom: true, -- paddingEnd: true, -- paddingHorizontal: true, -- paddingLeft: true, -- paddingRight: true, -- paddingStart: true, -- paddingTop: true, -- paddingVertical: true, -- right: true, -- start: true, -- top: true, -- width: true, -- zIndex: true, -- borderBottomEndRadius: true, -- borderBottomLeftRadius: true, -- borderBottomRightRadius: true, -- borderBottomStartRadius: true, -- borderRadius: true, -- borderTopEndRadius: true, -- borderTopLeftRadius: true, -- borderTopRightRadius: true, -- borderTopStartRadius: true, -- elevation: true, -- fontSize: true, -- lineHeight: true, -- textShadowRadius: true, -- letterSpacing: true, -- aspectRatio: true, -- columnGap: true, // iOS only -- end: true, // number or string -- flexBasis: true, // number or string -- gap: true, -- rowGap: true, -- /* strings */ -- display: true, -- backfaceVisibility: true, -- overflow: true, -- resizeMode: true, -- fontStyle: true, -- fontWeight: true, -- textAlign: true, -- textDecorationLine: true, -- fontFamily: true, -- textAlignVertical: true, -- fontVariant: true, -- textDecorationStyle: true, -- textTransform: true, -- writingDirection: true, -- alignContent: true, -- alignItems: true, -- alignSelf: true, -- direction: true, // iOS only -- flexDirection: true, -- flexWrap: true, -- justifyContent: true, -- position: true, -- /* text color */ -- color: true, -- tintColor: true, -- shadowColor: true, -- placeholderTextColor: true, --}; -- - function configureProps(): void { - jsiConfigureProps( -- Object.keys(UI_THREAD_PROPS_WHITELIST), -- Object.keys(NATIVE_THREAD_PROPS_WHITELIST) -+ Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST), -+ Object.keys(PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST) - ); - } - - export function addWhitelistedNativeProps( - props: Record - ): void { -- const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length; -- NATIVE_THREAD_PROPS_WHITELIST = { -- ...NATIVE_THREAD_PROPS_WHITELIST, -+ const oldSize = Object.keys( -+ PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST -+ ).length; -+ PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST = { -+ ...PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST, - ...props, - }; -- if (oldSize !== Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length) { -+ if ( -+ oldSize !== -+ Object.keys(PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST).length -+ ) { - configureProps(); - } - } - - export function addWhitelistedUIProps(props: Record): void { -- const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length; -- UI_THREAD_PROPS_WHITELIST = { ...UI_THREAD_PROPS_WHITELIST, ...props }; -- if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) { -+ const oldSize = Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST).length; -+ PropsAllowlists.UI_THREAD_PROPS_WHITELIST = { -+ ...PropsAllowlists.UI_THREAD_PROPS_WHITELIST, -+ ...props, -+ }; -+ if ( -+ oldSize !== Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST).length -+ ) { - configureProps(); - } - } -@@ -169,8 +62,8 @@ export function adaptViewConfig(viewConfig: ViewConfig): void { - // we don't want to add native props as they affect layout - // we also skip props which repeat here - if ( -- !(key in NATIVE_THREAD_PROPS_WHITELIST) && -- !(key in UI_THREAD_PROPS_WHITELIST) -+ !(key in PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST) && -+ !(key in PropsAllowlists.UI_THREAD_PROPS_WHITELIST) - ) { - propsToAdd[key] = true; - } -diff --git a/node_modules/react-native-reanimated/src/propsAllowlists.ts b/node_modules/react-native-reanimated/src/propsAllowlists.ts -new file mode 100644 -index 0000000..893cdfa ---- /dev/null -+++ b/node_modules/react-native-reanimated/src/propsAllowlists.ts -@@ -0,0 +1,125 @@ -+type AllowlistsHolder = { -+ UI_THREAD_PROPS_WHITELIST: Record; -+ NATIVE_THREAD_PROPS_WHITELIST: Record; -+}; -+ -+export const PropsAllowlists: AllowlistsHolder = { -+ /** -+ * Styles allowed to be direcly updated in UI thread -+ */ -+ UI_THREAD_PROPS_WHITELIST: { -+ opacity: true, -+ transform: true, -+ /* colors */ -+ backgroundColor: true, -+ borderRightColor: true, -+ borderBottomColor: true, -+ borderColor: true, -+ borderEndColor: true, -+ borderLeftColor: true, -+ borderStartColor: true, -+ borderTopColor: true, -+ /* ios styles */ -+ shadowOpacity: true, -+ shadowRadius: true, -+ /* legacy android transform properties */ -+ scaleX: true, -+ scaleY: true, -+ translateX: true, -+ translateY: true, -+ }, -+ /** -+ * Whitelist of view props that can be updated in native thread via UIManagerModule -+ */ -+ NATIVE_THREAD_PROPS_WHITELIST: { -+ borderBottomWidth: true, -+ borderEndWidth: true, -+ borderLeftWidth: true, -+ borderRightWidth: true, -+ borderStartWidth: true, -+ borderTopWidth: true, -+ borderWidth: true, -+ bottom: true, -+ flex: true, -+ flexGrow: true, -+ flexShrink: true, -+ height: true, -+ left: true, -+ margin: true, -+ marginBottom: true, -+ marginEnd: true, -+ marginHorizontal: true, -+ marginLeft: true, -+ marginRight: true, -+ marginStart: true, -+ marginTop: true, -+ marginVertical: true, -+ maxHeight: true, -+ maxWidth: true, -+ minHeight: true, -+ minWidth: true, -+ padding: true, -+ paddingBottom: true, -+ paddingEnd: true, -+ paddingHorizontal: true, -+ paddingLeft: true, -+ paddingRight: true, -+ paddingStart: true, -+ paddingTop: true, -+ paddingVertical: true, -+ right: true, -+ start: true, -+ top: true, -+ width: true, -+ zIndex: true, -+ borderBottomEndRadius: true, -+ borderBottomLeftRadius: true, -+ borderBottomRightRadius: true, -+ borderBottomStartRadius: true, -+ borderRadius: true, -+ borderTopEndRadius: true, -+ borderTopLeftRadius: true, -+ borderTopRightRadius: true, -+ borderTopStartRadius: true, -+ elevation: true, -+ fontSize: true, -+ lineHeight: true, -+ textShadowRadius: true, -+ textShadowOffset: true, -+ letterSpacing: true, -+ aspectRatio: true, -+ columnGap: true, // iOS only -+ end: true, // number or string -+ flexBasis: true, // number or string -+ gap: true, -+ rowGap: true, -+ /* strings */ -+ display: true, -+ backfaceVisibility: true, -+ overflow: true, -+ resizeMode: true, -+ fontStyle: true, -+ fontWeight: true, -+ textAlign: true, -+ textDecorationLine: true, -+ fontFamily: true, -+ textAlignVertical: true, -+ fontVariant: true, -+ textDecorationStyle: true, -+ textTransform: true, -+ writingDirection: true, -+ alignContent: true, -+ alignItems: true, -+ alignSelf: true, -+ direction: true, // iOS only -+ flexDirection: true, -+ flexWrap: true, -+ justifyContent: true, -+ position: true, -+ /* text color */ -+ color: true, -+ tintColor: true, -+ shadowColor: true, -+ placeholderTextColor: true, -+ }, -+}; -diff --git a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts -index c218fa0..2ea9523 100644 ---- a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts -+++ b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts -@@ -1,7 +1,9 @@ -+'use strict'; - import JSReanimated from './JSReanimated'; - import type { StyleProps } from '../commonTypes'; - import type { AnimatedStyle } from '../helperTypes'; - import { isWeb } from '../PlatformChecker'; -+import { PropsAllowlists } from '../../propsAllowlists'; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - let createReactDOMStyle: (style: any) => any; -@@ -54,9 +56,18 @@ interface JSReanimatedComponent { - }; - } - -+export interface ReanimatedHTMLElement extends HTMLElement { -+ previousStyle: StyleProps; -+ setNativeProps?: (style: StyleProps) => void; -+ props: Record; -+ _touchableNode: { -+ setAttribute: (key: string, props: unknown) => void; -+ }; -+} -+ - export const _updatePropsJS = ( - updates: StyleProps | AnimatedStyle, -- viewRef: { _component?: JSReanimatedComponent }, -+ viewRef: { _component?: JSReanimatedComponent | ReanimatedHTMLElement }, - isAnimatedProps?: boolean - ): void => { - if (viewRef._component) { -@@ -98,13 +109,20 @@ export const _updatePropsJS = ( - }; - - const setNativeProps = ( -- component: JSReanimatedComponent, -+ component: JSReanimatedComponent | ReanimatedHTMLElement, - newProps: StyleProps, - isAnimatedProps?: boolean - ): void => { - if (isAnimatedProps) { -- component.setNativeProps?.(newProps); -- return; -+ const uiProps: Record = {}; -+ for (const key in newProps) { -+ if (isNativeProp(key)) { -+ uiProps[key] = newProps[key]; -+ } -+ } -+ // Only update UI props directly on the component, -+ // other props can be updated as standard style props. -+ component.setNativeProps?.(uiProps); - } - - const previousStyle = component.previousStyle ? component.previousStyle : {}; -@@ -152,4 +170,8 @@ const updatePropsDOM = ( - } - }; - -+function isNativeProp(propName: string): boolean { -+ return !!PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST[propName]; -+} -+ - export default reanimatedJS; From 079595276a923be4922abc7c3eca933f1f72d55b Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 8 Oct 2023 19:57:57 +0000 Subject: [PATCH 22/34] fix size --- 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 2e2b0b826516..8b32a66926a8 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import Animated, {useSharedValue, useAnimatedProps, withTiming, interpolateColor, Easing} from 'react-native-reanimated'; import Svg, {Path} from 'react-native-svg'; import themeColors from '../../styles/themes/default'; -import variables from '../../styles/variables'; const AnimatedPath = Animated.createAnimatedComponent(Path); @@ -32,8 +31,8 @@ function FabPlusIcon({isActive}) { return ( Date: Thu, 30 Nov 2023 00:19:55 +0100 Subject: [PATCH 23/34] move Fab files to components dir --- .../{FloatingActionButton => }/FabPlusIcon.js | 2 +- .../index.js => FloatingActionButton.js} | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) rename src/components/{FloatingActionButton => }/FabPlusIcon.js (96%) rename src/components/{FloatingActionButton/index.js => FloatingActionButton.js} (90%) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FabPlusIcon.js similarity index 96% rename from src/components/FloatingActionButton/FabPlusIcon.js rename to src/components/FabPlusIcon.js index 8b32a66926a8..e7cf9d66d47d 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FabPlusIcon.js @@ -2,7 +2,7 @@ import React, {useEffect} from 'react'; import PropTypes from 'prop-types'; import Animated, {useSharedValue, useAnimatedProps, withTiming, interpolateColor, Easing} from 'react-native-reanimated'; import Svg, {Path} from 'react-native-svg'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../styles/themes/default'; const AnimatedPath = Animated.createAnimatedComponent(Path); diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton.js similarity index 90% rename from src/components/FloatingActionButton/index.js rename to src/components/FloatingActionButton.js index 9e73460225c8..d3dee9be10b5 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton.js @@ -2,12 +2,12 @@ import React, {useEffect, useRef} from 'react'; import {View} from 'react-native'; import Animated, {useSharedValue, useAnimatedStyle, withTiming, Easing, interpolateColor} from 'react-native-reanimated'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; -import Tooltip from '../Tooltip'; -import PressableWithFeedback from '../Pressable/PressableWithFeedback'; -import useLocalize from '../../hooks/useLocalize'; -import FabPlusIcon from './FabPlusIcon'; +import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; +import Tooltip from './Tooltip'; +import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import useLocalize from '../hooks/useLocalize'; +import FabPlusIcon from './FloatingActionButton/FabPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); AnimatedPressable.displayName = 'AnimatedPressable'; From 5921a2caaa43ceef675bd30403769ab3e1a935ec Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 30 Nov 2023 13:35:50 +0100 Subject: [PATCH 24/34] move FAB files to FAB dir --- src/components/{ => FloatingActionButton}/FabPlusIcon.js | 0 .../index.js} | 8 ++++---- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/components/{ => FloatingActionButton}/FabPlusIcon.js (100%) rename src/components/{FloatingActionButton.js => FloatingActionButton/index.js} (91%) diff --git a/src/components/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js similarity index 100% rename from src/components/FabPlusIcon.js rename to src/components/FloatingActionButton/FabPlusIcon.js diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton/index.js similarity index 91% rename from src/components/FloatingActionButton.js rename to src/components/FloatingActionButton/index.js index 4b276299397c..6f40212200d4 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton/index.js @@ -2,14 +2,14 @@ import PropTypes from 'prop-types'; import React, {useEffect, useRef} from 'react'; import {View} from 'react-native'; import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; +import withTheme, {withThemePropTypes} from '@components/withTheme'; +import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import useLocalize from '@hooks/useLocalize'; import compose from '@libs/compose'; import styles from '@styles/styles'; import FabPlusIcon from './FabPlusIcon'; -import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import Tooltip from './Tooltip/PopoverAnchorTooltip'; -import withTheme, {withThemePropTypes} from './withTheme'; -import withThemeStyles, {withThemeStylesPropTypes} from './withThemeStyles'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); AnimatedPressable.displayName = 'AnimatedPressable'; From 5d5ab515d153e133ec89557e61ba34a449fa5672 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 30 Nov 2023 13:58:26 +0100 Subject: [PATCH 25/34] update react-native-reanimated to 3.6.0 --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 09644bce629c..29c40ef98b4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -101,7 +101,7 @@ "react-native-plaid-link-sdk": "10.8.0", "react-native-qrcode-svg": "^6.2.0", "react-native-quick-sqlite": "^8.0.0-beta.2", - "react-native-reanimated": "3.5.4", + "react-native-reanimated": "^3.6.0", "react-native-render-html": "6.3.1", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.21.0", @@ -44571,9 +44571,9 @@ } }, "node_modules/react-native-reanimated": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.5.4.tgz", - "integrity": "sha512-8we9LLDO1o4Oj9/DICeEJ2K1tjfqkJagqQUglxeUAkol/HcEJ6PGxIrpBcNryLqCDYEcu6FZWld/FzizBIw6bg==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz", + "integrity": "sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q==", "dependencies": { "@babel/plugin-transform-object-assign": "^7.16.7", "@babel/preset-typescript": "^7.16.7", @@ -84901,9 +84901,9 @@ "requires": {} }, "react-native-reanimated": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.5.4.tgz", - "integrity": "sha512-8we9LLDO1o4Oj9/DICeEJ2K1tjfqkJagqQUglxeUAkol/HcEJ6PGxIrpBcNryLqCDYEcu6FZWld/FzizBIw6bg==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz", + "integrity": "sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q==", "requires": { "@babel/plugin-transform-object-assign": "^7.16.7", "@babel/preset-typescript": "^7.16.7", diff --git a/package.json b/package.json index bd93d153190d..5b779d1ebe84 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "react-native-plaid-link-sdk": "10.8.0", "react-native-qrcode-svg": "^6.2.0", "react-native-quick-sqlite": "^8.0.0-beta.2", - "react-native-reanimated": "3.5.4", + "react-native-reanimated": "^3.6.0", "react-native-render-html": "6.3.1", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.21.0", From 67751ef2a2f6ffc5314b91973fd26f94cdeee245 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:46:04 +0100 Subject: [PATCH 26/34] fix lint errors --- src/components/Icon/index.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index e17202a73c0b..00f308a5f26e 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -47,7 +47,7 @@ type IconProps = { const defaultProps = { width: variables.iconSizeNormal, height: variables.iconSizeNormal, - fill: themeColors.icon, + fill: undefined, small: false, inline: false, additionalStyles: [], @@ -55,10 +55,12 @@ const defaultProps = { pressed: false, }; -function Icon({src, width, height, fill, small, inline, hovered, pressed, themeStyles, additionalStyles}: IconProps) { - const effectiveWidth = small ? variables.iconSizeSmall : width; - const effectiveHeight = small ? variables.iconSizeSmall : height; +function Icon({src, width, height, fill, small, inline, hovered, pressed, theme, themeStyles, additionalStyles}: IconProps) { + const iconWidth = small ? variables.iconSizeSmall : width; + const iconHeight = small ? variables.iconSizeSmall : height; const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, themeStyles.pAbsolute, additionalStyles]; + const iconFill = fill ?? theme.icon; + const IconComponent = src; if (inline) { return ( @@ -68,9 +70,9 @@ function Icon({src, width, height, fill, small, inline, hovered, pressed, themeS > @@ -85,9 +87,9 @@ function Icon({src, width, height, fill, small, inline, hovered, pressed, themeS style={additionalStyles} > @@ -98,4 +100,4 @@ function Icon({src, width, height, fill, small, inline, hovered, pressed, themeS Icon.defaultProps = defaultProps; Icon.displayName = 'Icon'; -export default withThemeStyles(Icon); +export default withTheme(withThemeStyles(Icon)); From 630c3f6fabc10d1f5b3ab2c496cbd12a0b687633 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 30 Nov 2023 15:47:21 +0100 Subject: [PATCH 27/34] rename back accessibility role prop --- src/components/FloatingActionButton/index.js | 6 +++--- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 6f40212200d4..cc4dc7a0a135 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -25,13 +25,13 @@ const propTypes = { accessibilityLabel: PropTypes.string.isRequired, /* An accessibility role for the button */ - accessibilityRole: PropTypes.string.isRequired, + role: PropTypes.string.isRequired, ...withThemeStylesPropTypes, ...withThemePropTypes, }; -const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, accessibilityRole, theme, themeStyles}, ref) => { +const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, role, theme, themeStyles}, ref) => { const {translate} = useLocalize(); const fabPressable = useRef(null); const animatedValue = useSharedValue(isActive ? 1 : 0); @@ -65,7 +65,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility } }} accessibilityLabel={accessibilityLabel} - accessibilityRole={accessibilityRole} + role={role} pressDimmingValue={1} onPress={(e) => { // Drop focus to avoid blue focus ring. diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 8cd9cabe5faf..a1ba7042f158 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -232,7 +232,7 @@ function FloatingActionButtonAndPopover(props) { /> { From bc09b8d7e3b565c2b07a8d94d478a2eb194b5ed5 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 1 Dec 2023 00:02:22 +0100 Subject: [PATCH 28/34] update react-native-reanimated to version 3.6.1 --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index aadfdaeb6307..e5faeae9e0b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -101,7 +101,7 @@ "react-native-plaid-link-sdk": "10.8.0", "react-native-qrcode-svg": "^6.2.0", "react-native-quick-sqlite": "^8.0.0-beta.2", - "react-native-reanimated": "^3.6.0", + "react-native-reanimated": "^3.6.1", "react-native-render-html": "6.3.1", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.21.0", @@ -44571,9 +44571,9 @@ } }, "node_modules/react-native-reanimated": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz", - "integrity": "sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q==", + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz", + "integrity": "sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==", "dependencies": { "@babel/plugin-transform-object-assign": "^7.16.7", "@babel/preset-typescript": "^7.16.7", @@ -84901,9 +84901,9 @@ "requires": {} }, "react-native-reanimated": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.0.tgz", - "integrity": "sha512-eDdhZTRYofrIqFB/Z5xLTWxcB7wDj4ifrNm+gZ2xHSZPjAQ747ukDdH9rglPyPmi+GcmDH7Wff411Xsw5fm45Q==", + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz", + "integrity": "sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==", "requires": { "@babel/plugin-transform-object-assign": "^7.16.7", "@babel/preset-typescript": "^7.16.7", diff --git a/package.json b/package.json index 6de3c149cfa0..b9712202def9 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "react-native-plaid-link-sdk": "10.8.0", "react-native-qrcode-svg": "^6.2.0", "react-native-quick-sqlite": "^8.0.0-beta.2", - "react-native-reanimated": "^3.6.0", + "react-native-reanimated": "^3.6.1", "react-native-render-html": "6.3.1", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.21.0", From 0b881d49235ece659e464376f74626ceab916546 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 5 Dec 2023 21:32:01 +0100 Subject: [PATCH 29/34] pod update for react-native-reanimated 3.6.1 --- ios/Podfile.lock | 31 +++---------------------------- 1 file changed, 3 insertions(+), 28 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index e0615c4a52fa..56998b544c23 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -779,35 +779,10 @@ PODS: - React-Core - RNReactNativeHapticFeedback (1.14.0): - React-Core - - RNReanimated (3.5.4): - - DoubleConversion - - FBLazyVector - - glog - - hermes-engine - - RCT-Folly - - RCTRequired - - RCTTypeSafety - - React-callinvoker + - RNReanimated (3.6.1): + - RCT-Folly (= 2021.07.22.00) - React-Core - - React-Core/DevSupport - - React-Core/RCTWebSocket - - React-CoreModules - - React-cxxreact - - React-hermes - - React-jsi - - React-jsiexecutor - - React-jsinspector - - React-RCTActionSheet - - React-RCTAnimation - - React-RCTAppDelegate - - React-RCTBlob - - React-RCTImage - - React-RCTLinking - - React-RCTNetwork - - React-RCTSettings - - React-RCTText - ReactCommon/turbomodule/core - - Yoga - RNScreens (3.21.0): - React-Core - React-RCTImage @@ -1286,7 +1261,7 @@ SPEC CHECKSUMS: rnmapbox-maps: 6f638ec002aa6e906a6f766d69cd45f968d98e64 RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c - RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87 + RNReanimated: fdbaa9c964bbab7fac50c90862b6cc5f041679b9 RNScreens: d037903436160a4b039d32606668350d2a808806 RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d From 8964dc9269d780851e157064b487010baf7cb2cb Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 9 Dec 2023 20:24:14 +0100 Subject: [PATCH 30/34] fix floatingActionButton style use --- src/components/FloatingActionButton/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 2784b7eefa54..366b15e85981 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -8,7 +8,6 @@ import withTheme, {withThemePropTypes} from '@components/withTheme'; import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import useLocalize from '@hooks/useLocalize'; import compose from '@libs/compose'; -import styles from '@styles/styles'; import FabPlusIcon from './FabPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); @@ -27,7 +26,6 @@ const propTypes = { /* An accessibility role for the button */ role: PropTypes.string.isRequired, - ...withLocalizePropTypes, ...withThemeStylesPropTypes, ...withThemePropTypes, }; @@ -51,7 +49,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility return { transform: [{rotate: `${animatedValue.value * 135}deg`}], backgroundColor, - borderRadius: styles.floatingActionButton.borderRadius, + borderRadius: themeStyles.floatingActionButton.borderRadius, }; }); From 416229dde9d7662b16002df66bef26999f1d3fd0 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 15 Dec 2023 19:40:55 +0100 Subject: [PATCH 31/34] fix the default props usage and use hooks instead of HOC --- src/components/Icon/index.tsx | 41 +++++++++++++++++------------------ 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 9b31eeaff354..b5f4d2b70373 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; -import withStyleUtils, {WithStyleUtilsProps} from '@components/withStyleUtils'; -import withTheme, {WithThemeProps} from '@components/withTheme'; -import withThemeStyles, {type WithThemeStylesProps} from '@components/withThemeStyles'; +import useTheme from '@styles/themes/useTheme'; +import useStyleUtils from '@styles/useStyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import IconWrapperStyles from './IconWrapperStyles'; @@ -41,25 +41,25 @@ type IconProps = { /** Additional styles to add to the Icon */ additionalStyles?: StyleProp; -} & WithThemeStylesProps & - WithThemeProps & - WithStyleUtilsProps; - -const defaultProps = { - width: variables.iconSizeNormal, - height: variables.iconSizeNormal, - fill: undefined, - small: false, - inline: false, - additionalStyles: [], - hovered: false, - pressed: false, }; -function Icon({src, width, height, fill, small, inline, hovered, pressed, theme, themeStyles, StyleUtils, additionalStyles}: IconProps) { +function Icon({ + src, + width = variables.iconSizeNormal, + height = variables.iconSizeNormal, + fill = undefined, + small = false, + inline = false, + hovered = false, + pressed = false, + additionalStyles = [], +}: IconProps) { + const theme = useTheme(); + const StyleUtils = useStyleUtils(); + const styles = useThemeStyles(); const iconWidth = small ? variables.iconSizeSmall : width; const iconHeight = small ? variables.iconSizeSmall : height; - const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, themeStyles.pAbsolute, additionalStyles]; + const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles]; const iconFill = fill ?? theme.icon; const IconComponent = src; @@ -67,7 +67,7 @@ function Icon({src, width, height, fill, small, inline, hovered, pressed, theme, return ( Date: Fri, 15 Dec 2023 19:59:03 +0100 Subject: [PATCH 32/34] replace WithTheme and WithThemeStyles HOC with useTheme and useThemeStyles hooks --- src/components/FloatingActionButton/index.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 366b15e85981..4bc5aad0f03d 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -4,10 +4,9 @@ import {View} from 'react-native'; import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; -import withTheme, {withThemePropTypes} from '@components/withTheme'; -import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import useLocalize from '@hooks/useLocalize'; -import compose from '@libs/compose'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import FabPlusIcon from './FabPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); @@ -25,12 +24,11 @@ const propTypes = { /* An accessibility role for the button */ role: PropTypes.string.isRequired, - - ...withThemeStylesPropTypes, - ...withThemePropTypes, }; -const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, role, theme, themeStyles}, ref) => { +const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, role}, ref) => { + const theme = useTheme(); + const styles = useThemeStyles(); const {translate} = useLocalize(); const fabPressable = useRef(null); const animatedValue = useSharedValue(isActive ? 1 : 0); @@ -49,13 +47,13 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility return { transform: [{rotate: `${animatedValue.value * 135}deg`}], backgroundColor, - borderRadius: themeStyles.floatingActionButton.borderRadius, + borderRadius: styles.floatingActionButton.borderRadius, }; }); return ( - + { fabPressable.current = el; @@ -72,7 +70,7 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility onPress(e); }} onLongPress={() => {}} - style={[themeStyles.floatingActionButton, animatedStyle]} + style={[styles.floatingActionButton, animatedStyle]} > @@ -84,4 +82,4 @@ const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibility FloatingActionButton.propTypes = propTypes; FloatingActionButton.displayName = 'FloatingActionButton'; -export default compose(withThemeStyles, withTheme)(FloatingActionButton); +export default FloatingActionButton; From a6da78c19fd0cd55d7ed02d30b63717506216e80 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 16 Dec 2023 17:38:14 +0100 Subject: [PATCH 33/34] fix lint error --- src/components/FloatingActionButton/index.js | 4 ++-- src/components/Icon/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js index 4bc5aad0f03d..d341396c44b7 100644 --- a/src/components/FloatingActionButton/index.js +++ b/src/components/FloatingActionButton/index.js @@ -5,8 +5,8 @@ import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, wi import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import useLocalize from '@hooks/useLocalize'; -import useTheme from '@styles/themes/useTheme'; -import useThemeStyles from '@styles/useThemeStyles'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import FabPlusIcon from './FabPlusIcon'; const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback); diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index b5f4d2b70373..5f82421c0e8e 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; -import useTheme from '@styles/themes/useTheme'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import IconWrapperStyles from './IconWrapperStyles'; From 5bc120d784d58e6968308a076f6bedf61964e187 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 16 Dec 2023 17:56:09 +0100 Subject: [PATCH 34/34] fix failing test --- src/components/FloatingActionButton/FabPlusIcon.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js index a2826fa93ccc..09afa00f119d 100644 --- a/src/components/FloatingActionButton/FabPlusIcon.js +++ b/src/components/FloatingActionButton/FabPlusIcon.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, {useEffect} from 'react'; import Animated, {Easing, interpolateColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated'; import Svg, {Path} from 'react-native-svg'; -import themeColors from '@styles/themes/default'; +import useTheme from '@hooks/useTheme'; const AnimatedPath = Animated.createAnimatedComponent(Path); @@ -12,6 +12,7 @@ const propTypes = { }; function FabPlusIcon({isActive}) { + const theme = useTheme(); const animatedValue = useSharedValue(isActive ? 1 : 0); useEffect(() => { @@ -22,7 +23,7 @@ function FabPlusIcon({isActive}) { }, [isActive, animatedValue]); const animatedProps = useAnimatedProps(() => { - const fill = interpolateColor(animatedValue.value, [0, 1], [themeColors.textLight, themeColors.textDark]); + const fill = interpolateColor(animatedValue.value, [0, 1], [theme.textLight, theme.textDark]); return { fill,