fix list is not visible initially

Expensify · Apr 1, 2024 · 4a2da6a · 4a2da6a
1 parent 5450717
commit 4a2da6a
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -75,6 +75,7 @@ function BaseSelectionList<TItem extends ListItem>(
 ) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const firstLayoutRef = useRef(true);
     const listRef = useRef<RNSectionList<TItem, SectionWithIndexOffset<TItem>>>(null);
     const innerTextInputRef = useRef<RNTextInput | null>(null);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -83,7 +84,6 @@ function BaseSelectionList<TItem extends ListItem>(
     const activeElementRole = useActiveElementRole();
     const isFocused = useIsFocused();
     const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
-    const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true);
     const [itemsToHighlight, setItemsToHighlight] = useState<Set<string> | null>(null);
     const itemFocusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const [currentPage, setCurrentPage] = useState(1);
@@ -349,13 +349,13 @@ function BaseSelectionList<TItem extends ListItem>(
                 setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
             }
 
-            if (!isInitialSectionListRender) {
+            if (!firstLayoutRef.current) {
                 return;
             }
             scrollToIndex(focusedIndex, false);
-            setIsInitialSectionListRender(false);
+            firstLayoutRef.current = false;
         },
-        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
+        [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
     );
 
     const onSectionListLayout = useCallback(
@@ -573,7 +573,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                     viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                                     testID="selection-list"
                                     onLayout={onSectionListLayout}
-                                    style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0}
+                                    style={!maxToRenderPerBatch && styles.opacity0}
                                     ListFooterComponent={ShowMoreButtonInstance}
                                 />
                                 {children}