Merge pull request Expensify#73479 from dmkt9/fix/72890

Fix/72890 - FAB shows the contrasting color when hovered after changing app theme

Author: stitesExpensify

src/components/FloatingActionButton.tsx

@@ -56,6 +56,7 @@ function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabe
     const fabSize = isLHBVisible ? variables.iconSizeSmall : variables.iconSizeNormal;
 
     const sharedValue = useSharedValue(isActive ? 1 : 0);
+    const isHovered = useSharedValue(false);
     const buttonRef = ref;
 
     useEffect(() => {
@@ -68,7 +69,7 @@ function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabe
     }, [isActive, sharedValue]);
 
     const animatedStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(sharedValue.get(), [0, 1], [buttonDefaultBG, buttonHoveredBG]);
+        const backgroundColor = isHovered.get() && !sharedValue.get() ? buttonHoveredBG : interpolateColor(sharedValue.get(), [0, 1], [buttonDefaultBG, buttonHoveredBG]);
 
         return {
             transform: [{rotate: `${sharedValue.get() * 135}deg`}],
@@ -115,22 +116,26 @@ function FloatingActionButton({onPress, onLongPress, isActive, accessibilityLabe
                 shouldUseHapticsOnLongPress
                 testID="floating-action-button"
             >
-                {({hovered}) => (
-                    <Animated.View
-                        style={[styles.floatingActionButton, {borderRadius}, styles.floatingActionButtonSmall, animatedStyle, hovered && {backgroundColor: buttonHoveredBG}]}
-                        testID="fab-animated-container"
-                    >
-                        <Svg
-                            width={fabSize}
-                            height={fabSize}
+                {({hovered}) => {
+                    isHovered.set(hovered);
+
+                    return (
+                        <Animated.View
+                            style={[styles.floatingActionButton, {borderRadius}, styles.floatingActionButtonSmall, animatedStyle]}
+                            testID="fab-animated-container"
                         >
-                            <AnimatedPath
-                                d={isLHBVisible ? SMALL_FAB_PATH : FAB_PATH}
-                                fill={icon}
-                            />
-                        </Svg>
-                    </Animated.View>
-                )}
+                            <Svg
+                                width={fabSize}
+                                height={fabSize}
+                            >
+                                <AnimatedPath
+                                    d={isLHBVisible ? SMALL_FAB_PATH : FAB_PATH}
+                                    fill={icon}
+                                />
+                            </Svg>
+                        </Animated.View>
+                    );
+                }}
             </PressableWithoutFeedback>
         );
     }

tests/ui/FloatingActionButtonTest.tsx

@@ -27,10 +27,26 @@ const mockedUseResponsiveLayout = useResponsiveLayout as jest.MockedFunction<typ
 // Mock useIsHomeRouteActive to avoid navigation state issues
 jest.mock('@navigation/helpers/useIsHomeRouteActive', () => (): boolean => false);
 
+let mockUseAnimatedStyleUpdater: () => Record<string, unknown>;
 // Silence react-native-reanimated warnings in Jest
 jest.mock('react-native-reanimated', () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return require('react-native-reanimated/mock');
+    return {
+        ...require('react-native-reanimated/mock'),
+        interpolateColor: (value: number, input: number[], output: string[]) => {
+            const [, inputMax] = input;
+            const [colorMin, colorMax] = output;
+
+            if (value >= inputMax) {
+                return colorMax;
+            }
+            return colorMin;
+        },
+        useAnimatedStyle: (updater: () => Record<string, unknown>) => {
+            mockUseAnimatedStyleUpdater = updater;
+            return updater();
+        },
+    };
 });
 
 describe('FloatingActionButton hover', () => {
@@ -67,13 +83,15 @@ describe('FloatingActionButton hover', () => {
         // Before hover, should not have successHover background
         expect(animatedContainer).not.toHaveStyle({backgroundColor: colors.productDark500});
 
+        expect(mockUseAnimatedStyleUpdater()).not.toEqual(expect.objectContaining({backgroundColor: colors.productDark500}));
+
         // Test hover in
         fireEvent(fab, 'hoverIn');
-        expect(animatedContainer).toHaveStyle({backgroundColor: colors.productDark500});
+        expect(mockUseAnimatedStyleUpdater()).toEqual(expect.objectContaining({backgroundColor: colors.productDark500}));
 
         // Test hover out
         fireEvent(fab, 'hoverOut');
-        expect(animatedContainer).not.toHaveStyle({backgroundColor: colors.productDark500});
+        expect(mockUseAnimatedStyleUpdater()).not.toEqual(expect.objectContaining({backgroundColor: colors.productDark500}));
     });
 
     it('should render animated button if LHB is visible', () => {