Remove unnecessary platform sharding in FloatingMessageCounterContainer

src/pages/home/report/FloatingMessageCounter/index.tsx → src/pages/home/report/FloatingMessageCounter.tsx

@@ -1,15 +1,14 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
-import {Animated, View} from 'react-native';
+import React, {useCallback, useEffect} from 'react';
+import {View} from 'react-native';
+import Animated, {useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useNativeDriver from '@libs/useNativeDriver';
 import CONST from '@src/CONST';
-import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
 type FloatingMessageCounterProps = {
     /** Whether the New Messages indicator is active */
@@ -26,20 +25,18 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const translateY = useMemo(() => new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y), []);
+    const translateY = useSharedValue(MARKER_INACTIVE_TRANSLATE_Y);
 
     const show = useCallback(() => {
-        Animated.spring(translateY, {
-            toValue: MARKER_ACTIVE_TRANSLATE_Y,
-            useNativeDriver,
-        }).start();
+        'worklet';
+
+        translateY.value = withSpring(MARKER_ACTIVE_TRANSLATE_Y);
     }, [translateY]);
 
     const hide = useCallback(() => {
-        Animated.spring(translateY, {
-            toValue: MARKER_INACTIVE_TRANSLATE_Y,
-            useNativeDriver,
-        }).start();
+        'worklet';
+
+        translateY.value = withSpring(MARKER_INACTIVE_TRANSLATE_Y);
     }, [translateY]);
 
     useEffect(() => {
@@ -50,10 +47,15 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating
         }
     }, [isActive, show, hide]);
 
+    const wrapperStyle = useAnimatedStyle(() => ({
+        ...styles.floatingMessageCounterWrapper,
+        transform: [{translateY: translateY.value}],
+    }));
+
     return (
-        <FloatingMessageCounterContainer
+        <Animated.View
             accessibilityHint={translate('accessibilityHints.scrollToNewestMessages')}
-            containerStyles={styles.floatingMessageCounterTransformation(translateY)}
+            style={wrapperStyle}
         >
             <View style={styles.floatingMessageCounter}>
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
@@ -79,7 +81,7 @@ function FloatingMessageCounter({isActive = false, onClick = () => {}}: Floating
                     </Button>
                 </View>
             </View>
-        </FloatingMessageCounterContainer>
+        </Animated.View>
     );
 }
 

src/styles/index.ts

@@ -3341,31 +3341,11 @@ const styles = (theme: ThemeColors) =>
             ...visibility.hidden,
         },
 
-        floatingMessageCounterWrapperAndroid: {
-            left: 0,
-            width: '100%',
-            alignItems: 'center',
-            position: 'absolute',
-            top: 0,
-            zIndex: 100,
-            ...visibility.hidden,
-        },
-
-        floatingMessageCounterSubWrapperAndroid: {
-            left: '50%',
-            width: 'auto',
-        },
-
         floatingMessageCounter: {
             left: '-50%',
             ...visibility.visible,
         },
 
-        floatingMessageCounterTransformation: (translateY: AnimatableNumericValue) =>
-            ({
-                transform: [{translateY}],
-            } satisfies ViewStyle),
-
         confirmationAnimation: {
             height: 180,
             width: 180,