[NoQA] Split by percentage Refactoring

src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -145,7 +145,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
     shouldHighlightSelectedItem = true,
     shouldDisableHoverStyle = false,
     setShouldDisableHoverStyle = () => {},
-    isPercentageMode,
+    shouldSkipContentHeaderHeightOffset,
     ref,
 }: SelectionListProps<TItem>) {
     const styles = useThemeStyles();
@@ -357,8 +357,8 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
             }
 
             let viewOffset = variables.contentHeaderHeight - viewOffsetToKeepFocusedItemAtTopOfViewableArea;
-            // Remove contentHeaderHeight from viewOffset calculation if isPercentageMode (for scroll offset calculation on native)
-            if (isPercentageMode) {
+            // Skip contentHeaderHeight for native split expense tabs scroll correction
+            if (shouldSkipContentHeaderHeightOffset) {
                 viewOffset = viewOffsetToKeepFocusedItemAtTopOfViewableArea;
             }
             listRef.current.scrollToLocation({sectionIndex, itemIndex, animated, viewOffset});

src/components/SelectionListWithSections/SplitExpense/SplitAmountDisplay.tsx

@@ -42,6 +42,4 @@ function SplitAmountDisplay({splitItem, contentWidth = '100%', shouldRemoveSpaci
     );
 }
 
-SplitAmountDisplay.displayName = 'SplitAmountDisplay';
-
 export default SplitAmountDisplay;

src/components/SelectionListWithSections/SplitExpense/SplitAmountInput.tsx

@@ -65,6 +65,4 @@ function SplitAmountInput({splitItem, formattedOriginalAmount, contentWidth, onS
     );
 }
 
-SplitAmountInput.displayName = 'SplitAmountInput';
-
 export default SplitAmountInput;

src/components/SelectionListWithSections/SplitExpense/SplitPercentageDisplay.tsx

@@ -27,6 +27,4 @@ function SplitPercentageDisplay({splitItem, contentWidth}: SplitPercentageDispla
     );
 }
 
-SplitPercentageDisplay.displayName = 'SplitPercentageDisplay';
-
 export default SplitPercentageDisplay;

src/components/SelectionListWithSections/SplitExpense/SplitPercentageInput.tsx

@@ -60,6 +60,4 @@ function SplitPercentageInput({splitItem, contentWidth, percentageDraft, onSplit
     );
 }
 
-SplitPercentageInput.displayName = 'SplitPercentageInput';
-
 export default SplitPercentageInput;

src/components/SelectionListWithSections/SplitListItemInput.tsx

@@ -66,6 +66,4 @@ function SplitListItemInput({
     );
 }
 
-SplitListItemInput.displayName = 'SplitListItemInput';
-
 export default SplitListItemInput;

src/components/SelectionListWithSections/index.tsx

@@ -107,9 +107,8 @@ function SelectionListWithSections<TItem extends ListItem>({onScroll, shouldHide
             isRowMultilineSupported
             shouldDisableHoverStyle={shouldDisableHoverStyle}
             setShouldDisableHoverStyle={setShouldDisableHoverStyle}
-            // We only allow the prop to pass on Native (for scroll offset calculation)
-            // web should be false by default since there are no issues on web
-            isPercentageMode={false}
+            // Web doesn't require scroll offset correction, only native does
+            shouldSkipContentHeaderHeightOffset={false}
         />
     );
 }

src/components/SelectionListWithSections/types.ts

@@ -1089,8 +1089,8 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     shouldDisableHoverStyle?: boolean;
     setShouldDisableHoverStyle?: React.Dispatch<React.SetStateAction<boolean>>;
 
-    /** Whether the list is percentage mode (for scroll offset calculation) */
-    isPercentageMode?: boolean;
+    /** When true, skips the contentHeaderHeight from the viewOffset calculation during scroll-to-index. Only needed on native platforms for split expense tabs (Amount/Percentage/Date) scroll correction. Web should always pass false. */
+    shouldSkipContentHeaderHeightOffset?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {

src/pages/iou/SplitExpensePage.tsx

@@ -54,8 +54,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import SplitAmountList from './SplitAmountList';
-import SplitPercentageList from './SplitPercentageList';
+import SplitList from './SplitList';
 
 type SplitExpensePageProps = PlatformStackScreenProps<SplitExpenseParamList, typeof SCREENS.MONEY_REQUEST.SPLIT_EXPENSE>;
 
@@ -481,11 +480,12 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
                                     {() => (
                                         <TabScreenWithFocusTrapWrapper>
                                             <View style={styles.flex1}>
-                                                <SplitAmountList
+                                                <SplitList
                                                     sections={sections}
                                                     initiallyFocusedOptionKey={initiallyFocusedOptionKey ?? undefined}
                                                     onSelectRow={onSelectRow}
                                                     listFooterContent={listFooterContent}
+                                                    mode={CONST.TAB.SPLIT.AMOUNT}
                                                 />
                                                 {footerContent}
                                             </View>
@@ -496,11 +496,12 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
                                     {() => (
                                         <TabScreenWithFocusTrapWrapper>
                                             <View style={styles.flex1}>
-                                                <SplitPercentageList
+                                                <SplitList
                                                     sections={sections}
                                                     initiallyFocusedOptionKey={initiallyFocusedOptionKey ?? undefined}
                                                     onSelectRow={onSelectRow}
                                                     listFooterContent={listFooterContent}
+                                                    mode={CONST.TAB.SPLIT.PERCENTAGE}
                                                 />
                                                 {footerContent}
                                             </View>
@@ -512,11 +513,12 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
                                         <TabScreenWithFocusTrapWrapper>
                                             <View style={styles.flex1}>
                                                 {headerDateContent}
-                                                <SplitAmountList
+                                                <SplitList
                                                     sections={sections}
                                                     initiallyFocusedOptionKey={initiallyFocusedOptionKey ?? undefined}
                                                     onSelectRow={onSelectRow}
                                                     listFooterContent={<View style={[shouldUseNarrowLayout && styles.mb3]} />}
+                                                    mode={CONST.TAB.SPLIT.DATE}
                                                 />
                                                 {footerContent}
                                             </View>
@@ -527,11 +529,12 @@ function SplitExpensePage({route}: SplitExpensePageProps) {
                         </View>
                     ) : (
                         <View style={styles.flex1}>
-                            <SplitAmountList
+                            <SplitList
                                 sections={sections}
                                 initiallyFocusedOptionKey={initiallyFocusedOptionKey ?? undefined}
                                 onSelectRow={onSelectRow}
                                 listFooterContent={listFooterContent}
+                                mode={CONST.TAB.SPLIT.AMOUNT}
                             />
                             {footerContent}
                         </View>

src/pages/iou/SplitAmountList.tsx → src/pages/iou/SplitList.tsx

@@ -1,13 +1,14 @@
 import React, {useMemo} from 'react';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller';
+import type {ValueOf} from 'type-fest';
 // eslint-disable-next-line no-restricted-imports
 import SelectionList from '@components/SelectionListWithSections';
 import type {SectionListDataType, SplitListItemType} from '@components/SelectionListWithSections/types';
 import useDisplayFocusedInputUnderKeyboard from '@hooks/useDisplayFocusedInputUnderKeyboard';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-type SplitAmountListProps = {
+type SplitListProps = {
     /** The split expense sections data. */
     sections: Array<SectionListDataType<SplitListItemType>>;
     /** The initially focused option key. */
@@ -16,25 +17,30 @@ type SplitAmountListProps = {
     onSelectRow: (item: SplitListItemType) => void;
     /** Footer content to render at the bottom of the list. */
     listFooterContent?: React.JSX.Element | null;
+    /** The split mode to use (amount, percentage, or date). */
+    mode: ValueOf<typeof CONST.TAB.SPLIT>;
 };
 
 /**
- * Dedicated component for the Amount tab in Split Expense flow.
- * Renders split items with amount inputs, managing its own scroll/height state.
+ * Unified component for split expense tabs (Amount, Percentage, Date).
+ * Renders split items with the appropriate input type based on mode,
+ * managing its own scroll/height state.
  */
-function SplitAmountList({sections, initiallyFocusedOptionKey, onSelectRow, listFooterContent}: SplitAmountListProps) {
+function SplitList({sections, initiallyFocusedOptionKey, onSelectRow, listFooterContent, mode}: SplitListProps) {
     const styles = useThemeStyles();
     const {listRef, bottomOffset, scrollToFocusedInput, SplitListItem} = useDisplayFocusedInputUnderKeyboard();
 
-    const amountSections = useMemo(() => {
+    const splitSections = useMemo(() => {
         return sections.map((section) => ({
             ...section,
             data: section.data.map((item) => ({
                 ...item,
-                mode: CONST.TAB.SPLIT.AMOUNT,
+                mode,
             })),
         }));
-    }, [sections]);
+    }, [sections, mode]);
+
+    const isPercentageMode = mode === CONST.TAB.SPLIT.PERCENTAGE;
 
     return (
         <SelectionList
@@ -48,7 +54,7 @@ function SplitAmountList({sections, initiallyFocusedOptionKey, onSelectRow, list
             )}
             onSelectRow={onSelectRow}
             ref={listRef}
-            sections={amountSections}
+            sections={splitSections}
             initiallyFocusedOptionKey={initiallyFocusedOptionKey}
             ListItem={SplitListItem}
             containerStyle={[styles.flexBasisAuto]}
@@ -59,10 +65,9 @@ function SplitAmountList({sections, initiallyFocusedOptionKey, onSelectRow, list
             shouldPreventDefaultFocusOnSelectRow
             removeClippedSubviews={false}
             shouldHideListOnInitialRender={false}
+            shouldSkipContentHeaderHeightOffset={isPercentageMode}
         />
     );
 }
 
-SplitAmountList.displayName = 'SplitAmountList';
-
-export default SplitAmountList;
+export default SplitList;