🍒 Cherry pick PR #14171 to staging 🍒

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001025100
-        versionName "1.2.51-0"
+        versionCode 1001025101
+        versionName "1.2.51-1"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.51.0</string>
+	<string>1.2.51.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.51.0</string>
+	<string>1.2.51.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.51-0",
+  "version": "1.2.51-1",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/Tooltip/TooltipRenderedOnPageBody.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Animated, View} from 'react-native';
-import {Portal} from '@gorhom/portal';
+import ReactDOM from 'react-dom';
 import getTooltipStyles from '../../styles/getTooltipStyles';
 import Text from '../Text';
 
@@ -69,6 +69,10 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
         this.updateTooltipTextWidth = this.updateTooltipTextWidth.bind(this);
     }
 
+    componentDidMount() {
+        this.updateTooltipTextWidth();
+    }
+
     componentDidUpdate(prevProps) {
         if (prevProps.text === this.props.text) {
             return;
@@ -118,34 +122,33 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
             this.props.shiftHorizontal,
             this.props.shiftVertical,
         );
-        return (
-            <Portal>
-                <Animated.View
-                    onLayout={this.measureTooltip}
-                    style={[tooltipWrapperStyle, animationStyle]}
-                >
-                    <Text numberOfLines={this.props.numberOfLines} style={tooltipTextStyle}>
-                        <Text
-                            style={tooltipTextStyle}
-                            ref={(ref) => {
-                                // Once the text for the tooltip first renders, update the width of the tooltip dynamically to fit the width of the text.
-                                // Note that we can't have this code in componentDidMount because the ref for the text won't be set until after the first render
-                                if (this.textRef) {
-                                    return;
-                                }
-
-                                this.textRef = ref;
-                                this.updateTooltipTextWidth();
-                            }}
-                        >
-                            {this.props.text}
-                        </Text>
+        return ReactDOM.createPortal(
+            <Animated.View
+                onLayout={this.measureTooltip}
+                style={[tooltipWrapperStyle, animationStyle]}
+            >
+                <Text numberOfLines={this.props.numberOfLines} style={tooltipTextStyle}>
+                    <Text
+                        style={tooltipTextStyle}
+                        ref={(ref) => {
+                            // Once the text for the tooltip first renders, update the width of the tooltip dynamically to fit the width of the text.
+                            // Note that we can't have this code in componentDidMount because the ref for the text won't be set until after the first render
+                            if (this.textRef) {
+                                return;
+                            }
+
+                            this.textRef = ref;
+                            this.updateTooltipTextWidth();
+                        }}
+                    >
+                        {this.props.text}
                     </Text>
-                    <View style={pointerWrapperStyle}>
-                        <View style={pointerStyle} />
-                    </View>
-                </Animated.View>
-            </Portal>
+                </Text>
+                <View style={pointerWrapperStyle}>
+                    <View style={pointerStyle} />
+                </View>
+            </Animated.View>,
+            document.querySelector('body'),
         );
     }
 }