From 41417e4655def22bab3047e67d5ef8a73b39418a Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Fri, 14 Apr 2023 17:52:43 -0700
Subject: [PATCH 01/13] add useState logic and convert to functional component

---
 .../settings/Payments/AddPayPalMePage.js      | 111 ++++++++----------
 1 file changed, 51 insertions(+), 60 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index c800b49cd804..7f79c51f591c 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import CONST from '../../../CONST';
@@ -16,33 +16,25 @@ import TextInput from '../../../components/TextInput';
 import * as ValidationUtils from '../../../libs/ValidationUtils';
 import * as User from '../../../libs/actions/User';
 
-class AddPayPalMePage extends React.Component {
-    constructor(props) {
-        super(props);
+const AddPayPalMePage = (props) => {
 
-        this.state = {
-            payPalMeUsername: '',
-            payPalMeUsernameError: false,
-        };
-        this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this);
-        this.focusPayPalMeInput = this.focusPayPalMeInput.bind(this);
-    }
+    const [payPalMeUsername, setPayPalMeUsername] = useState('');
+    const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
 
     /**
-     * Sets the payPalMeUsername for the current user
+     * Sets the payPalMe username and error data for the current user
      */
-    setPayPalMeUsername() {
-        const isValid = ValidationUtils.isValidPaypalUsername(this.state.payPalMeUsername);
-        if (!isValid) {
-            this.setState({payPalMeUsernameError: true});
+    const setPayPalMeData = () => {
+        if (!ValidationUtils.isValidPaypalUsername(payPalMeUsername)) {
+            setPayPalMeUsernameError(true);
             return;
         }
-        this.setState({payPalMeUsernameError: false});
-        User.addPaypalMeAddress(this.state.payPalMeUsername);
+        setPayPalMeUsernameError(false);
+        User.addPaypalMeAddress(payPalMeUsername);
 
-        Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
+        Growl.show(props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
-    }
+    };
 
     focusPayPalMeInput() {
         if (!this.payPalMeInputRef) {
@@ -52,49 +44,48 @@ class AddPayPalMePage extends React.Component {
         this.payPalMeInputRef.focus();
     }
 
-    render() {
-        return (
-            <ScreenWrapper onEntryTransitionEnd={this.focusPayPalMeInput}>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.payPalMe')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <View style={[styles.flex1, styles.p5]}>
-                    <View style={[styles.flex1]}>
-                        <Text style={[styles.mb4]}>
-                            {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
-                        </Text>
-                        <TextInput
-                            ref={el => this.payPalMeInputRef = el}
-                            label={this.props.translate('addPayPalMePage.payPalMe')}
-                            autoCompleteType="off"
-                            autoCorrect={false}
-                            value={this.state.payPalMeUsername}
-                            placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
-                            onChangeText={text => this.setState({payPalMeUsername: text, payPalMeUsernameError: false})}
-                            returnKeyType="done"
-                            hasError={this.state.payPalMeUsernameError}
-                            errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
-                        />
-                    </View>
-                </View>
-                <FixedFooter>
-                    <Button
-                        success
-                        onPress={this.setPayPalMeUsername}
-                        pressOnEnter
-                        style={[styles.mt3]}
-                        isDisabled={_.isEmpty(this.state.payPalMeUsername.trim())}
-                        text={this.props.translate('addPayPalMePage.addPayPalAccount')}
+    return (
+        <ScreenWrapper onEntryTransitionEnd={this.focusPayPalMeInput}>
+            <HeaderWithCloseButton
+                title={this.props.translate('common.payPalMe')}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+            />
+            <View style={[styles.flex1, styles.p5]}>
+                <View style={[styles.flex1]}>
+                    <Text style={[styles.mb4]}>
+                        {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
+                    </Text>
+                    <TextInput
+                        ref={el => this.payPalMeInputRef = el}
+                        label={this.props.translate('addPayPalMePage.payPalMe')}
+                        autoCompleteType="off"
+                        autoCorrect={false}
+                        value={payPalMeUsername}
+                        placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
+                        onChangeText={(text) => { setPayPalMeUsername(text); setPayPalMeUsernameError(false); }}
+                        returnKeyType="done"
+                        hasError={payPalMeUsernameError}
+                        errorText={payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
                     />
-                </FixedFooter>
-            </ScreenWrapper>
-        );
-    }
+                </View>
+            </View>
+            <FixedFooter>
+                <Button
+                    success
+                    onPress={setPayPalMeData}
+                    pressOnEnter
+                    style={[styles.mt3]}
+                    isDisabled={_.isEmpty(payPalMeUsername.trim())}
+                    text={this.props.translate('addPayPalMePage.addPayPalAccount')}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
 }
 
 AddPayPalMePage.propTypes = {...withLocalizePropTypes};
+AddPayPalMePage.displayName = 'AddPayPalMePage';
 
 export default withLocalize(AddPayPalMePage);

From 3bd913c1cffedd54d2891812db5d45f31632ad60 Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Fri, 14 Apr 2023 17:53:37 -0700
Subject: [PATCH 02/13] add useRef

---
 src/pages/settings/Payments/AddPayPalMePage.js | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 7f79c51f591c..4f16e8d97abc 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import CONST from '../../../CONST';
@@ -20,6 +20,7 @@ const AddPayPalMePage = (props) => {
 
     const [payPalMeUsername, setPayPalMeUsername] = useState('');
     const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
+    const payPalMeInput = useRef(null);
 
     /**
      * Sets the payPalMe username and error data for the current user
@@ -32,20 +33,12 @@ const AddPayPalMePage = (props) => {
         setPayPalMeUsernameError(false);
         User.addPaypalMeAddress(payPalMeUsername);
 
-        Growl.show(props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
+        Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
     };
 
-    focusPayPalMeInput() {
-        if (!this.payPalMeInputRef) {
-            return;
-        }
-
-        this.payPalMeInputRef.focus();
-    }
-
     return (
-        <ScreenWrapper onEntryTransitionEnd={this.focusPayPalMeInput}>
+        <ScreenWrapper onEntryTransitionEnd={payPalMeInput.current && payPalMeInput.current.focus()}>
             <HeaderWithCloseButton
                 title={this.props.translate('common.payPalMe')}
                 shouldShowBackButton
@@ -58,7 +51,7 @@ const AddPayPalMePage = (props) => {
                         {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
                     </Text>
                     <TextInput
-                        ref={el => this.payPalMeInputRef = el}
+                        ref={payPalMeInput.current}
                         label={this.props.translate('addPayPalMePage.payPalMe')}
                         autoCompleteType="off"
                         autoCorrect={false}

From 5caf5f5138fb6e7fada9799d1ae08a720b89039f Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Fri, 14 Apr 2023 17:54:00 -0700
Subject: [PATCH 03/13] props instead of this.props

---
 src/pages/settings/Payments/AddPayPalMePage.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 4f16e8d97abc..c7473f7cd60c 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -33,14 +33,14 @@ const AddPayPalMePage = (props) => {
         setPayPalMeUsernameError(false);
         User.addPaypalMeAddress(payPalMeUsername);
 
-        Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
+        Growl.show(props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
     };
 
     return (
         <ScreenWrapper onEntryTransitionEnd={payPalMeInput.current && payPalMeInput.current.focus()}>
             <HeaderWithCloseButton
-                title={this.props.translate('common.payPalMe')}
+                title={props.translate('common.payPalMe')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
@@ -48,19 +48,19 @@ const AddPayPalMePage = (props) => {
             <View style={[styles.flex1, styles.p5]}>
                 <View style={[styles.flex1]}>
                     <Text style={[styles.mb4]}>
-                        {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
+                        {props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
                     </Text>
                     <TextInput
                         ref={payPalMeInput.current}
-                        label={this.props.translate('addPayPalMePage.payPalMe')}
+                        label={props.translate('addPayPalMePage.payPalMe')}
                         autoCompleteType="off"
                         autoCorrect={false}
                         value={payPalMeUsername}
-                        placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
+                        placeholder={props.translate('addPayPalMePage.yourPayPalUsername')}
                         onChangeText={(text) => { setPayPalMeUsername(text); setPayPalMeUsernameError(false); }}
                         returnKeyType="done"
                         hasError={payPalMeUsernameError}
-                        errorText={payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
+                        errorText={payPalMeUsernameError ? props.translate('addPayPalMePage.formatError') : ''}
                     />
                 </View>
             </View>
@@ -71,7 +71,7 @@ const AddPayPalMePage = (props) => {
                     pressOnEnter
                     style={[styles.mt3]}
                     isDisabled={_.isEmpty(payPalMeUsername.trim())}
-                    text={this.props.translate('addPayPalMePage.addPayPalAccount')}
+                    text={props.translate('addPayPalMePage.addPayPalAccount')}
                 />
             </FixedFooter>
         </ScreenWrapper>

From 6307a9e3aab73e3ba195c72a57e5b8cda74b90ec Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Fri, 14 Apr 2023 18:26:32 -0700
Subject: [PATCH 04/13] minor style update

---
 src/pages/settings/Payments/AddPayPalMePage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index c7473f7cd60c..50b1f09d7171 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -17,7 +17,6 @@ import * as ValidationUtils from '../../../libs/ValidationUtils';
 import * as User from '../../../libs/actions/User';
 
 const AddPayPalMePage = (props) => {
-
     const [payPalMeUsername, setPayPalMeUsername] = useState('');
     const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
     const payPalMeInput = useRef(null);
@@ -76,7 +75,7 @@ const AddPayPalMePage = (props) => {
             </FixedFooter>
         </ScreenWrapper>
     );
-}
+};
 
 AddPayPalMePage.propTypes = {...withLocalizePropTypes};
 AddPayPalMePage.displayName = 'AddPayPalMePage';

From 2d30ed23cf30596ae5eb3e2ff7c23bae55432657 Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 11:12:50 -0700
Subject: [PATCH 05/13] cleanup ref logic

---
 src/pages/settings/Payments/AddPayPalMePage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 50b1f09d7171..2e71b576ed2e 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -37,7 +37,7 @@ const AddPayPalMePage = (props) => {
     };
 
     return (
-        <ScreenWrapper onEntryTransitionEnd={payPalMeInput.current && payPalMeInput.current.focus()}>
+        <ScreenWrapper onEntryTransitionEnd={() => payPalMeInput.current && payPalMeInput.current.focus()}>
             <HeaderWithCloseButton
                 title={props.translate('common.payPalMe')}
                 shouldShowBackButton
@@ -50,7 +50,7 @@ const AddPayPalMePage = (props) => {
                         {props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
                     </Text>
                     <TextInput
-                        ref={payPalMeInput.current}
+                        ref={payPalMeInput}
                         label={props.translate('addPayPalMePage.payPalMe')}
                         autoCompleteType="off"
                         autoCorrect={false}

From c50a5bb58f6638f44b5e26c40b71a79a0b454c94 Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 11:28:42 -0700
Subject: [PATCH 06/13] follow up merge cleanup

---
 src/pages/settings/Payments/AddPayPalMePage.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 3be822bd52c8..3e77ff3c6c32 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -1,12 +1,7 @@
-<<<<<<< HEAD
 import React, {useRef, useState} from 'react';
-import {View} from 'react-native';
-=======
-import React from 'react';
 import {
     View, TouchableWithoutFeedback, Linking,
 } from 'react-native';
->>>>>>> cbb22d4789f9155f6101c48e6db9d901e9151d64
 import _ from 'underscore';
 import CONST from '../../../CONST';
 import ROUTES from '../../../ROUTES';

From 3d5c680fe1416ad896d5547359aeadb8e9432c92 Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 11:30:49 -0700
Subject: [PATCH 07/13] fix props, remove extra space

---
 src/pages/settings/Payments/AddPayPalMePage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 3e77ff3c6c32..a9077ee22329 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -57,7 +57,7 @@ const AddPayPalMePage = (props) => {
                     </Text>
                     <TextInput
                         ref={payPalMeInput}
-                        label={propstranslate('addPayPalMePage.payPalMe')}
+                        label={props.translate('addPayPalMePage.payPalMe')}
                         autoCompleteType="off"
                         autoCorrect={false}
                         value={payPalMeUsername}
@@ -103,7 +103,6 @@ const AddPayPalMePage = (props) => {
             </FixedFooter>
         </ScreenWrapper>
     );
-
 };
 
 AddPayPalMePage.propTypes = {...withLocalizePropTypes};

From 19dd2a7c7fa51e7ea2f6a2efbda31082d436012e Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 15:34:18 -0700
Subject: [PATCH 08/13] add useCallback, minor style

---
 src/pages/settings/Payments/AddPayPalMePage.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index a9077ee22329..ac705b5d0c7e 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -1,4 +1,6 @@
-import React, {useRef, useState} from 'react';
+import React, {
+    useRef, useState, useCallback,
+} from 'react';
 import {
     View, TouchableWithoutFeedback, Linking,
 } from 'react-native';
@@ -30,7 +32,7 @@ const AddPayPalMePage = (props) => {
     /**
      * Sets the payPalMe username and error data for the current user
      */
-    const setPayPalMeData = () => {
+    const setPayPalMeData = useCallback(() => {
         if (!ValidationUtils.isValidPaypalUsername(payPalMeUsername)) {
             setPayPalMeUsernameError(true);
             return;
@@ -40,7 +42,7 @@ const AddPayPalMePage = (props) => {
 
         Growl.show(props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
-    };
+    }, [payPalMeUsername]);
 
     return (
         <ScreenWrapper onEntryTransitionEnd={() => payPalMeInput.current && payPalMeInput.current.focus()}>
@@ -62,7 +64,10 @@ const AddPayPalMePage = (props) => {
                         autoCorrect={false}
                         value={payPalMeUsername}
                         placeholder={props.translate('addPayPalMePage.yourPayPalUsername')}
-                        onChangeText={(text) => { setPayPalMeUsername(text); setPayPalMeUsernameError(false); }}
+                        onChangeText={(text) => {
+                            setPayPalMeUsername(text);
+                            setPayPalMeUsernameError(false);
+                        }}
                         returnKeyType="done"
                         hasError={payPalMeUsernameError}
                         errorText={payPalMeUsernameError ? props.translate('addPayPalMePage.formatError') : ''}

From 66e32cde4614afafa5ef4e8fbb6d59f9c76ffc5f Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 15:49:46 -0700
Subject: [PATCH 09/13] update innerRef proptype

---
 .storybook/preview.js                         |   2 +
 android/app/build.gradle                      |   4 +-
 ios/NewExpensify/Info.plist                   |   4 +-
 ios/NewExpensifyTests/Info.plist              |   4 +-
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/components/AddressSearch.js               |   6 +-
 src/components/CustomStatusBar/index.web.js   |   5 +-
 .../EmojiPicker/EmojiPickerButton.js          |   2 +-
 src/components/Modal/index.web.js             |   5 +-
 .../TextInput/baseTextInputPropTypes.js       |   6 +-
 .../index.js => ReportActionCompose.js}       | 147 +++++++-----------
 .../ReportActionCompose/keyDownAction.js      |  10 --
 .../keyDownAction.native.js                   |   5 -
 src/styles/StyleUtils.js                      |  20 +++
 src/styles/styles.js                          |   4 -
 16 files changed, 100 insertions(+), 130 deletions(-)
 rename src/pages/home/report/{ReportActionCompose/index.js => ReportActionCompose.js} (90%)
 delete mode 100644 src/pages/home/report/ReportActionCompose/keyDownAction.js
 delete mode 100644 src/pages/home/report/ReportActionCompose/keyDownAction.native.js

diff --git a/.storybook/preview.js b/.storybook/preview.js
index d69b253a18b6..6c4c13861f8b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Onyx from 'react-native-onyx';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import './fonts.css';
 import ComposeProviders from '../src/components/ComposeProviders';
 import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
@@ -18,6 +19,7 @@ const decorators = [
                 OnyxProvider,
                 LocaleContextProvider,
                 HTMLEngineProvider,
+                SafeAreaProvider,
             ]}
         >
             <Story />
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 5bd5feb9db6a..3368dd86cd80 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030001
-        versionName "1.3.0-1"
+        versionCode 1001030100
+        versionName "1.3.1-0"
     }
 
     splits {
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 84aa8cd47d56..404384dcc74b 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.0</string>
+	<string>1.3.1</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.0.1</string>
+	<string>1.3.1.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 3e41767a8d70..e64defa549fc 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.0</string>
+	<string>1.3.1</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.0.1</string>
+	<string>1.3.1.0</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index d1c30ca218ab..eb3f24392472 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.3.0-1",
+  "version": "1.3.1-0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.3.0-1",
+      "version": "1.3.1-0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 45dcf37f3ab8..4833fdb1eb03 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.0-1",
+  "version": "1.3.1-0",
   "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.",
diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js
index 527bba51e8b2..8feb32ea3a90 100644
--- a/src/components/AddressSearch.js
+++ b/src/components/AddressSearch.js
@@ -11,6 +11,7 @@ import TextInput from './TextInput';
 import * as ApiUtils from '../libs/ApiUtils';
 import * as GooglePlacesUtils from '../libs/GooglePlacesUtils';
 import CONST from '../CONST';
+import * as StyleUtils from '../styles/StyleUtils';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -259,10 +260,7 @@ const AddressSearch = (props) => {
                     styles={{
                         textInputContainer: [styles.flexColumn],
                         listView: [
-                            !displayListViewBorder && styles.googleListView,
-                            displayListViewBorder && styles.borderTopRounded,
-                            displayListViewBorder && styles.borderBottomRounded,
-                            displayListViewBorder && styles.mt1,
+                            StyleUtils.getGoolgeListViewStyle(displayListViewBorder),
                             styles.overflowAuto,
                             styles.borderLeft,
                             styles.borderRight,
diff --git a/src/components/CustomStatusBar/index.web.js b/src/components/CustomStatusBar/index.web.js
index 614aa55aab5b..4f9b8d2c044d 100644
--- a/src/components/CustomStatusBar/index.web.js
+++ b/src/components/CustomStatusBar/index.web.js
@@ -7,7 +7,10 @@ export default class CustomStatusBar extends React.Component {
         StatusBar.setBarStyle('light-content', true);
 
         // For mobile web browsers, match the default status bar color to the app's background color
-        document.querySelector('meta[name=theme-color]').content = themeColors.appBG;
+        const element = document.querySelector('meta[name=theme-color]');
+        if (element) {
+            element.content = themeColors.appBG;
+        }
     }
 
     render() {
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 57b391007eae..58958d1fd360 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -36,7 +36,7 @@ const EmojiPickerButton = (props) => {
                     StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
                 ])}
                 disabled={props.isDisabled}
-                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, props.onWillShow)}
+                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor)}
                 nativeID={props.nativeID}
             >
                 {({hovered, pressed}) => (
diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js
index 3cb6f3561b60..b79080b9789d 100644
--- a/src/components/Modal/index.web.js
+++ b/src/components/Modal/index.web.js
@@ -12,7 +12,10 @@ const Modal = (props) => {
         }
 
         // Change the color of the status bar to align with the modal's backdrop (refer to https://github.com/Expensify/App/issues/12156).
-        document.querySelector('meta[name=theme-color]').content = color;
+        const element = document.querySelector('meta[name=theme-color]');
+        if (element) {
+            element.content = color;
+        }
     };
 
     const hideModal = () => {
diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js
index dfb90b61af98..30169d995528 100644
--- a/src/components/TextInput/baseTextInputPropTypes.js
+++ b/src/components/TextInput/baseTextInputPropTypes.js
@@ -47,7 +47,11 @@ const propTypes = {
     hideFocusedState: PropTypes.bool,
 
     /** Forward the inner ref */
-    innerRef: PropTypes.func,
+    innerRef: PropTypes.oneOfType([
+        PropTypes.func,
+        // eslint-disable-next-line react/forbid-prop-types
+        PropTypes.shape({current: PropTypes.any}),
+    ]),
 
     /** Maximum characters allowed */
     maxLength: PropTypes.number,
diff --git a/src/pages/home/report/ReportActionCompose/index.js b/src/pages/home/report/ReportActionCompose.js
similarity index 90%
rename from src/pages/home/report/ReportActionCompose/index.js
rename to src/pages/home/report/ReportActionCompose.js
index 466fbfed49fa..aca688c797c3 100644
--- a/src/pages/home/report/ReportActionCompose/index.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -9,50 +9,49 @@ import {
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import styles from '../../../../styles/styles';
-import themeColors from '../../../../styles/themes/default';
-import Composer from '../../../../components/Composer';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import Icon from '../../../../components/Icon';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import AttachmentPicker from '../../../../components/AttachmentPicker';
-import * as Report from '../../../../libs/actions/Report';
-import ReportTypingIndicator from '../ReportTypingIndicator';
-import AttachmentModal from '../../../../components/AttachmentModal';
-import compose from '../../../../libs/compose';
-import PopoverMenu from '../../../../components/PopoverMenu';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
-import withDrawerState from '../../../../components/withDrawerState';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import willBlurTextInputOnTapOutside from '../../../../libs/willBlurTextInputOnTapOutside';
-import CONST from '../../../../CONST';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ROUTES from '../../../../ROUTES';
-import reportActionPropTypes from '../reportActionPropTypes';
-import * as ReportUtils from '../../../../libs/ReportUtils';
-import ReportActionComposeFocusManager from '../../../../libs/ReportActionComposeFocusManager';
-import participantPropTypes from '../../../../components/participantPropTypes';
-import ParticipantLocalTime from '../ParticipantLocalTime';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../../components/withCurrentUserPersonalDetails';
-import {withNetwork, withPersonalDetails} from '../../../../components/OnyxProvider';
-import * as User from '../../../../libs/actions/User';
-import Tooltip from '../../../../components/Tooltip';
-import EmojiPickerButton from '../../../../components/EmojiPicker/EmojiPickerButton';
-import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities';
-import toggleReportActionComposeView from '../../../../libs/toggleReportActionComposeView';
-import OfflineIndicator from '../../../../components/OfflineIndicator';
-import ExceededCommentLength from '../../../../components/ExceededCommentLength';
-import withNavigationFocus from '../../../../components/withNavigationFocus';
-import * as EmojiUtils from '../../../../libs/EmojiUtils';
-import ReportDropUI from '../ReportDropUI';
-import DragAndDrop from '../../../../components/DragAndDrop';
-import reportPropTypes from '../../../reportPropTypes';
-import EmojiSuggestions from '../../../../components/EmojiSuggestions';
-import withKeyboardState, {keyboardStatePropTypes} from '../../../../components/withKeyboardState';
-import ArrowKeyFocusManager from '../../../../components/ArrowKeyFocusManager';
-import KeyboardShortcut from '../../../../libs/KeyboardShortcut';
-import KeyDownAction from './keyDownAction';
-import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
+import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+import Composer from '../../../components/Composer';
+import ONYXKEYS from '../../../ONYXKEYS';
+import Icon from '../../../components/Icon';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import AttachmentPicker from '../../../components/AttachmentPicker';
+import * as Report from '../../../libs/actions/Report';
+import ReportTypingIndicator from './ReportTypingIndicator';
+import AttachmentModal from '../../../components/AttachmentModal';
+import compose from '../../../libs/compose';
+import PopoverMenu from '../../../components/PopoverMenu';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import withDrawerState from '../../../components/withDrawerState';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import willBlurTextInputOnTapOutside from '../../../libs/willBlurTextInputOnTapOutside';
+import CONST from '../../../CONST';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import reportActionPropTypes from './reportActionPropTypes';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
+import participantPropTypes from '../../../components/participantPropTypes';
+import ParticipantLocalTime from './ParticipantLocalTime';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
+import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
+import * as User from '../../../libs/actions/User';
+import Tooltip from '../../../components/Tooltip';
+import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
+import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
+import OfflineIndicator from '../../../components/OfflineIndicator';
+import ExceededCommentLength from '../../../components/ExceededCommentLength';
+import withNavigationFocus from '../../../components/withNavigationFocus';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
+import ReportDropUI from './ReportDropUI';
+import DragAndDrop from '../../../components/DragAndDrop';
+import reportPropTypes from '../../reportPropTypes';
+import EmojiSuggestions from '../../../components/EmojiSuggestions';
+import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState';
+import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
+import KeyboardShortcut from '../../../libs/KeyboardShortcut';
 
 const propTypes = {
     /** Beta features list */
@@ -169,8 +168,6 @@ class ReportActionCompose extends React.Component {
         this.setIsFullComposerAvailable = this.setIsFullComposerAvailable.bind(this);
         this.focus = this.focus.bind(this);
         this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
-        this.replaceSelectionWithInput = this.replaceSelectionWithInput.bind(this);
-        this.keydownListener = this.keydownListener.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.isEmojiCode = this.isEmojiCode.bind(this);
         this.setTextInputRef = this.setTextInputRef.bind(this);
@@ -209,13 +206,10 @@ class ReportActionCompose extends React.Component {
             isEmojiPickerLarge: false,
             composerHeight: 0,
             hasExceededMaxCommentLength: false,
-            isEmojiPickerVisible: false,
         };
     }
 
     componentDidMount() {
-        KeyDownAction.listenKeyDown(this.keydownListener);
-
         // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
         // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
         ReportActionComposeFocusManager.onComposerFocus(() => {
@@ -271,9 +265,6 @@ class ReportActionCompose extends React.Component {
     }
 
     componentWillUnmount() {
-        if (this.keydownListener) {
-            KeyDownAction.removeListenKeyDown(this.keydownListener);
-        }
         ReportActionComposeFocusManager.clear();
 
         if (this.unsubscribeEscapeKey) {
@@ -479,45 +470,6 @@ class ReportActionCompose extends React.Component {
         return _.size(this.props.reportActions) === 1;
     }
 
-    keydownListener(e) {
-        if (this.state.isFocused || this.state.isEmojiPickerVisible || this.props.modal.isVisible || this.props.isSmallScreenWidth) {
-            return;
-        }
-
-        // If the key pressed is non-character keys like Enter, Shift, ... do not focus
-        if (e.key.length > 1) {
-            return;
-        }
-
-        // If a key is pressed in combination with Meta, Control or Alt do not focus
-        if (e.metaKey || e.ctrlKey || e.altKey) {
-            return;
-        }
-
-        // If we're typing on another input/text area, do not focus
-        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
-            return;
-        }
-
-        this.focus();
-        this.replaceSelectionWithInput(e.key);
-    }
-
-    /**
-     * @param {String} text
-     */
-    replaceSelectionWithInput(text) {
-        const newComment = this.comment.slice(0, this.state.selection.start)
-            + text
-            + this.comment.slice(this.state.selection.end, this.comment.length);
-        this.setState(prevState => ({
-            selection: {
-                start: prevState.selection.start + text.length,
-                end: prevState.selection.start + text.length,
-            },
-        }), this.updateComment(newComment));
-    }
-
     /**
      * Callback for the emoji picker to add whatever emoji is chosen into the main input
      *
@@ -525,7 +477,16 @@ class ReportActionCompose extends React.Component {
      */
     addEmojiToTextBox(emoji) {
         const emojiWithSpace = `${emoji} `;
-        this.replaceSelectionWithInput(emojiWithSpace);
+        const newComment = this.comment.slice(0, this.state.selection.start)
+            + emojiWithSpace
+            + this.comment.slice(this.state.selection.end, this.comment.length);
+        this.setState(prevState => ({
+            selection: {
+                start: prevState.selection.start + emojiWithSpace.length,
+                end: prevState.selection.start + emojiWithSpace.length,
+            },
+        }));
+        this.updateComment(newComment);
     }
 
     /**
@@ -920,10 +881,8 @@ class ReportActionCompose extends React.Component {
                                 isDisabled={isBlockedFromConcierge || this.props.disabled}
                                 onModalHide={() => {
                                     this.focus(true);
-                                    this.setState({isEmojiPickerVisible: false});
                                 }}
                                 onEmojiSelected={this.addEmojiToTextBox}
-                                onWillShow={() => this.setState({isEmojiPickerVisible: true})}
                             />
                         )}
                         <View
diff --git a/src/pages/home/report/ReportActionCompose/keyDownAction.js b/src/pages/home/report/ReportActionCompose/keyDownAction.js
deleted file mode 100644
index ecd82f79e51d..000000000000
--- a/src/pages/home/report/ReportActionCompose/keyDownAction.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function listenKeyDown(callback) {
-    document.addEventListener('keydown', callback);
-}
-
-function removeListenKeyDown(callback) {
-    document.removeEventListener('keydown', callback);
-}
-
-export default {listenKeyDown, removeListenKeyDown};
-
diff --git a/src/pages/home/report/ReportActionCompose/keyDownAction.native.js b/src/pages/home/report/ReportActionCompose/keyDownAction.native.js
deleted file mode 100644
index 38244160ecb2..000000000000
--- a/src/pages/home/report/ReportActionCompose/keyDownAction.native.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function listenKeyDown() {}
-function removeListenKeyDown() {}
-
-export default {removeListenKeyDown, listenKeyDown};
-
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index c92e0a8a8575..f614ab69185d 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -979,6 +979,25 @@ function getDirectionStyle(direction) {
     return {};
 }
 
+/**
+ * @param {Boolean} shouldDisplayBorder
+ * @returns {Object}
+ */
+function getGoolgeListViewStyle(shouldDisplayBorder) {
+    if (shouldDisplayBorder) {
+        return {
+            ...styles.borderTopRounded,
+            ...styles.borderBottomRounded,
+            marginTop: 4,
+            paddingVertical: 6,
+        };
+    }
+
+    return {
+        transform: [{scale: 0}],
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -1032,4 +1051,5 @@ export {
     getDirectionStyle,
     getFontSizeStyle,
     getSignInWordmarkWidthStyle,
+    getGoolgeListViewStyle,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8557504c4cc1..d01703172852 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2792,10 +2792,6 @@ const styles = {
         right: 60,
     },
 
-    googleListView: {
-        transform: [{scale: 0}],
-    },
-
     invert: {
         // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
         transform: [{scaleX: -1}, {scaleY: -1}],

From 8bb088258319a589afa96ae3fb027d9bd5391416 Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 15:58:48 -0700
Subject: [PATCH 10/13] revert unecessarily included changes

---
 .storybook/preview.js                         |   2 -
 android/app/build.gradle                      |   4 +-
 ios/NewExpensify/Info.plist                   |   4 +-
 ios/NewExpensifyTests/Info.plist              |   4 +-
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/components/AddressSearch.js               |   6 +-
 src/components/CustomStatusBar/index.web.js   |   5 +-
 .../EmojiPicker/EmojiPickerButton.js          |   2 +-
 src/components/Modal/index.web.js             |   5 +-
 .../index.js}                                 | 147 +++++++++++-------
 .../ReportActionCompose/keyDownAction.js      |  10 ++
 .../keyDownAction.native.js                   |   5 +
 src/styles/StyleUtils.js                      |  20 ---
 src/styles/styles.js                          |   4 +
 15 files changed, 129 insertions(+), 95 deletions(-)
 rename src/pages/home/report/{ReportActionCompose.js => ReportActionCompose/index.js} (90%)
 create mode 100644 src/pages/home/report/ReportActionCompose/keyDownAction.js
 create mode 100644 src/pages/home/report/ReportActionCompose/keyDownAction.native.js

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 6c4c13861f8b..d69b253a18b6 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Onyx from 'react-native-onyx';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
 import './fonts.css';
 import ComposeProviders from '../src/components/ComposeProviders';
 import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
@@ -19,7 +18,6 @@ const decorators = [
                 OnyxProvider,
                 LocaleContextProvider,
                 HTMLEngineProvider,
-                SafeAreaProvider,
             ]}
         >
             <Story />
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 3368dd86cd80..5bd5feb9db6a 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030100
-        versionName "1.3.1-0"
+        versionCode 1001030001
+        versionName "1.3.0-1"
     }
 
     splits {
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 404384dcc74b..84aa8cd47d56 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.1</string>
+	<string>1.3.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.1.0</string>
+	<string>1.3.0.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index e64defa549fc..3e41767a8d70 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.1</string>
+	<string>1.3.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.1.0</string>
+	<string>1.3.0.1</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index eb3f24392472..d1c30ca218ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.3.1-0",
+  "version": "1.3.0-1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.3.1-0",
+      "version": "1.3.0-1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 4833fdb1eb03..45dcf37f3ab8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.1-0",
+  "version": "1.3.0-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.",
diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js
index 8feb32ea3a90..527bba51e8b2 100644
--- a/src/components/AddressSearch.js
+++ b/src/components/AddressSearch.js
@@ -11,7 +11,6 @@ import TextInput from './TextInput';
 import * as ApiUtils from '../libs/ApiUtils';
 import * as GooglePlacesUtils from '../libs/GooglePlacesUtils';
 import CONST from '../CONST';
-import * as StyleUtils from '../styles/StyleUtils';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -260,7 +259,10 @@ const AddressSearch = (props) => {
                     styles={{
                         textInputContainer: [styles.flexColumn],
                         listView: [
-                            StyleUtils.getGoolgeListViewStyle(displayListViewBorder),
+                            !displayListViewBorder && styles.googleListView,
+                            displayListViewBorder && styles.borderTopRounded,
+                            displayListViewBorder && styles.borderBottomRounded,
+                            displayListViewBorder && styles.mt1,
                             styles.overflowAuto,
                             styles.borderLeft,
                             styles.borderRight,
diff --git a/src/components/CustomStatusBar/index.web.js b/src/components/CustomStatusBar/index.web.js
index 4f9b8d2c044d..614aa55aab5b 100644
--- a/src/components/CustomStatusBar/index.web.js
+++ b/src/components/CustomStatusBar/index.web.js
@@ -7,10 +7,7 @@ export default class CustomStatusBar extends React.Component {
         StatusBar.setBarStyle('light-content', true);
 
         // For mobile web browsers, match the default status bar color to the app's background color
-        const element = document.querySelector('meta[name=theme-color]');
-        if (element) {
-            element.content = themeColors.appBG;
-        }
+        document.querySelector('meta[name=theme-color]').content = themeColors.appBG;
     }
 
     render() {
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 58958d1fd360..57b391007eae 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -36,7 +36,7 @@ const EmojiPickerButton = (props) => {
                     StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
                 ])}
                 disabled={props.isDisabled}
-                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor)}
+                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, props.onWillShow)}
                 nativeID={props.nativeID}
             >
                 {({hovered, pressed}) => (
diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js
index b79080b9789d..3cb6f3561b60 100644
--- a/src/components/Modal/index.web.js
+++ b/src/components/Modal/index.web.js
@@ -12,10 +12,7 @@ const Modal = (props) => {
         }
 
         // Change the color of the status bar to align with the modal's backdrop (refer to https://github.com/Expensify/App/issues/12156).
-        const element = document.querySelector('meta[name=theme-color]');
-        if (element) {
-            element.content = color;
-        }
+        document.querySelector('meta[name=theme-color]').content = color;
     };
 
     const hideModal = () => {
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/index.js
similarity index 90%
rename from src/pages/home/report/ReportActionCompose.js
rename to src/pages/home/report/ReportActionCompose/index.js
index aca688c797c3..466fbfed49fa 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/index.js
@@ -9,49 +9,50 @@ import {
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import styles from '../../../styles/styles';
-import themeColors from '../../../styles/themes/default';
-import Composer from '../../../components/Composer';
-import ONYXKEYS from '../../../ONYXKEYS';
-import Icon from '../../../components/Icon';
-import * as Expensicons from '../../../components/Icon/Expensicons';
-import AttachmentPicker from '../../../components/AttachmentPicker';
-import * as Report from '../../../libs/actions/Report';
-import ReportTypingIndicator from './ReportTypingIndicator';
-import AttachmentModal from '../../../components/AttachmentModal';
-import compose from '../../../libs/compose';
-import PopoverMenu from '../../../components/PopoverMenu';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import withDrawerState from '../../../components/withDrawerState';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import willBlurTextInputOnTapOutside from '../../../libs/willBlurTextInputOnTapOutside';
-import CONST from '../../../CONST';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
-import reportActionPropTypes from './reportActionPropTypes';
-import * as ReportUtils from '../../../libs/ReportUtils';
-import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
-import participantPropTypes from '../../../components/participantPropTypes';
-import ParticipantLocalTime from './ParticipantLocalTime';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
-import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
-import * as User from '../../../libs/actions/User';
-import Tooltip from '../../../components/Tooltip';
-import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
-import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
-import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
-import OfflineIndicator from '../../../components/OfflineIndicator';
-import ExceededCommentLength from '../../../components/ExceededCommentLength';
-import withNavigationFocus from '../../../components/withNavigationFocus';
-import * as EmojiUtils from '../../../libs/EmojiUtils';
-import ReportDropUI from './ReportDropUI';
-import DragAndDrop from '../../../components/DragAndDrop';
-import reportPropTypes from '../../reportPropTypes';
-import EmojiSuggestions from '../../../components/EmojiSuggestions';
-import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState';
-import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager';
-import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
-import KeyboardShortcut from '../../../libs/KeyboardShortcut';
+import styles from '../../../../styles/styles';
+import themeColors from '../../../../styles/themes/default';
+import Composer from '../../../../components/Composer';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import Icon from '../../../../components/Icon';
+import * as Expensicons from '../../../../components/Icon/Expensicons';
+import AttachmentPicker from '../../../../components/AttachmentPicker';
+import * as Report from '../../../../libs/actions/Report';
+import ReportTypingIndicator from '../ReportTypingIndicator';
+import AttachmentModal from '../../../../components/AttachmentModal';
+import compose from '../../../../libs/compose';
+import PopoverMenu from '../../../../components/PopoverMenu';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
+import withDrawerState from '../../../../components/withDrawerState';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import willBlurTextInputOnTapOutside from '../../../../libs/willBlurTextInputOnTapOutside';
+import CONST from '../../../../CONST';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
+import reportActionPropTypes from '../reportActionPropTypes';
+import * as ReportUtils from '../../../../libs/ReportUtils';
+import ReportActionComposeFocusManager from '../../../../libs/ReportActionComposeFocusManager';
+import participantPropTypes from '../../../../components/participantPropTypes';
+import ParticipantLocalTime from '../ParticipantLocalTime';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../../components/withCurrentUserPersonalDetails';
+import {withNetwork, withPersonalDetails} from '../../../../components/OnyxProvider';
+import * as User from '../../../../libs/actions/User';
+import Tooltip from '../../../../components/Tooltip';
+import EmojiPickerButton from '../../../../components/EmojiPicker/EmojiPickerButton';
+import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities';
+import toggleReportActionComposeView from '../../../../libs/toggleReportActionComposeView';
+import OfflineIndicator from '../../../../components/OfflineIndicator';
+import ExceededCommentLength from '../../../../components/ExceededCommentLength';
+import withNavigationFocus from '../../../../components/withNavigationFocus';
+import * as EmojiUtils from '../../../../libs/EmojiUtils';
+import ReportDropUI from '../ReportDropUI';
+import DragAndDrop from '../../../../components/DragAndDrop';
+import reportPropTypes from '../../../reportPropTypes';
+import EmojiSuggestions from '../../../../components/EmojiSuggestions';
+import withKeyboardState, {keyboardStatePropTypes} from '../../../../components/withKeyboardState';
+import ArrowKeyFocusManager from '../../../../components/ArrowKeyFocusManager';
+import KeyboardShortcut from '../../../../libs/KeyboardShortcut';
+import KeyDownAction from './keyDownAction';
+import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
 
 const propTypes = {
     /** Beta features list */
@@ -168,6 +169,8 @@ class ReportActionCompose extends React.Component {
         this.setIsFullComposerAvailable = this.setIsFullComposerAvailable.bind(this);
         this.focus = this.focus.bind(this);
         this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
+        this.replaceSelectionWithInput = this.replaceSelectionWithInput.bind(this);
+        this.keydownListener = this.keydownListener.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.isEmojiCode = this.isEmojiCode.bind(this);
         this.setTextInputRef = this.setTextInputRef.bind(this);
@@ -206,10 +209,13 @@ class ReportActionCompose extends React.Component {
             isEmojiPickerLarge: false,
             composerHeight: 0,
             hasExceededMaxCommentLength: false,
+            isEmojiPickerVisible: false,
         };
     }
 
     componentDidMount() {
+        KeyDownAction.listenKeyDown(this.keydownListener);
+
         // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
         // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
         ReportActionComposeFocusManager.onComposerFocus(() => {
@@ -265,6 +271,9 @@ class ReportActionCompose extends React.Component {
     }
 
     componentWillUnmount() {
+        if (this.keydownListener) {
+            KeyDownAction.removeListenKeyDown(this.keydownListener);
+        }
         ReportActionComposeFocusManager.clear();
 
         if (this.unsubscribeEscapeKey) {
@@ -470,23 +479,53 @@ class ReportActionCompose extends React.Component {
         return _.size(this.props.reportActions) === 1;
     }
 
+    keydownListener(e) {
+        if (this.state.isFocused || this.state.isEmojiPickerVisible || this.props.modal.isVisible || this.props.isSmallScreenWidth) {
+            return;
+        }
+
+        // If the key pressed is non-character keys like Enter, Shift, ... do not focus
+        if (e.key.length > 1) {
+            return;
+        }
+
+        // If a key is pressed in combination with Meta, Control or Alt do not focus
+        if (e.metaKey || e.ctrlKey || e.altKey) {
+            return;
+        }
+
+        // If we're typing on another input/text area, do not focus
+        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
+            return;
+        }
+
+        this.focus();
+        this.replaceSelectionWithInput(e.key);
+    }
+
     /**
-     * Callback for the emoji picker to add whatever emoji is chosen into the main input
-     *
-     * @param {String} emoji
+     * @param {String} text
      */
-    addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
+    replaceSelectionWithInput(text) {
         const newComment = this.comment.slice(0, this.state.selection.start)
-            + emojiWithSpace
+            + text
             + this.comment.slice(this.state.selection.end, this.comment.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + text.length,
+                end: prevState.selection.start + text.length,
             },
-        }));
-        this.updateComment(newComment);
+        }), this.updateComment(newComment));
+    }
+
+    /**
+     * Callback for the emoji picker to add whatever emoji is chosen into the main input
+     *
+     * @param {String} emoji
+     */
+    addEmojiToTextBox(emoji) {
+        const emojiWithSpace = `${emoji} `;
+        this.replaceSelectionWithInput(emojiWithSpace);
     }
 
     /**
@@ -881,8 +920,10 @@ class ReportActionCompose extends React.Component {
                                 isDisabled={isBlockedFromConcierge || this.props.disabled}
                                 onModalHide={() => {
                                     this.focus(true);
+                                    this.setState({isEmojiPickerVisible: false});
                                 }}
                                 onEmojiSelected={this.addEmojiToTextBox}
+                                onWillShow={() => this.setState({isEmojiPickerVisible: true})}
                             />
                         )}
                         <View
diff --git a/src/pages/home/report/ReportActionCompose/keyDownAction.js b/src/pages/home/report/ReportActionCompose/keyDownAction.js
new file mode 100644
index 000000000000..ecd82f79e51d
--- /dev/null
+++ b/src/pages/home/report/ReportActionCompose/keyDownAction.js
@@ -0,0 +1,10 @@
+function listenKeyDown(callback) {
+    document.addEventListener('keydown', callback);
+}
+
+function removeListenKeyDown(callback) {
+    document.removeEventListener('keydown', callback);
+}
+
+export default {listenKeyDown, removeListenKeyDown};
+
diff --git a/src/pages/home/report/ReportActionCompose/keyDownAction.native.js b/src/pages/home/report/ReportActionCompose/keyDownAction.native.js
new file mode 100644
index 000000000000..38244160ecb2
--- /dev/null
+++ b/src/pages/home/report/ReportActionCompose/keyDownAction.native.js
@@ -0,0 +1,5 @@
+function listenKeyDown() {}
+function removeListenKeyDown() {}
+
+export default {removeListenKeyDown, listenKeyDown};
+
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index f614ab69185d..c92e0a8a8575 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -979,25 +979,6 @@ function getDirectionStyle(direction) {
     return {};
 }
 
-/**
- * @param {Boolean} shouldDisplayBorder
- * @returns {Object}
- */
-function getGoolgeListViewStyle(shouldDisplayBorder) {
-    if (shouldDisplayBorder) {
-        return {
-            ...styles.borderTopRounded,
-            ...styles.borderBottomRounded,
-            marginTop: 4,
-            paddingVertical: 6,
-        };
-    }
-
-    return {
-        transform: [{scale: 0}],
-    };
-}
-
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -1051,5 +1032,4 @@ export {
     getDirectionStyle,
     getFontSizeStyle,
     getSignInWordmarkWidthStyle,
-    getGoolgeListViewStyle,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d01703172852..8557504c4cc1 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2792,6 +2792,10 @@ const styles = {
         right: 60,
     },
 
+    googleListView: {
+        transform: [{scale: 0}],
+    },
+
     invert: {
         // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
         transform: [{scaleX: -1}, {scaleY: -1}],

From b162e3aa9893368e2bb0266107fec1df80a69bac Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Mon, 17 Apr 2023 16:08:57 -0700
Subject: [PATCH 11/13] include missing dependency

---
 src/pages/settings/Payments/AddPayPalMePage.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index ac705b5d0c7e..924176812ddf 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -29,6 +29,8 @@ const AddPayPalMePage = (props) => {
     const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
     const payPalMeInput = useRef(null);
 
+    const growlMessageOnSave = props.translate('addPayPalMePage.growlMessageOnSave');
+
     /**
      * Sets the payPalMe username and error data for the current user
      */
@@ -40,9 +42,9 @@ const AddPayPalMePage = (props) => {
         setPayPalMeUsernameError(false);
         User.addPaypalMeAddress(payPalMeUsername);
 
-        Growl.show(props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
+        Growl.show(growlMessageOnSave, CONST.GROWL.SUCCESS, 3000);
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
-    }, [payPalMeUsername]);
+    }, [payPalMeUsername, growlMessageOnSave]);
 
     return (
         <ScreenWrapper onEntryTransitionEnd={() => payPalMeInput.current && payPalMeInput.current.focus()}>

From 13ff34e25a776b284899f18d212e39fde1df502a Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Tue, 18 Apr 2023 17:37:00 -0700
Subject: [PATCH 12/13] fix paypal me focus for native apps

---
 src/components/TextInput/BaseTextInput.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index bed1129abbe9..0735bec31512 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -277,7 +277,11 @@ class BaseTextInput extends Component {
                                     )}
                                     <RNTextInput
                                         ref={(ref) => {
-                                            if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); }
+                                            if (typeof this.props.innerRef === 'function') {
+                                                this.props.innerRef(ref);
+                                            } else if (this.props.innerRef && this.props.innerRef.hasOwnProperty('current')) {
+                                                this.props.innerRef.current = ref;
+                                            }
                                             this.input = ref;
                                         }}
                                         // eslint-disable-next-line

From 8c789f821fc0324eed9debd0739b676753ac66c0 Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Wed, 19 Apr 2023 10:00:52 -0700
Subject: [PATCH 13/13] use underscore to fix eslint error

---
 src/components/TextInput/BaseTextInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 0735bec31512..6fa78a513449 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -279,7 +279,7 @@ class BaseTextInput extends Component {
                                         ref={(ref) => {
                                             if (typeof this.props.innerRef === 'function') {
                                                 this.props.innerRef(ref);
-                                            } else if (this.props.innerRef && this.props.innerRef.hasOwnProperty('current')) {
+                                            } else if (this.props.innerRef && _.has(this.props.innerRef, 'current')) {
                                                 this.props.innerRef.current = ref;
                                             }
                                             this.input = ref;