diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 67de6b2b7718..8dd7577de779 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -70,6 +70,7 @@ function BaseSelectionList( isRowMultilineSupported = false, textInputRef, headerMessageStyle, + shouldHideListOnInitialRender = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -572,7 +573,7 @@ function BaseSelectionList( viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}} testID="selection-list" onLayout={onSectionListLayout} - style={(!maxToRenderPerBatch || isInitialSectionListRender) && styles.opacity0} + style={(!maxToRenderPerBatch || (shouldHideListOnInitialRender && isInitialSectionListRender)) && styles.opacity0} ListFooterComponent={ShowMoreButtonInstance} /> {children} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 9e7e64896f4f..e401dd5456b2 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -297,6 +297,12 @@ type BaseSelectionListProps = Partial & { /** Ref for textInput */ textInputRef?: MutableRefObject; + + /** + * When true, the list won't be visible until the list layout is measured. This prevents the list from "blinking" as it's scrolled to the bottom which is recommended for large lists. + * When false, the list will render immediately and scroll to the bottom which works great for small lists. + */ + shouldHideListOnInitialRender?: boolean; }; type SelectionListHandle = { diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx index e6214b160a99..dfb30bded769 100644 --- a/src/pages/NewChatConfirmPage.tsx +++ b/src/pages/NewChatConfirmPage.tsx @@ -135,6 +135,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP showConfirmButton={selectedOptions.length > 1} confirmButtonText={translate('newChatPage.startGroup')} onConfirm={createGroup} + shouldHideListOnInitialRender={false} /> );