fix unable to close fab and tooltip area

Expensify · Mar 18, 2024 · 19a772d · 19a772d
1 parent 5d3c528
commit 19a772d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 64 deletions.
diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
@@ -1,24 +1,20 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {GestureResponderEvent, Role, Text} from 'react-native';
-import {Platform, View} from 'react-native';
+import type {GestureResponderEvent, Role, Text, View} from 'react-native';
+import {Platform} from 'react-native';
 import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import {PressableWithoutFeedback} from './Pressable';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 AnimatedPath.displayName = 'AnimatedPath';
 
-const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback);
-AnimatedPressable.displayName = 'AnimatedPressable';
-
 type AdapterPropsRecord = {
     type: number;
     payload?: number | null;
@@ -104,41 +100,34 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
     };
 
     return (
-        <PressableWithoutFeedback
-            style={styles.h100}
-            accessibilityLabel={accessibilityLabel}
-            onPress={toggleFabAction}
-        >
-            <View style={styles.bottomTabBarItem}>
-                <Tooltip text={translate('common.create')}>
-                    <AnimatedPressable
-                        ref={(el) => {
-                            fabPressable.current = el ?? null;
-                            if (buttonRef && 'current' in buttonRef) {
-                                buttonRef.current = el ?? null;
-                            }
-                        }}
-                        accessibilityLabel={accessibilityLabel}
-                        role={role}
-                        pressDimmingValue={1}
-                        onPress={toggleFabAction}
-                        onLongPress={() => {}}
-                        shouldUseHapticsOnLongPress={false}
-                        style={[styles.floatingActionButton, animatedStyle]}
+        <Tooltip text={translate('common.create')}>
+            <PressableWithoutFeedback
+                ref={(el) => {
+                    fabPressable.current = el ?? null;
+                    if (buttonRef && 'current' in buttonRef) {
+                        buttonRef.current = el ?? null;
+                    }
+                }}
+                style={[styles.h100, styles.bottomTabBarItem]}
+                accessibilityLabel={accessibilityLabel}
+                onPress={toggleFabAction}
+                onLongPress={() => {}}
+                role={role}
+                shouldUseHapticsOnLongPress={false}
+            >
+                <Animated.View style={[styles.floatingActionButton, animatedStyle]}>
+                    <Svg
+                        width={variables.iconSizeNormal}
+                        height={variables.iconSizeNormal}
                     >
-                        <Svg
-                            width={variables.iconSizeNormal}
-                            height={variables.iconSizeNormal}
-                        >
-                            <AnimatedPath
-                                d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
-                                animatedProps={animatedProps}
-                            />
-                        </Svg>
-                    </AnimatedPressable>
-                </Tooltip>
-            </View>
-        </PressableWithoutFeedback>
+                        <AnimatedPath
+                            d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
+                            animatedProps={animatedProps}
+                        />
+                    </Svg>
+                </Animated.View>
+            </PressableWithoutFeedback>
+        </Tooltip>
     );
 }
 

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -61,16 +61,16 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
 
     return (
         <View style={styles.bottomTabBarContainer}>
-            <PressableWithFeedback
-                onPress={() => {
-                    Navigation.navigate(ROUTES.HOME);
-                }}
-                role={CONST.ROLE.BUTTON}
-                accessibilityLabel={translate('common.chats')}
-                wrapperStyle={styles.flex1}
-                style={styles.bottomTabBarItem}
-            >
-                <Tooltip text={translate('common.chats')}>
+            <Tooltip text={translate('common.chats')}>
+                <PressableWithFeedback
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.HOME);
+                    }}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('common.chats')}
+                    wrapperStyle={styles.flex1}
+                    style={styles.bottomTabBarItem}
+                >
                     <View>
                         <Icon
                             src={Expensicons.ChatBubble}
@@ -82,8 +82,8 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                             <View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />
                         )}
                     </View>
-                </Tooltip>
-            </PressableWithFeedback>
+                </PressableWithFeedback>
+            </Tooltip>
 
             <BottomTabBarFloatingActionButton />
             <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />

diff --git a/src/pages/home/sidebar/BottomTabAvatar.tsx b/src/pages/home/sidebar/BottomTabAvatar.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
 import React, {useCallback} from 'react';
 import {PressableWithFeedback} from '@components/Pressable';
+import Tooltip from '@components/Tooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -48,15 +49,17 @@ function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomT
     }
 
     return (
-        <PressableWithFeedback
-            onPress={showSettingsPage}
-            role={CONST.ROLE.BUTTON}
-            accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
-            wrapperStyle={styles.flex1}
-            style={styles.bottomTabBarItem}
-        >
-            {children}
-        </PressableWithFeedback>
+        <Tooltip text={translate('profilePage.profile')}>
+            <PressableWithFeedback
+                onPress={showSettingsPage}
+                role={CONST.ROLE.BUTTON}
+                accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
+                wrapperStyle={styles.flex1}
+                style={styles.bottomTabBarItem}
+            >
+                {children}
+            </PressableWithFeedback>
+        </Tooltip>
     );
 }
 

diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.js b/src/pages/home/sidebar/ProfileAvatarWithIndicator.js
@@ -7,7 +7,6 @@ import {withOnyx} from 'react-native-onyx';
 import AvatarWithIndicator from '@components/AvatarWithIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as UserUtils from '@libs/UserUtils';
@@ -36,15 +35,13 @@ const defaultProps = {
 };
 
 function ProfileAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected}) {
-    const {translate} = useLocalize();
     const styles = useThemeStyles();
 
     return (
         <OfflineWithFeedback pendingAction={lodashGet(currentUserPersonalDetails, 'pendingFields.avatar', null)}>
             <View style={[isSelected && styles.selectedAvatarBorder]}>
                 <AvatarWithIndicator
                     source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)}
-                    tooltipText={translate('profilePage.profile')}
                     fallbackIcon={currentUserPersonalDetails.fallbackIcon}
                     isLoading={isLoading && !currentUserPersonalDetails.avatar}
                 />