🍒 Cherry pick PR #72106 to staging 🍒

android/app/build.gradle

@@ -114,8 +114,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009022703
-        versionName "9.2.27-3"
+        versionCode 1009022704
+        versionName "9.2.27-4"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

ios/NewExpensify/Info.plist

@@ -44,7 +44,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.2.27.3</string>
+	<string>9.2.27.4</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.2.27</string>
 	<key>CFBundleVersion</key>
-	<string>9.2.27.3</string>
+	<string>9.2.27.4</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

ios/ShareViewController/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.2.27</string>
 	<key>CFBundleVersion</key>
-	<string>9.2.27.3</string>
+	<string>9.2.27.4</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionAttributes</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.2.27-3",
+  "version": "9.2.27-4",
   "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/ActionSheetAwareScrollView/index.ios.tsx

@@ -1,10 +1,12 @@
-import React, {useCallback} from 'react';
+import React, {forwardRef, useCallback} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {ScrollView} from 'react-native';
 import Reanimated, {useAnimatedRef, useAnimatedStyle} from 'react-native-reanimated';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
 import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
 import useActionSheetKeyboardSpacing from './useActionSheetKeyboardSpacing';
 
-function ActionSheetAwareScrollView({style, children, ref, ...props}: ActionSheetAwareScrollViewProps) {
+const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>(({style, children, ...props}, ref) => {
     const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
 
     const onRef = useCallback(
@@ -36,7 +38,7 @@ function ActionSheetAwareScrollView({style, children, ref, ...props}: ActionShee
             {children}
         </Reanimated.ScrollView>
     );
-}
+});
 
 export default ActionSheetAwareScrollView;
 

src/components/ActionSheetAwareScrollView/index.tsx

@@ -1,21 +1,20 @@
 // this whole file is just for other platforms
 // iOS version has everything implemented
-import React from 'react';
+import React, {forwardRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {ScrollView} from 'react-native';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
 import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
 
-function ActionSheetAwareScrollView(props: ActionSheetAwareScrollViewProps) {
-    return (
-        <ScrollView
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        >
-            {props.children}
-        </ScrollView>
-    );
-}
+const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>((props, ref) => (
+    <ScrollView
+        ref={ref}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </ScrollView>
+));
 
 export default ActionSheetAwareScrollView;
 

src/components/ActionSheetAwareScrollView/types.ts

@@ -1,10 +1,6 @@
-import type {PropsWithChildren, Ref} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import type {ScrollView, ScrollViewProps} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import type {ScrollViewProps} from 'react-native';
 
-type ActionSheetAwareScrollViewAnimationProps = {
-    ref?: Ref<ScrollView>;
-};
-type ActionSheetAwareScrollViewProps = PropsWithChildren<ScrollViewProps> & ActionSheetAwareScrollViewAnimationProps;
+type ActionSheetAwareScrollViewProps = PropsWithChildren<ScrollViewProps>;
 type RenderActionSheetAwareScrollViewComponent = ((props: ActionSheetAwareScrollViewProps) => React.ReactElement<ScrollViewProps>) | undefined;
 export type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent};

src/components/AddressSearch/index.tsx

@@ -1,4 +1,5 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {Keyboard, LogBox, View} from 'react-native';
 import type {LayoutChangeEvent} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
@@ -48,38 +49,40 @@ function isPlaceMatchForSearch(search: string, place: PredefinedPlace): boolean
 // VirtualizedList component with a VirtualizedList-backed instead
 LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
 
-function AddressSearch({
-    canUseCurrentLocation = false,
-    containerStyles,
-    defaultValue,
-    errorText = '',
-    hint = '',
-    inputID,
-    limitSearchesToCountry,
-    label,
-    maxInputLength,
-    onFocus,
-    onBlur,
-    onInputChange,
-    onPress,
-    onCountryChange,
-    predefinedPlaces = [],
-    renamedInputKeys = {
-        street: 'addressStreet',
-        street2: 'addressStreet2',
-        city: 'addressCity',
-        state: 'addressState',
-        zipCode: 'addressZipCode',
-        lat: 'addressLat',
-        lng: 'addressLng',
-    },
-    resultTypes = 'address',
-    shouldSaveDraft = false,
-    value,
-    locationBias,
-    caretHidden,
-    ref,
-}: AddressSearchProps) {
+function AddressSearch(
+    {
+        canUseCurrentLocation = false,
+        containerStyles,
+        defaultValue,
+        errorText = '',
+        hint = '',
+        inputID,
+        limitSearchesToCountry,
+        label,
+        maxInputLength,
+        onFocus,
+        onBlur,
+        onInputChange,
+        onPress,
+        onCountryChange,
+        predefinedPlaces = [],
+        renamedInputKeys = {
+            street: 'addressStreet',
+            street2: 'addressStreet2',
+            city: 'addressCity',
+            state: 'addressState',
+            zipCode: 'addressZipCode',
+            lat: 'addressLat',
+            lng: 'addressLng',
+        },
+        resultTypes = 'address',
+        shouldSaveDraft = false,
+        value,
+        locationBias,
+        caretHidden,
+    }: AddressSearchProps,
+    ref: ForwardedRef<HTMLElement>,
+) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -487,6 +490,6 @@ function AddressSearch({
 
 AddressSearch.displayName = 'AddressSearchWithRef';
 
-export default AddressSearch;
+export default forwardRef(AddressSearch);
 
 export type {AddressSearchProps};

src/components/AddressSearch/types.ts

@@ -1,4 +1,4 @@
-import type {ForwardedRef, RefObject} from 'react';
+import type {RefObject} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
 import type {Country} from '@src/CONST';
@@ -90,9 +90,6 @@ type AddressSearchProps = {
 
     /** If true, caret is hidden. The default value is false. */
     caretHidden?: boolean;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<HTMLElement>;
 };
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement | null>) => boolean;

src/components/AmountPicker/index.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+import React, {forwardRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
@@ -7,7 +8,7 @@ import callOrReturn from '@src/types/utils/callOrReturn';
 import AmountSelectorModal from './AmountSelectorModal';
 import type {AmountPickerProps} from './types';
 
-function AmountPicker({value, description, title, errorText = '', onInputChange, furtherDetails, rightLabel, ref, ...rest}: AmountPickerProps) {
+function AmountPicker({value, description, title, errorText = '', onInputChange, furtherDetails, rightLabel, ...rest}: AmountPickerProps, forwardedRef: ForwardedRef<View>) {
     const [isPickerVisible, setIsPickerVisible] = useState(false);
 
     const showPickerModal = () => {
@@ -30,7 +31,7 @@ function AmountPicker({value, description, title, errorText = '', onInputChange,
     return (
         <View>
             <MenuItemWithTopDescription
-                ref={ref}
+                ref={forwardedRef}
                 shouldShowRightIcon
                 title={callOrReturn(title, value)}
                 description={description}
@@ -55,4 +56,4 @@ function AmountPicker({value, description, title, errorText = '', onInputChange,
 
 AmountPicker.displayName = 'AmountPicker';
 
-export default AmountPicker;
+export default forwardRef(AmountPicker);

src/components/AmountPicker/types.ts

@@ -1,5 +1,3 @@
-import type {ForwardedRef} from 'react';
-import type {View} from 'react-native';
 import type {MenuItemBaseProps} from '@components/MenuItem';
 import type {NumberWithSymbolFormProps} from '@components/NumberWithSymbolForm';
 
@@ -39,9 +37,6 @@ type AmountPickerProps = {
 
     /** Whether to show the tooltip text */
     shouldShowTooltips?: boolean;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<View>;
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'description'> &
     Pick<
         NumberWithSymbolFormProps,

src/components/AmountWithoutCurrencyInput.tsx

@@ -1,9 +1,10 @@
 import React, {useCallback, useMemo} from 'react';
+import type {ForwardedRef} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import getAmountInputKeyboard from '@libs/getAmountInputKeyboard';
 import {replaceAllDigits, replaceCommasWithPeriod, stripSpacesFromAmount} from '@libs/MoneyRequestUtils';
 import TextInput from './TextInput';
-import type {BaseTextInputProps} from './TextInput/BaseTextInput/types';
+import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types';
 
 type AmountFormProps = {
     /** Amount supplied by the FormProvider */
@@ -16,19 +17,10 @@ type AmountFormProps = {
     shouldAllowNegative?: boolean;
 } & Partial<BaseTextInputProps>;
 
-function AmountWithoutCurrencyInput({
-    value: amount,
-    shouldAllowNegative = false,
-    inputID,
-    name,
-    defaultValue,
-    accessibilityLabel,
-    role,
-    label,
-    onInputChange,
-    ref,
-    ...rest
-}: AmountFormProps) {
+function AmountWithoutCurrencyInput(
+    {value: amount, shouldAllowNegative = false, inputID, name, defaultValue, accessibilityLabel, role, label, onInputChange, ...rest}: AmountFormProps,
+    ref: ForwardedRef<BaseTextInputRef>,
+) {
     const {toLocaleDigit} = useLocalize();
     const separator = useMemo(
         () =>
@@ -95,4 +87,4 @@ function AmountWithoutCurrencyInput({
 
 AmountWithoutCurrencyInput.displayName = 'AmountWithoutCurrencyInput';
 
-export default AmountWithoutCurrencyInput;
+export default React.forwardRef(AmountWithoutCurrencyInput);

src/components/Attachments/AttachmentCarousel/Pager/index.tsx

@@ -48,12 +48,12 @@ type AttachmentCarouselPagerProps = {
 
     /** Callback for attachment errors */
     onAttachmentError?: (source: AttachmentSource) => void;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<AttachmentCarouselPagerHandle>;
 };
 
-function AttachmentCarouselPager({items, activeAttachmentID, initialPage, setShouldShowArrows, onPageSelected, onClose, reportID, onAttachmentError, ref}: AttachmentCarouselPagerProps) {
+function AttachmentCarouselPager(
+    {items, activeAttachmentID, initialPage, setShouldShowArrows, onPageSelected, onClose, reportID, onAttachmentError}: AttachmentCarouselPagerProps,
+    ref: ForwardedRef<AttachmentCarouselPagerHandle>,
+) {
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
     const styles = useThemeStyles();
     const pagerRef = useRef<PagerView>(null);
@@ -153,5 +153,5 @@ function AttachmentCarouselPager({items, activeAttachmentID, initialPage, setSho
 }
 AttachmentCarouselPager.displayName = 'AttachmentCarouselPager';
 
-export default AttachmentCarouselPager;
+export default React.forwardRef(AttachmentCarouselPager);
 export type {AttachmentCarouselPagerHandle};

src/components/CheckboxWithLabel.tsx

@@ -58,23 +58,12 @@ type CheckboxWithLabelProps = RequiredLabelProps & {
 
     /** An accessibility label for the checkbox */
     accessibilityLabel?: string;
-
-    /** Reference to the outer element */
-    ref?: ForwardedRef<View>;
 };
 
-function CheckboxWithLabel({
-    errorText = '',
-    isChecked: isCheckedProp = false,
-    defaultValue = false,
-    onInputChange = () => {},
-    LabelComponent,
-    label,
-    accessibilityLabel,
-    style,
-    value,
-    ref,
-}: CheckboxWithLabelProps) {
+function CheckboxWithLabel(
+    {errorText = '', isChecked: isCheckedProp = false, defaultValue = false, onInputChange = () => {}, LabelComponent, label, accessibilityLabel, style, value}: CheckboxWithLabelProps,
+    ref: ForwardedRef<View>,
+) {
     const styles = useThemeStyles();
     // We need to pick the first value that is strictly a boolean
     // https://github.com/Expensify/App/issues/16885#issuecomment-1520846065
@@ -117,6 +106,6 @@ function CheckboxWithLabel({
 
 CheckboxWithLabel.displayName = 'CheckboxWithLabel';
 
-export default CheckboxWithLabel;
+export default React.forwardRef(CheckboxWithLabel);
 
 export type {CheckboxWithLabelProps};