From ccf67c5d7cc80b4d6a026303cee12c39f5983f26 Mon Sep 17 00:00:00 2001 From: Gandalf Date: Fri, 20 Sep 2024 00:51:01 +0530 Subject: [PATCH 1/9] intial commit --- src/pages/settings/Wallet/ChooseTransferAccountPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx index 0bbcf957c31c..bb8f45b6b189 100644 --- a/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx +++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx @@ -91,7 +91,7 @@ function ChooseTransferAccountPage() { title={translate('chooseTransferAccountPage.chooseAccount')} onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)} /> - + - + ); } From 7ba7c8febe1904a6966433c07b177a0764868f73 Mon Sep 17 00:00:00 2001 From: Gandalf Date: Fri, 20 Sep 2024 17:51:58 +0530 Subject: [PATCH 2/9] fix virtualized list error --- .../Wallet/ChooseTransferAccountPage.tsx | 58 ++++++++++--------- .../WorkspaceSettlementAccountPage.tsx | 42 +++++++------- 2 files changed, 54 insertions(+), 46 deletions(-) diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx index bb8f45b6b189..72fd952d5ef3 100644 --- a/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx +++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx @@ -8,9 +8,9 @@ import getBankIcon from '@components/Icon/BankIcons'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; -import ScrollView from '@components/ScrollView'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; +import type {ListItem} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {getLastFourDigits} from '@libs/BankAccountUtils'; @@ -20,10 +20,15 @@ import * as PaymentMethods from '@userActions/PaymentMethods'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {AccountData} from '@src/types/onyx'; +import type {AccountData, BankAccount} from '@src/types/onyx'; import type {BankName} from '@src/types/onyx/Bank'; import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; +type AccountListItem = ListItem & { + value?: number; + bankAccount: BankAccount; +}; + function ChooseTransferAccountPage() { const [walletTransfer, walletTransferResult] = useOnyx(ONYXKEYS.WALLET_TRANSFER); @@ -54,7 +59,7 @@ function ChooseTransferAccountPage() { const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); const selectedAccountID = walletTransfer?.selectedAccountID; const data = useMemo(() => { - const options = Object.values(bankAccountsList ?? {}).map((bankAccount) => { + const options = Object.values(bankAccountsList ?? {}).map((bankAccount): AccountListItem => { const bankName = (bankAccount.accountData?.additionalData?.bankName ?? '') as BankName; const bankAccountNumber = bankAccount.accountData?.accountNumber ?? ''; const bankAccountID = bankAccount.accountData?.bankAccountID ?? bankAccount.methodID; @@ -91,29 +96,30 @@ function ChooseTransferAccountPage() { title={translate('chooseTransferAccountPage.chooseAccount')} onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)} /> - - { - const accountType = value?.bankAccount?.accountType; - const accountData = value?.bankAccount?.accountData; - selectAccountAndNavigateBack(accountType, accountData); - }} - shouldSingleExecuteRowSelect - shouldUpdateFocusedIndex - initiallyFocusedOptionKey={walletTransfer?.selectedAccountID?.toString()} - /> - - + + { + const accountType = value?.bankAccount?.accountType; + const accountData = value?.bankAccount?.accountData; + selectAccountAndNavigateBack(accountType, accountData); + }} + shouldSingleExecuteRowSelect + shouldUpdateFocusedIndex + initiallyFocusedOptionKey={walletTransfer?.selectedAccountID?.toString()} + listFooterContent={ + + } + /> ); } diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx index 52ff521dfb4e..66690994b406 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx @@ -98,26 +98,28 @@ function WorkspaceSettlementAccountPage({route}: WorkspaceSettlementAccountPageP title={translate('workspace.expensifyCard.settlementAccount')} onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_EXPENSIFY_CARD_SETTINGS.getRoute(policyID))} /> - - {translate('workspace.expensifyCard.settlementAccountDescription')} - {isUsedContinuousReconciliation && ( - - {translate('workspace.expensifyCard.settlementAccountInfoPt1')}{' '} - Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connectionParam))}> - {translate('workspace.expensifyCard.reconciliationAccount')} - {' '} - {`(${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}) `} - {translate('workspace.expensifyCard.settlementAccountInfoPt2')} - - )} - updateSettlementAccount(value ?? 0)} - shouldSingleExecuteRowSelect - initiallyFocusedOptionKey={paymentBankAccountID.toString()} - /> - + updateSettlementAccount(value ?? 0)} + shouldSingleExecuteRowSelect + initiallyFocusedOptionKey={paymentBankAccountID.toString()} + listHeaderContent={ + <> + {translate('workspace.expensifyCard.settlementAccountDescription')} + {isUsedContinuousReconciliation && ( + + {translate('workspace.expensifyCard.settlementAccountInfoPt1')}{' '} + Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connectionParam))}> + {translate('workspace.expensifyCard.reconciliationAccount')} + {' '} + {`(${CONST.MASKED_PAN_PREFIX}${getLastFourDigits(paymentBankAccountNumber)}) `} + {translate('workspace.expensifyCard.settlementAccountInfoPt2')} + + )} + + } + /> ); From af61f7a972f5a03aa71dd7e361401fe6623f9645 Mon Sep 17 00:00:00 2001 From: Gandalf Date: Fri, 20 Sep 2024 17:53:39 +0530 Subject: [PATCH 3/9] fix lint --- .../workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx index 66690994b406..369973485499 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceSettlementAccountPage.tsx @@ -6,7 +6,6 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Icon from '@components/Icon'; import getBankIcon from '@components/Icon/BankIcons'; import ScreenWrapper from '@components/ScreenWrapper'; -import ScrollView from '@components/ScrollView'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import Text from '@components/Text'; From 03400565913c0d56cb8544ad34d47ec6bf77c115 Mon Sep 17 00:00:00 2001 From: Gandalf Date: Fri, 20 Sep 2024 21:49:43 +0530 Subject: [PATCH 4/9] add documentation --- contributingGuides/STYLE.md | 45 +++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md index 6af3a82c2ff6..3d42d1e2fb0f 100644 --- a/contributingGuides/STYLE.md +++ b/contributingGuides/STYLE.md @@ -50,6 +50,9 @@ - [Stateless components vs Pure Components vs Class based components vs Render Props](#stateless-components-vs-pure-components-vs-class-based-components-vs-render-props---when-to-use-what) - [Use Refs Appropriately](#use-refs-appropriately) - [Are we allowed to use [insert brand new React feature]?](#are-we-allowed-to-use-insert-brand-new-react-feature-why-or-why-not) +- [Handling Scroll Issues with Nested Lists in React Native](#handling-scroll-issues-with-nested-lists-in-react-native) + - [Wrong Approach (Using SelectionList)](#wrong-approach-using-scrollview) + - [Correct Approach (Using SelectionList)](#correct-approach-using-flatlist) - [React Hooks: Frequently Asked Questions](#react-hooks-frequently-asked-questions) - [Onyx Best Practices](#onyx-best-practices) - [Collection Keys](#collection-keys) @@ -1105,6 +1108,48 @@ There are several ways to use and declare refs and we prefer the [callback metho We love React and learning about all the new features that are regularly being added to the API. However, we try to keep our organization's usage of React limited to the most stable set of features that React offers. We do this mainly for **consistency** and so our engineers don't have to spend extra time trying to figure out how everything is working. That said, if you aren't sure if we have adopted something, please ask us first. + +# Handling Scroll Issues with Nested Lists in React Native + +## Problem + +When using `SelectionList` alongside other components (e.g., `Text`, `Button`), wrapping them inside a `ScrollView` can lead to alignment and performance issues. Additionally, using `ScrollView` with nested `FlatList` or `SectionList` causes the error: + +> "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation." + +## Solution + +The correct approach is to replace Avoid using `ScrollView`. You can add props like `ListHeaderComponent` and `ListFooterComponent` to add other components before or after the list while keeping the layout scrollable. + +## Wrong Approach (Using `SelectionList`) + +```jsx + + Header Content + +