From 04c47c90c321cdb149db7068ea6ebee8f9616bd6 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 24 May 2024 15:21:21 +0200 Subject: [PATCH 1/9] Enable React concurrent mode --- src/App.tsx | 88 ++++++++++--------- .../TextInput/TextInputClearButton/index.tsx | 4 +- src/setup/platformSetup/index.website.ts | 4 +- 3 files changed, 50 insertions(+), 46 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1ce17ea095bd..c55bcdf57b94 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,51 +52,57 @@ LogBox.ignoreLogs([ const fill = {flex: 1}; +const USE_STRICT_MODE = true; +const Wrapper = USE_STRICT_MODE ? React.StrictMode : ({children}: {children: React.ReactElement}) => children; + function App({url}: AppProps) { useDefaultDragAndDrop(); OnyxUpdateManager(); + return ( - - - - - - - - - - - - + + + + + + + + + + + + + + ); } diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index 4bd18be0c79b..106ae4439b8d 100644 --- a/src/components/TextInput/TextInputClearButton/index.tsx +++ b/src/components/TextInput/TextInputClearButton/index.tsx @@ -1,4 +1,4 @@ -import React, {forwardRef} from 'react'; +import React from 'react'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithoutFeedback} from '@components/Pressable'; @@ -40,4 +40,4 @@ function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { TextInputClearButton.displayName = 'TextInputClearButton'; -export default forwardRef(TextInputClearButton); +export default TextInputClearButton; diff --git a/src/setup/platformSetup/index.website.ts b/src/setup/platformSetup/index.website.ts index 0fef333e6508..15e2a5eaaffa 100644 --- a/src/setup/platformSetup/index.website.ts +++ b/src/setup/platformSetup/index.website.ts @@ -1,6 +1,4 @@ import {AppRegistry} from 'react-native'; -// This is a polyfill for InternetExplorer to support the modern KeyboardEvent.key and KeyboardEvent.code instead of KeyboardEvent.keyCode -import 'shim-keyboard-event-key'; import checkForUpdates from '@libs/checkForUpdates'; import DateUtils from '@libs/DateUtils'; import Visibility from '@libs/Visibility'; @@ -55,7 +53,7 @@ const webUpdater = (): PlatformSpecificUpdater => ({ export default function () { AppRegistry.runApplication(Config.APP_NAME, { rootTag: document.getElementById('root'), - mode: 'legacy', + // mode: 'legacy', }); // When app loads, get current version (production only) From 28952fa727bf473488515a532da13eb55799ebd0 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 7 Jun 2024 10:57:14 +0200 Subject: [PATCH 2/9] Add fixes for ReportScreen on useOnyx and patch for react-native-reanimated --- ...reanimated+3.8.1+003+fix-strict-mode.patch | 23 +++++++ .../AppNavigator/ReportScreenIDSetter.ts | 63 ++++--------------- 2 files changed, 36 insertions(+), 50 deletions(-) create mode 100644 patches/react-native-reanimated+3.8.1+003+fix-strict-mode.patch diff --git a/patches/react-native-reanimated+3.8.1+003+fix-strict-mode.patch b/patches/react-native-reanimated+3.8.1+003+fix-strict-mode.patch new file mode 100644 index 000000000000..e36d2dd365c0 --- /dev/null +++ b/patches/react-native-reanimated+3.8.1+003+fix-strict-mode.patch @@ -0,0 +1,23 @@ +diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js b/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js +index e69c581..78b7034 100644 +--- a/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js ++++ b/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js +@@ -7,14 +7,11 @@ import { isFabric, isJest, shouldBeUseWeb } from './PlatformChecker'; + import { runOnUIImmediately } from './threads'; + let updateProps; + if (shouldBeUseWeb()) { +- updateProps = (_, updates, maybeViewRef, isAnimatedProps) => { ++ updateProps = (viewDescriptorsSet, updates, maybeViewRef, isAnimatedProps) => { + 'worklet'; +- +- if (maybeViewRef) { +- maybeViewRef.items.forEach((item, _index) => { +- _updatePropsJS(updates, item, isAnimatedProps); +- }); +- } ++ viewDescriptorsSet.value.forEach((viewDescriptor) => { ++ _updatePropsJS(updates, {_component: viewDescriptor.tag}, isAnimatedProps); ++ }) + }; + } else { + updateProps = (viewDescriptors, updates) => { diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts index 5407a451682a..5306f6b55054 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts @@ -1,35 +1,15 @@ import {useEffect} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import useActiveWorkspace from '@hooks/useActiveWorkspace'; import usePermissions from '@hooks/usePermissions'; import {getPolicyEmployeeListByIdWithoutCurrentUser} from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {PersonalDetailsList, Policy, Report, ReportMetadata} from '@src/types/onyx'; +import type {Policy, Report, ReportMetadata} from '@src/types/onyx'; import type {ReportScreenWrapperProps} from './ReportScreenWrapper'; -type ReportScreenIDSetterComponentProps = { - /** Available reports that would be displayed in this navigator */ - reports: OnyxCollection; - - /** The policies which the user has access to */ - policies: OnyxCollection; - - /** The personal details of the person who is logged in */ - personalDetails: OnyxEntry; - - /** Whether user is a new user */ - isFirstTimeNewExpensifyUser: OnyxEntry; - - /** The report metadata */ - reportMetadata: OnyxCollection; - - /** The accountID of the current user */ - accountID?: number; -}; - -type ReportScreenIDSetterProps = ReportScreenIDSetterComponentProps & ReportScreenWrapperProps; +type ReportScreenIDSetterProps = ReportScreenWrapperProps; /** * Get the most recently accessed report for the user @@ -57,11 +37,18 @@ const getLastAccessedReportID = ( return lastReport?.reportID; }; -// This wrapper is reponsible for opening the last accessed report if there is no reportID specified in the route params -function ReportScreenIDSetter({route, reports, policies, navigation, isFirstTimeNewExpensifyUser = false, reportMetadata, accountID, personalDetails}: ReportScreenIDSetterProps) { +// This wrapper is responsible for opening the last accessed report if there is no reportID specified in the route params +function ReportScreenIDSetter({route, navigation}: ReportScreenIDSetterProps) { const {canUseDefaultRooms} = usePermissions(); const {activeWorkspaceID} = useActiveWorkspace(); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {allowStaleData: true}); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true}); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [isFirstTimeNewExpensifyUser] = useOnyx(ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, {initialValue: false}); + const [reportMetadata] = useOnyx(ONYXKEYS.COLLECTION.REPORT_METADATA, {allowStaleData: true}); + const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID}); + useEffect(() => { // Don't update if there is a reportID in the params already if (route?.params?.reportID) { @@ -101,28 +88,4 @@ function ReportScreenIDSetter({route, reports, policies, navigation, isFirstTime ReportScreenIDSetter.displayName = 'ReportScreenIDSetter'; -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - allowStaleData: true, - }, - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - allowStaleData: true, - }, - isFirstTimeNewExpensifyUser: { - key: ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, - initialValue: false, - }, - reportMetadata: { - key: ONYXKEYS.COLLECTION.REPORT_METADATA, - allowStaleData: true, - }, - accountID: { - key: ONYXKEYS.SESSION, - selector: (session) => session?.accountID, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, -})(ReportScreenIDSetter); +export default ReportScreenIDSetter; From 09d0cf1accfc66ff5619cb8588ab63e8dbcdeaaa Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Tue, 18 Jun 2024 13:30:56 +0200 Subject: [PATCH 3/9] Add better patch fixing `react-navigation` in StrictMode --- ...ore+6.4.11+001+fix-react-strict-mode.patch | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch diff --git a/patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch b/patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch new file mode 100644 index 000000000000..5a141ef2d4f8 --- /dev/null +++ b/patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch @@ -0,0 +1,47 @@ +diff --git a/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js b/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js +index 051520b..0ac7357 100644 +--- a/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js ++++ b/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js +@@ -174,10 +174,7 @@ export default function useNavigationBuilder(createRouter, options) { + getIsInitial + } = React.useContext(NavigationStateContext); + const stateCleanedUp = React.useRef(false); +- const cleanUpState = React.useCallback(() => { +- setCurrentState(undefined); +- stateCleanedUp.current = true; +- }, [setCurrentState]); ++ + const setState = React.useCallback(state => { + if (stateCleanedUp.current) { + // State might have been already cleaned up due to unmount +@@ -291,6 +288,9 @@ export default function useNavigationBuilder(createRouter, options) { + // So we override the state object we return to use the latest state as soon as possible + state = nextState; + React.useEffect(() => { ++ // In strict mode, React will double-invoke effects. ++ // So we need to reset the flag if component was not unmounted ++ stateCleanedUp.current = false; + setKey(navigatorKey); + if (!getIsInitial()) { + // If it's not initial render, we need to update the state +@@ -299,15 +299,10 @@ export default function useNavigationBuilder(createRouter, options) { + setState(nextState); + } + return () => { +- // We need to clean up state for this navigator on unmount +- // We do it in a timeout because we need to detect if another navigator mounted in the meantime +- // For example, if another navigator has started rendering, we should skip cleanup +- // Otherwise, our cleanup step will cleanup state for the other navigator and re-initialize it +- setTimeout(() => { +- if (getCurrentState() !== undefined && getKey() === navigatorKey) { +- cleanUpState(); +- } +- }, 0); ++ // We need to clean up state for this navigator on unmount ++ if (getCurrentState() !== undefined && getKey() === navigatorKey) { ++ setCurrentState(undefined); ++ stateCleanedUp.current = true; ++ } + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); From 8aa0174d2655975d94e34bb3f634b1b78e168efb Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Tue, 18 Jun 2024 13:48:28 +0200 Subject: [PATCH 4/9] Cleanup and try fixing reanimated --- ...eanimated+3.8.1+004+fix-react-strict-mode.patch | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch diff --git a/patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch b/patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch new file mode 100644 index 000000000000..c18b73cb9250 --- /dev/null +++ b/patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch @@ -0,0 +1,14 @@ +diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js b/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js +index 1b73e15..09e9238 100644 +--- a/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js ++++ b/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js +@@ -178,7 +178,8 @@ export function handleExitingAnimation(element, animationConfig) { + dummy.reanimatedDummy = true; + element.style.animationName = ''; + // We hide current element so only its copy with proper animation will be displayed +- element.style.visibility = 'hidden'; ++ // Temp fix for React StrictMode ++ // element.style.visibility = 'hidden'; + + // After cloning the element, we want to move all children from original element to its clone. This is because original element + // will be unmounted, therefore when this code executes in child component, parent will be either empty or removed soon. From a29219b9064b4574cb7476c32e75a9bd972329c5 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Wed, 19 Jun 2024 10:15:33 +0200 Subject: [PATCH 5/9] Remove not needed reanimated patch for strict mode --- ...eanimated+3.8.1+004+fix-react-strict-mode.patch | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch diff --git a/patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch b/patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch deleted file mode 100644 index c18b73cb9250..000000000000 --- a/patches/react-native-reanimated+3.8.1+004+fix-react-strict-mode.patch +++ /dev/null @@ -1,14 +0,0 @@ -diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js b/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js -index 1b73e15..09e9238 100644 ---- a/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js -+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/web/componentUtils.js -@@ -178,7 +178,8 @@ export function handleExitingAnimation(element, animationConfig) { - dummy.reanimatedDummy = true; - element.style.animationName = ''; - // We hide current element so only its copy with proper animation will be displayed -- element.style.visibility = 'hidden'; -+ // Temp fix for React StrictMode -+ // element.style.visibility = 'hidden'; - - // After cloning the element, we want to move all children from original element to its clone. This is because original element - // will be unmounted, therefore when this code executes in child component, parent will be either empty or removed soon. From 85250a62592b363e95e67877191b6500e320b8a8 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Wed, 19 Jun 2024 11:37:25 +0200 Subject: [PATCH 6/9] Cleanup patches for react navigation --- ...tion+core+6.4.11+001+fix-react-strictmode.patch} | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) rename patches/{@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch => @react-navigation+core+6.4.11+001+fix-react-strictmode.patch} (83%) diff --git a/patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch b/patches/@react-navigation+core+6.4.11+001+fix-react-strictmode.patch similarity index 83% rename from patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch rename to patches/@react-navigation+core+6.4.11+001+fix-react-strictmode.patch index 5a141ef2d4f8..8941bb380a79 100644 --- a/patches/@react-navigation+core+6.4.11+001+fix-react-strict-mode.patch +++ b/patches/@react-navigation+core+6.4.11+001+fix-react-strictmode.patch @@ -1,8 +1,8 @@ diff --git a/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js b/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js -index 051520b..0ac7357 100644 +index 051520b..6fb49e0 100644 --- a/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js +++ b/node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js -@@ -174,10 +174,7 @@ export default function useNavigationBuilder(createRouter, options) { +@@ -174,10 +174,6 @@ export default function useNavigationBuilder(createRouter, options) { getIsInitial } = React.useContext(NavigationStateContext); const stateCleanedUp = React.useRef(false); @@ -10,11 +10,10 @@ index 051520b..0ac7357 100644 - setCurrentState(undefined); - stateCleanedUp.current = true; - }, [setCurrentState]); -+ const setState = React.useCallback(state => { if (stateCleanedUp.current) { // State might have been already cleaned up due to unmount -@@ -291,6 +288,9 @@ export default function useNavigationBuilder(createRouter, options) { +@@ -291,6 +287,9 @@ export default function useNavigationBuilder(createRouter, options) { // So we override the state object we return to use the latest state as soon as possible state = nextState; React.useEffect(() => { @@ -24,11 +23,10 @@ index 051520b..0ac7357 100644 setKey(navigatorKey); if (!getIsInitial()) { // If it's not initial render, we need to update the state -@@ -299,15 +299,10 @@ export default function useNavigationBuilder(createRouter, options) { - setState(nextState); +@@ -300,14 +299,10 @@ export default function useNavigationBuilder(createRouter, options) { } return () => { -- // We need to clean up state for this navigator on unmount + // We need to clean up state for this navigator on unmount - // We do it in a timeout because we need to detect if another navigator mounted in the meantime - // For example, if another navigator has started rendering, we should skip cleanup - // Otherwise, our cleanup step will cleanup state for the other navigator and re-initialize it @@ -37,7 +35,6 @@ index 051520b..0ac7357 100644 - cleanUpState(); - } - }, 0); -+ // We need to clean up state for this navigator on unmount + if (getCurrentState() !== undefined && getKey() === navigatorKey) { + setCurrentState(undefined); + stateCleanedUp.current = true; From a2c8d2cee9f22e7a8162a7b280ec43d4897b973f Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Thu, 20 Jun 2024 12:18:09 +0200 Subject: [PATCH 7/9] Final cleanups for concurrent mode --- src/App.tsx | 8 ++++---- src/CONFIG.ts | 1 + src/setup/platformSetup/index.website.ts | 1 - 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c55bcdf57b94..21025d34a661 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,6 +31,7 @@ import {CurrentReportIDContextProvider} from './components/withCurrentReportID'; import {EnvironmentProvider} from './components/withEnvironment'; import {KeyboardStateProvider} from './components/withKeyboardState'; import {WindowDimensionsProvider} from './components/withWindowDimensions'; +import CONFIG from './CONFIG'; import Expensify from './Expensify'; import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop'; import {ReportIDsContextProvider} from './hooks/useReportIDs'; @@ -52,15 +53,14 @@ LogBox.ignoreLogs([ const fill = {flex: 1}; -const USE_STRICT_MODE = true; -const Wrapper = USE_STRICT_MODE ? React.StrictMode : ({children}: {children: React.ReactElement}) => children; +const StrictModeWrapper = CONFIG.USE_REACT_STRICT_MODE ? React.StrictMode : ({children}: {children: React.ReactElement}) => children; function App({url}: AppProps) { useDefaultDragAndDrop(); OnyxUpdateManager(); return ( - + - + ); } diff --git a/src/CONFIG.ts b/src/CONFIG.ts index 9ed4242d7604..8800cc907588 100644 --- a/src/CONFIG.ts +++ b/src/CONFIG.ts @@ -96,4 +96,5 @@ export default { IOS_CLIENT_ID: '921154746561-s3uqn2oe4m85tufi6mqflbfbuajrm2i3.apps.googleusercontent.com', }, GCP_GEOLOCATION_API_KEY: googleGeolocationAPIKey, + USE_REACT_STRICT_MODE: true, } as const; diff --git a/src/setup/platformSetup/index.website.ts b/src/setup/platformSetup/index.website.ts index 15e2a5eaaffa..07917e0e6f65 100644 --- a/src/setup/platformSetup/index.website.ts +++ b/src/setup/platformSetup/index.website.ts @@ -53,7 +53,6 @@ const webUpdater = (): PlatformSpecificUpdater => ({ export default function () { AppRegistry.runApplication(Config.APP_NAME, { rootTag: document.getElementById('root'), - // mode: 'legacy', }); // When app loads, get current version (production only) From 78b922d37a082583435615fe7198972e8d30b0d6 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 21 Jun 2024 15:05:40 +0200 Subject: [PATCH 8/9] Revert ReportScreenIDSetter to original version --- .../AppNavigator/ReportScreenIDSetter.ts | 63 +++++++++++++++---- 1 file changed, 50 insertions(+), 13 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts index 5306f6b55054..5407a451682a 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts @@ -1,15 +1,35 @@ import {useEffect} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import useActiveWorkspace from '@hooks/useActiveWorkspace'; import usePermissions from '@hooks/usePermissions'; import {getPolicyEmployeeListByIdWithoutCurrentUser} from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Policy, Report, ReportMetadata} from '@src/types/onyx'; +import type {PersonalDetailsList, Policy, Report, ReportMetadata} from '@src/types/onyx'; import type {ReportScreenWrapperProps} from './ReportScreenWrapper'; -type ReportScreenIDSetterProps = ReportScreenWrapperProps; +type ReportScreenIDSetterComponentProps = { + /** Available reports that would be displayed in this navigator */ + reports: OnyxCollection; + + /** The policies which the user has access to */ + policies: OnyxCollection; + + /** The personal details of the person who is logged in */ + personalDetails: OnyxEntry; + + /** Whether user is a new user */ + isFirstTimeNewExpensifyUser: OnyxEntry; + + /** The report metadata */ + reportMetadata: OnyxCollection; + + /** The accountID of the current user */ + accountID?: number; +}; + +type ReportScreenIDSetterProps = ReportScreenIDSetterComponentProps & ReportScreenWrapperProps; /** * Get the most recently accessed report for the user @@ -37,18 +57,11 @@ const getLastAccessedReportID = ( return lastReport?.reportID; }; -// This wrapper is responsible for opening the last accessed report if there is no reportID specified in the route params -function ReportScreenIDSetter({route, navigation}: ReportScreenIDSetterProps) { +// This wrapper is reponsible for opening the last accessed report if there is no reportID specified in the route params +function ReportScreenIDSetter({route, reports, policies, navigation, isFirstTimeNewExpensifyUser = false, reportMetadata, accountID, personalDetails}: ReportScreenIDSetterProps) { const {canUseDefaultRooms} = usePermissions(); const {activeWorkspaceID} = useActiveWorkspace(); - const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {allowStaleData: true}); - const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true}); - const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const [isFirstTimeNewExpensifyUser] = useOnyx(ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, {initialValue: false}); - const [reportMetadata] = useOnyx(ONYXKEYS.COLLECTION.REPORT_METADATA, {allowStaleData: true}); - const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID}); - useEffect(() => { // Don't update if there is a reportID in the params already if (route?.params?.reportID) { @@ -88,4 +101,28 @@ function ReportScreenIDSetter({route, navigation}: ReportScreenIDSetterProps) { ReportScreenIDSetter.displayName = 'ReportScreenIDSetter'; -export default ReportScreenIDSetter; +export default withOnyx({ + reports: { + key: ONYXKEYS.COLLECTION.REPORT, + allowStaleData: true, + }, + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + allowStaleData: true, + }, + isFirstTimeNewExpensifyUser: { + key: ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, + initialValue: false, + }, + reportMetadata: { + key: ONYXKEYS.COLLECTION.REPORT_METADATA, + allowStaleData: true, + }, + accountID: { + key: ONYXKEYS.SESSION, + selector: (session) => session?.accountID, + }, + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, +})(ReportScreenIDSetter); From 988f0c28ddb5da15359c57561d01d42118913fa0 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Mon, 24 Jun 2024 14:23:51 +0200 Subject: [PATCH 9/9] revert some changes in react concurrent mode --- src/components/TextInput/TextInputClearButton/index.tsx | 4 ++-- src/setup/platformSetup/index.website.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index 106ae4439b8d..4bd18be0c79b 100644 --- a/src/components/TextInput/TextInputClearButton/index.tsx +++ b/src/components/TextInput/TextInputClearButton/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {forwardRef} from 'react'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithoutFeedback} from '@components/Pressable'; @@ -40,4 +40,4 @@ function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { TextInputClearButton.displayName = 'TextInputClearButton'; -export default TextInputClearButton; +export default forwardRef(TextInputClearButton); diff --git a/src/setup/platformSetup/index.website.ts b/src/setup/platformSetup/index.website.ts index 07917e0e6f65..d6be20e2cf58 100644 --- a/src/setup/platformSetup/index.website.ts +++ b/src/setup/platformSetup/index.website.ts @@ -1,4 +1,6 @@ import {AppRegistry} from 'react-native'; +// This is a polyfill for InternetExplorer to support the modern KeyboardEvent.key and KeyboardEvent.code instead of KeyboardEvent.keyCode +import 'shim-keyboard-event-key'; import checkForUpdates from '@libs/checkForUpdates'; import DateUtils from '@libs/DateUtils'; import Visibility from '@libs/Visibility';