diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 67de6b2b77189..8dd7577de7798 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 9e7e64896f4f2..e401dd5456b2f 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 e6214b160a997..dfb30bded7697 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} /> );