fixed conflicts

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001034400
-        versionName "1.3.44-0"
+        versionCode 1001034401
+        versionName "1.3.44-1"
     }
 
     splits {

config/webpack/webpack.dev.js

@@ -5,7 +5,7 @@ const {merge} = require('webpack-merge');
 const {TimeAnalyticsPlugin} = require('time-analytics-webpack-plugin');
 const getCommonConfig = require('./webpack.common');
 
-const BASE_PORT = 8080;
+const BASE_PORT = 8082;
 
 /**
  * Configuration for the local dev server

desktop/start.js

@@ -3,7 +3,7 @@ const portfinder = require('portfinder');
 const concurrently = require('concurrently');
 require('dotenv').config();
 
-const basePort = 8080;
+const basePort = 8082;
 
 portfinder
     .getPortPromise({

docs/_includes/CONST.html

@@ -1,7 +1,7 @@
 {% if jekyll.environment == "production" %}
     {% assign MAIN_SITE_URL = "https://new.expensify.com" %}
 {% else %}
-    {% assign MAIN_SITE_URL = "http://localhost:8080" %}
+    {% assign MAIN_SITE_URL = "http://localhost:8082" %}
 {% endif %}
 
 {% capture CONCIERGE_CHAT_URL %}{{MAIN_SITE_URL}}/concierge{% endcapture %}

ios/NewExpensify/Info.plist

@@ -32,7 +32,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.44.0</string>
+	<string>1.3.44.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.3.44.0</string>
+	<string>1.3.44.1</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.44-0",
+  "version": "1.3.44-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.",
@@ -9,11 +9,11 @@
   "scripts": {
     "postinstall": "scripts/postInstall.sh",
     "clean": "npx react-native clean-project-auto",
-    "android": "scripts/set-pusher-suffix.sh && npx react-native run-android --port=8083",
-    "ios": "scripts/set-pusher-suffix.sh && npx react-native run-ios --port=8082",
+    "android": "scripts/set-pusher-suffix.sh && npx react-native run-android",
+    "ios": "scripts/set-pusher-suffix.sh && npx react-native run-ios",
     "pod-install": "cd ios && bundle exec pod install",
-    "ipad": "concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (12.9-inch) (4th generation)\"\"",
-    "ipad-sm": "concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (9.7-inch)\"\"",
+    "ipad": "concurrently \"npx react-native run-ios --simulator=\"iPad Pro (12.9-inch) (4th generation)\"\"",
+    "ipad-sm": "concurrently \"npx react-native run-ios --simulator=\"iPad Pro (9.7-inch)\"\"",
     "start": "npx react-native start",
     "web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server",
     "web-proxy": "node web/proxy.js",

src/components/Composer/index.js

@@ -10,6 +10,7 @@ import themeColors from '../../styles/themes/default';
 import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable';
 import * as ComposerUtils from '../../libs/ComposerUtils';
 import * as Browser from '../../libs/Browser';
+import * as StyleUtils from '../../styles/StyleUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
@@ -482,6 +483,7 @@ class Composer extends React.Component {
                         // We are hiding the scrollbar to prevent it from reducing the text input width,
                         // so we can get the correct scroll height while calculating the number of lines.
                         this.state.numberOfLines < this.props.maxLines ? styles.overflowHidden : {},
+                        StyleUtils.getComposeTextAreaPadding(this.props.numberOfLines),
                     ]}
                     /* eslint-disable-next-line react/jsx-props-no-spreading */
                     {...propsWithoutStyles}

src/components/KeyboardSpacer/BaseKeyboardSpacer.js

@@ -1,66 +1,53 @@
-import React, {PureComponent} from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import {Dimensions, Keyboard, View} from 'react-native';
 import * as StyleUtils from '../../styles/StyleUtils';
 import {propTypes, defaultProps} from './BaseKeyboardSpacerPropTypes';
 
-class BaseKeyboardSpacer extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
-            keyboardSpace: 0,
-        };
-        this.keyboardListeners = null;
-        this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this);
-        this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this);
-    }
-
-    componentDidMount() {
-        const updateListener = this.props.keyboardShowMethod;
-        const resetListener = this.props.keyboardHideMethod;
-        this.keyboardListeners = [Keyboard.addListener(updateListener, this.updateKeyboardSpace), Keyboard.addListener(resetListener, this.resetKeyboardSpace)];
-    }
-
-    componentWillUnmount() {
-        this.keyboardListeners.forEach((listener) => listener.remove());
-    }
+function BaseKeyboardSpacer(props) {
+    const [keyboardSpace, setKeyboardSpace] = useState(0);
 
     /**
      * Update the height of Keyboard View.
      *
      * @param {Object} [event] - A Keyboard Event.
      */
-    updateKeyboardSpace(event) {
-        if (!event.endCoordinates) {
-            return;
-        }
-
-        const screenHeight = Dimensions.get('window').height;
-        const keyboardSpace = screenHeight - event.endCoordinates.screenY + this.props.topSpacing;
-        this.setState(
-            {
-                keyboardSpace,
-            },
-            this.props.onToggle(true, keyboardSpace),
-        );
-    }
+    const updateKeyboardSpace = useCallback(
+        (event) => {
+            if (!event.endCoordinates) {
+                return;
+            }
+
+            const screenHeight = Dimensions.get('window').height;
+            const space = screenHeight - event.endCoordinates.screenY + props.topSpacing;
+            setKeyboardSpace(space);
+            props.onToggle(true, space);
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
 
     /**
      * Reset the height of Keyboard View.
      *
      * @param {Object} [event] - A Keyboard Event.
      */
-    resetKeyboardSpace() {
-        this.setState(
-            {
-                keyboardSpace: 0,
-            },
-            this.props.onToggle(false, 0),
-        );
-    }
+    const resetKeyboardSpace = useCallback(() => {
+        setKeyboardSpace(0);
+        props.onToggle(false, 0);
+    }, [setKeyboardSpace, props]);
+
+    useEffect(() => {
+        const updateListener = props.keyboardShowMethod;
+        const resetListener = props.keyboardHideMethod;
+        const keyboardListeners = [Keyboard.addListener(updateListener, updateKeyboardSpace), Keyboard.addListener(resetListener, resetKeyboardSpace)];
+
+        return () => {
+            keyboardListeners.forEach((listener) => listener.remove());
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-    render() {
-        return <View style={StyleUtils.getHeight(this.state.keyboardSpace)} />;
-    }
+    return <View style={StyleUtils.getHeight(keyboardSpace)} />;
 }
 
 BaseKeyboardSpacer.defaultProps = defaultProps;

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {View, InteractionManager} from 'react-native';
 import Button from '../Button';
 import FixedFooter from '../FixedFooter';
 import OptionsList from '../OptionsList';
@@ -125,6 +125,14 @@ class BaseOptionsSelector extends Component {
     }
 
     componentDidUpdate(prevProps) {
+        if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) {
+            InteractionManager.runAfterInteractions(() => {
+                // If we automatically focus on a text input when mounting a component,
+                // let's automatically focus on it when the component updates as well (eg, when navigating back from a page)
+                this.textInput.focus();
+            });
+        }
+
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }

src/components/ReportActionItem/TaskView.js

@@ -109,7 +109,7 @@ function TaskView(props) {
                 onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
                 shouldShowRightIcon={isOpen}
                 disabled={disableState}
-                wrapperStyle={[styles.pv2]}
+                wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
                 shouldGreyOutWhenDisabled={false}
                 numberOfLinesTitle={0}
             />

src/components/ReportWelcomeText.js

@@ -114,9 +114,7 @@ function ReportWelcomeText(props) {
                         ))}
                     </Text>
                 )}
-                {(moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)) && (
-                    <Text>{props.translate('reportActionsView.usePlusButton')}</Text>
-                )}
+                {moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST) && <Text>{props.translate('reportActionsView.usePlusButton')}</Text>}
             </Text>
         </>
     );

src/components/TextInput/BaseTextInput.js

@@ -395,7 +395,8 @@ function BaseTextInput(props) {
                         setTextInputHeight(e.nativeEvent.layout.height);
                     }}
                 >
-                    {props.value || props.placeholder}
+                    {/* \u200B added to solve the issue of not expanding the text input enough when the value ends with '\n' (https://github.com/Expensify/App/issues/21271) */}
+                    {props.value ? `${props.value}${props.value.endsWith('\n') ? '\u200B' : ''}` : props.placeholder}
                 </Text>
             )}
         </>

src/components/withWindowDimensions.js

@@ -1,4 +1,4 @@
-import React, {forwardRef, createContext} from 'react';
+import React, {forwardRef, createContext, useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {Dimensions} from 'react-native';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
@@ -32,77 +32,63 @@ const windowDimensionsProviderPropTypes = {
     children: PropTypes.node.isRequired,
 };
 
-class WindowDimensionsProvider extends React.Component {
-    constructor(props) {
-        super(props);
+function WindowDimensionsProvider(props) {
+    const [windowDimension, setWindowDimension] = useState(() => {
+        const initialDimensions = Dimensions.get('window');
+        return {
+            windowHeight: initialDimensions.height,
+            windowWidth: initialDimensions.width,
+        };
+    });
 
-        this.onDimensionChange = this.onDimensionChange.bind(this);
+    useEffect(() => {
+        const onDimensionChange = (newDimensions) => {
+            const {window} = newDimensions;
 
-        const initialDimensions = Dimensions.get('window');
+            setWindowDimension({
+                windowHeight: window.height,
+                windowWidth: window.width,
+            });
+        };
 
-        this.dimensionsEventListener = null;
+        const dimensionsEventListener = Dimensions.addEventListener('change', onDimensionChange);
 
-        this.state = {
-            windowHeight: initialDimensions.height,
-            windowWidth: initialDimensions.width,
+        return () => {
+            if (!dimensionsEventListener) {
+                return;
+            }
+            dimensionsEventListener.remove();
         };
-    }
-
-    componentDidMount() {
-        this.dimensionsEventListener = Dimensions.addEventListener('change', this.onDimensionChange);
-    }
-
-    componentWillUnmount() {
-        if (!this.dimensionsEventListener) {
-            return;
-        }
-        this.dimensionsEventListener.remove();
-    }
-
-    /**
-     * Stores the application window's width and height in a component state variable.
-     * Called each time the application's window dimensions or screen dimensions change.
-     * @link https://reactnative.dev/docs/dimensions
-     * @param {Object} newDimensions Dimension object containing updated window and screen dimensions
-     */
-    onDimensionChange(newDimensions) {
-        const {window} = newDimensions;
-
-        this.setState({
-            windowHeight: window.height,
-            windowWidth: window.width,
-        });
-    }
-
-    render() {
-        return (
-            <SafeAreaInsetsContext.Consumer>
-                {(insets) => {
-                    const isExtraSmallScreenWidth = this.state.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
-                    const isSmallScreenWidth = this.state.windowWidth <= variables.mobileResponsiveWidthBreakpoint;
-                    const isMediumScreenWidth = !isSmallScreenWidth && this.state.windowWidth <= variables.tabletResponsiveWidthBreakpoint;
-                    const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth;
-                    return (
-                        <WindowDimensionsContext.Provider
-                            value={{
-                                windowHeight: this.state.windowHeight + getWindowHeightAdjustment(insets),
-                                windowWidth: this.state.windowWidth,
-                                isExtraSmallScreenWidth,
-                                isSmallScreenWidth,
-                                isMediumScreenWidth,
-                                isLargeScreenWidth,
-                            }}
-                        >
-                            {this.props.children}
-                        </WindowDimensionsContext.Provider>
-                    );
-                }}
-            </SafeAreaInsetsContext.Consumer>
-        );
-    }
+    }, []);
+
+    return (
+        <SafeAreaInsetsContext.Consumer>
+            {(insets) => {
+                const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
+                const isSmallScreenWidth = windowDimension.windowWidth <= variables.mobileResponsiveWidthBreakpoint;
+                const isMediumScreenWidth = !isSmallScreenWidth && windowDimension.windowWidth <= variables.tabletResponsiveWidthBreakpoint;
+                const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth;
+                return (
+                    <WindowDimensionsContext.Provider
+                        value={{
+                            windowHeight: windowDimension.windowHeight + getWindowHeightAdjustment(insets),
+                            windowWidth: windowDimension.windowWidth,
+                            isExtraSmallScreenWidth,
+                            isSmallScreenWidth,
+                            isMediumScreenWidth,
+                            isLargeScreenWidth,
+                        }}
+                    >
+                        {props.children}
+                    </WindowDimensionsContext.Provider>
+                );
+            }}
+        </SafeAreaInsetsContext.Consumer>
+    );
 }
 
 WindowDimensionsProvider.propTypes = windowDimensionsProviderPropTypes;
+WindowDimensionsProvider.displayName = 'WindowDimensionsProvider';
 
 /**
  * @param {React.Component} WrappedComponent