Web - Profile - When selecting the last country or state extra space is displayed for a while

src/components/SelectionList/BaseSelectionList.js

@@ -59,6 +59,7 @@ function BaseSelectionList({
     disableKeyboardShortcuts = false,
     children,
     shouldStopPropagation = false,
+    shouldUseDynamicMaxToRenderPerBatch = false,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -71,6 +72,8 @@ function BaseSelectionList({
     const shouldShowSelectAll = Boolean(onSelectAll);
     const activeElement = useActiveElement();
     const isFocused = useIsFocused();
+    const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : 5);
+
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
      * - `allOptions`: Contains all the items in the list, flattened, regardless of section
@@ -301,6 +304,7 @@ function BaseSelectionList({
                 item={item}
                 isFocused={isItemFocused}
                 isDisabled={isDisabled}
+                isHide={!maxToRenderPerBatch}
                 showTooltip={showTooltip}
                 canSelectMultiple={canSelectMultiple}
                 onSelectRow={() => selectRow(item, true)}
@@ -310,13 +314,23 @@ function BaseSelectionList({
         );
     };
 
-    const scrollToFocusedIndexOnFirstRender = useCallback(() => {
-        if (!firstLayoutRef.current) {
-            return;
-        }
-        scrollToIndex(focusedIndex, false);
-        firstLayoutRef.current = false;
-    }, [focusedIndex, scrollToIndex]);
+    const scrollToFocusedIndexOnFirstRender = useCallback(
+        ({nativeEvent}) => {
+            if (shouldUseDynamicMaxToRenderPerBatch) {
+                const listHeight = lodashGet(nativeEvent, 'layout.height', 0);
+                const itemHeight = lodashGet(nativeEvent, 'layout.y', 0);
+
+                setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + 5);
+            }
+
+            if (!firstLayoutRef.current) {
+                return;
+            }
+            scrollToIndex(focusedIndex, false);
+            firstLayoutRef.current = false;
+        },
+        [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
+    );
 
     const updateAndScrollToFocusedIndex = useCallback(
         (newFocusedIndex) => {
@@ -451,11 +465,12 @@ function BaseSelectionList({
                                     keyboardShouldPersistTaps="always"
                                     showsVerticalScrollIndicator={showScrollIndicator}
                                     initialNumToRender={12}
-                                    maxToRenderPerBatch={5}
+                                    maxToRenderPerBatch={maxToRenderPerBatch}
                                     windowSize={5}
                                     viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                                     testID="selection-list"
                                     onLayout={scrollToFocusedIndexOnFirstRender}
+                                    style={!maxToRenderPerBatch && styles.opacity0}
                                 />
                                 {children}
                             </>

src/components/SelectionList/selectionListPropTypes.js

@@ -182,6 +182,9 @@ const propTypes = {
 
     /** Custom content to display in the footer */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+    /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
+    shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool,
 };
 
 export {propTypes, baseListItemPropTypes, radioListItemPropTypes, userListItemPropTypes};

src/components/StatePicker/StateSelectorModal.js

@@ -101,6 +101,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                     onChangeText={setSearchValue}
                     initiallyFocusedOptionKey={currentState}
                     shouldStopPropagation
+                    shouldUseDynamicMaxToRenderPerBatch
                 />
             </ScreenWrapper>
         </Modal>

src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js

@@ -96,6 +96,7 @@ function CountrySelectionPage({route, navigation}) {
                 onSelectRow={selectCountry}
                 onChangeText={setSearchValue}
                 initiallyFocusedOptionKey={currentCountry}
+                shouldUseDynamicMaxToRenderPerBatch
             />
         </ScreenWrapper>
     );