From 30b1101c58e8a667a7b95e747a1229c1704d30c6 Mon Sep 17 00:00:00 2001
From: miroslav <miki.stevanovic.u@gmail.com>
Date: Fri, 16 Dec 2022 21:57:24 +0100
Subject: [PATCH] fix tooltip position changes after closing fab menu

---
 src/components/FloatingActionButton.js | 36 ++++++++++++++------------
 src/styles/styles.js                   | 11 +++++---
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
index 776e841eb054..2bc1d96d05ec 100644
--- a/src/components/FloatingActionButton.js
+++ b/src/components/FloatingActionButton.js
@@ -1,5 +1,7 @@
 import React, {PureComponent} from 'react';
-import {Pressable, Animated, Easing} from 'react-native';
+import {
+    Pressable, Animated, Easing, View,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -72,22 +74,24 @@ class FloatingActionButton extends PureComponent {
 
         return (
             <Tooltip absolute text={this.props.translate('common.new')}>
-                <AnimatedPressable
-                    ref={el => this.fabPressable = el}
-                    accessibilityLabel={this.props.accessibilityLabel}
-                    accessibilityRole={this.props.accessibilityRole}
-                    onPress={(e) => {
+                <View style={styles.floatingActionButtonContainer}>
+                    <AnimatedPressable
+                        ref={el => this.fabPressable = el}
+                        accessibilityLabel={this.props.accessibilityLabel}
+                        accessibilityRole={this.props.accessibilityRole}
+                        onPress={(e) => {
                         // Drop focus to avoid blue focus ring.
-                        this.fabPressable.blur();
-                        this.props.onPress(e);
-                    }}
-                    style={[
-                        styles.floatingActionButton,
-                        StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
-                    ]}
-                >
-                    <AnimatedIcon src={Expensicons.Plus} fill={fill} />
-                </AnimatedPressable>
+                            this.fabPressable.blur();
+                            this.props.onPress(e);
+                        }}
+                        style={[
+                            styles.floatingActionButton,
+                            StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
+                        ]}
+                    >
+                        <AnimatedIcon src={Expensicons.Plus} fill={fill} />
+                    </AnimatedPressable>
+                </View>
             </Tooltip>
         );
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 14bb253e583c..594a1f58d9c6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -998,16 +998,19 @@ const styles = {
         },
     },
 
-    floatingActionButton: {
-        backgroundColor: themeColors.success,
+    floatingActionButtonContainer: {
         position: 'absolute',
-        height: variables.componentSizeLarge,
-        width: variables.componentSizeLarge,
         right: 20,
 
         // The bottom of the floating action button should align with the bottom of the compose box.
         // The value should be equal to the height + marginBottom + marginTop of chatItemComposeSecondaryRow
         bottom: 25,
+    },
+
+    floatingActionButton: {
+        backgroundColor: themeColors.success,
+        height: variables.componentSizeLarge,
+        width: variables.componentSizeLarge,
         borderRadius: 999,
         alignItems: 'center',
         justifyContent: 'center',