diff --git a/src/CONST.ts b/src/CONST.ts index 745236dc52eca..5aec5671743f2 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -6860,6 +6860,8 @@ const CONST = { SKIPPABLE_COLLECTION_MEMBER_IDS: [String(DEFAULT_NUMBER_ID), '-1', 'undefined', 'null', 'NaN'] as string[], SETUP_SPECIALIST_LOGIN: 'Setup Specialist', ILLUSTRATION_ASPECT_RATIO: 39 / 22, + + OFFLINE_INDICATOR_HEIGHT: 25, } as const; type Country = keyof typeof CONST.ALL_COUNTRIES; diff --git a/src/components/BlockingViews/BlockingView.tsx b/src/components/BlockingViews/BlockingView.tsx index 6fc43cd9b236e..01fec5f48bfcf 100644 --- a/src/components/BlockingViews/BlockingView.tsx +++ b/src/components/BlockingViews/BlockingView.tsx @@ -51,6 +51,9 @@ type BaseBlockingViewProps = { /** Whether to add bottom safe area padding to the view. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; }; type BlockingViewIconProps = { @@ -100,6 +103,7 @@ function BlockingView({ contentFitImage, containerStyle: containerStyleProp, addBottomSafeAreaPadding = false, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, }: BlockingViewProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -137,7 +141,7 @@ function BlockingView({ ); }, [styles, subtitleText, shouldEmbedLinkWithSubtitle, CustomSubtitle]); - const containerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: containerStyleProp}); + const containerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: containerStyleProp}); return ( diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx index b9afe868878cc..aa09ef2469080 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.tsx +++ b/src/components/BlockingViews/FullPageNotFoundView.tsx @@ -53,6 +53,9 @@ type FullPageNotFoundViewProps = { /** Whether to add bottom safe area padding to the view. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; }; // eslint-disable-next-line rulesdir/no-negated-variables @@ -71,6 +74,7 @@ function FullPageNotFoundView({ subtitleStyle, shouldDisplaySearchRouter, addBottomSafeAreaPadding = true, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, }: FullPageNotFoundViewProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -98,6 +102,7 @@ function FullPageNotFoundView({ onLinkPress={onLinkPress} subtitleStyle={subtitleStyle} addBottomSafeAreaPadding={addBottomSafeAreaPadding} + addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding} /> diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.tsx b/src/components/BlockingViews/FullPageOfflineBlockingView.tsx index dc5c210b3178a..b110c9e20defb 100644 --- a/src/components/BlockingViews/FullPageOfflineBlockingView.tsx +++ b/src/components/BlockingViews/FullPageOfflineBlockingView.tsx @@ -9,9 +9,12 @@ import BlockingView from './BlockingView'; type FullPageOfflineBlockingViewProps = ChildrenProps & { /** Whether to add bottom safe area padding to the view. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; }; -function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true}: FullPageOfflineBlockingViewProps) { +function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true, addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding}: FullPageOfflineBlockingViewProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); @@ -25,6 +28,7 @@ function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true} title={translate('common.youAppearToBeOffline')} subtitle={translate('common.thisFeatureRequiresInternet')} addBottomSafeAreaPadding={addBottomSafeAreaPadding} + addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding} /> ); } diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx index d3a715ad87487..dac6e9494d8a9 100644 --- a/src/components/EmptyStateComponent/index.tsx +++ b/src/components/EmptyStateComponent/index.tsx @@ -30,6 +30,7 @@ function EmptyStateComponent({ showsVerticalScrollIndicator, minModalHeight = 400, addBottomSafeAreaPadding = false, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, }: EmptyStateComponentProps) { const styles = useThemeStyles(); const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO); @@ -90,6 +91,7 @@ function EmptyStateComponent({ contentContainerStyle={[{minHeight: minModalHeight}, styles.flexGrow1, styles.flexShrink0, containerStyles]} style={styles.flex1} addBottomSafeAreaPadding={addBottomSafeAreaPadding} + addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding} > = { /** Whether to add bottom safe area padding to the view. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; }; type MediaType = SharedProps & { diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx index fe9179fa88b4d..2a17997324f36 100644 --- a/src/components/FixedFooter.tsx +++ b/src/components/FixedFooter.tsx @@ -2,7 +2,7 @@ import type {ReactNode} from 'react'; import React, {useMemo} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; -import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; +import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import useThemeStyles from '@hooks/useThemeStyles'; type FixedFooterProps = { @@ -15,31 +15,33 @@ type FixedFooterProps = { /** Whether to add bottom safe area padding to the content. */ addBottomSafeAreaPadding?: boolean; + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; + /** Whether to stick the footer to the bottom of the screen. */ shouldStickToBottom?: boolean; }; -function FixedFooter({style, children, addBottomSafeAreaPadding = false, shouldStickToBottom = false}: FixedFooterProps) { +function FixedFooter({ + style, + children, + addBottomSafeAreaPadding = false, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, + shouldStickToBottom = false, +}: FixedFooterProps) { const styles = useThemeStyles(); - const {paddingBottom} = useSafeAreaPaddings(true); - - const footerStyle = useMemo>(() => { - const totalPaddingBottom = styles.pb5.paddingBottom + paddingBottom; - - // If the footer should stick to the bottom, we use absolute positioning instead of flex. - // In this case, we need to use style.bottom instead of style.paddingBottom. - if (shouldStickToBottom) { - return {position: 'absolute', left: 0, right: 0, bottom: addBottomSafeAreaPadding ? totalPaddingBottom : styles.pb5.paddingBottom}; - } - - // If the footer should not stick to the bottom, we use flex and add the safe area padding in styles.paddingBottom. - if (addBottomSafeAreaPadding) { - return {paddingBottom: totalPaddingBottom}; - } - // Otherwise, we just use the default bottom padding. - return styles.pb5; - }, [addBottomSafeAreaPadding, paddingBottom, shouldStickToBottom, styles.pb5]); + const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({ + addBottomSafeAreaPadding, + addOfflineIndicatorBottomSafeAreaPadding, + additionalPaddingBottom: styles.pb5.paddingBottom, + styleProperty: shouldStickToBottom ? 'bottom' : 'paddingBottom', + }); + + const footerStyle = useMemo>( + () => [shouldStickToBottom && styles.stickToBottom, bottomSafeAreaPaddingStyle], + [bottomSafeAreaPaddingStyle, shouldStickToBottom, styles.stickToBottom], + ); if (!children) { return null; diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 6c8d3f989e166..5145bd9754e68 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -79,6 +79,9 @@ type FormProviderProps = FormProps @@ -141,10 +146,8 @@ function FormWrapper({ submitButtonStyles, shouldSubmitButtonStickToBottom ? [ + styles.stickToBottom, { - position: 'absolute', - left: 0, - right: 0, bottom: styles.pb5.paddingBottom + paddingBottom, }, style, @@ -180,6 +183,7 @@ function FormWrapper({ styles.mh0, styles.mt5, styles.pb5.paddingBottom, + styles.stickToBottom, submitButtonStyles, submitButtonText, submitFlexEnabled, @@ -231,6 +235,7 @@ function FormWrapper({ contentContainerStyle={styles.flexGrow1} keyboardShouldPersistTaps="handled" addBottomSafeAreaPadding={shouldApplyBottomSafeAreaPadding} + addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding} ref={formRef} > {scrollViewContent()} @@ -241,6 +246,7 @@ function FormWrapper({ contentContainerStyle={styles.flexGrow1} keyboardShouldPersistTaps="handled" addBottomSafeAreaPadding={shouldApplyBottomSafeAreaPadding} + addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding} ref={formRef} > {scrollViewContent()} diff --git a/src/components/NavigationBar/index.android.tsx b/src/components/NavigationBar/index.android.tsx index a7e8fe9ccd073..3f066b806a384 100644 --- a/src/components/NavigationBar/index.android.tsx +++ b/src/components/NavigationBar/index.android.tsx @@ -2,20 +2,19 @@ import {useMemo} from 'react'; import {View} from 'react-native'; import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; /** NavigationBar renders a semi-translucent background behind the three-button navigation bar on Android. */ function NavigationBar() { - const theme = useTheme(); + const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {insets} = useSafeAreaPaddings(); + const {insets, paddingBottom} = useSafeAreaPaddings(); const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]); - const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS; - return isSoftKeyNavigation ? : null; + return isSoftKeyNavigation ? : null; } NavigationBar.displayName = 'NavigationBar'; diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx index 5b6a28156dc2b..932243ce4c0c8 100644 --- a/src/components/OfflineIndicator.tsx +++ b/src/components/OfflineIndicator.tsx @@ -1,10 +1,9 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; @@ -21,18 +20,21 @@ type OfflineIndicatorProps = { /** Whether to add bottom safe area padding to the view. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to make the indicator translucent. */ + isTranslucent?: boolean; }; -function OfflineIndicator({style, containerStyles, addBottomSafeAreaPadding = false}: OfflineIndicatorProps) { +function OfflineIndicator({style, containerStyles: containerStylesProp, addBottomSafeAreaPadding = false, isTranslucent = false}: OfflineIndicatorProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); - const computedStyles = useBottomSafeSafeAreaPaddingStyle({ + const fallbackStyle = useMemo(() => [styles.offlineIndicatorContainer, containerStylesProp], [styles.offlineIndicatorContainer, containerStylesProp]); + const containerStyles = useBottomSafeSafeAreaPaddingStyle({ addBottomSafeAreaPadding, - style: containerStyles ?? (shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator), + style: fallbackStyle, }); if (!isOffline) { @@ -40,7 +42,7 @@ function OfflineIndicator({style, containerStyles, addBottomSafeAreaPadding = fa } return ( - + , ) { @@ -176,6 +186,7 @@ function ScreenWrapper( const navigationFallback = useNavigation>(); const navigation = navigationProp ?? navigationFallback; const isFocused = useIsFocused(); + const {isOffline} = useNetwork(); const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight); // since Modals are drawn in separate native view hierarchy we should always add paddings const ignoreInsetsConsumption = !useContext(ModalContext).default; @@ -191,6 +202,7 @@ function ScreenWrapper( const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {initialHeight} = useInitialDimensions(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const {isDevelopment} = useEnvironment(); const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined; @@ -288,6 +300,8 @@ function ScreenWrapper( }, []); const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle, unmodifiedPaddings} = useSafeAreaPaddings(enableEdgeToEdgeBottomSafeAreaPadding); + const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]); + const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS; const isSafeAreaTopPaddingApplied = includePaddingTop; const paddingTopStyle: StyleProp = useMemo(() => { @@ -315,12 +329,34 @@ function ScreenWrapper( paddingBottom: includeSafeAreaPaddingBottom ? paddingBottom : undefined, }; }, [ignoreInsetsConsumption, includeSafeAreaPaddingBottom, paddingBottom, unmodifiedPaddings.bottom]); + const bottomContentStyle = useMemo( () => (enableEdgeToEdgeBottomSafeAreaPadding ? edgeToEdgeBottomContentStyle : legacyBottomContentStyle), [enableEdgeToEdgeBottomSafeAreaPadding, edgeToEdgeBottomContentStyle, legacyBottomContentStyle], ); - const addMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : !includeSafeAreaPaddingBottom; + const mobileOfflineIndicatorBackgroundStyle = useMemo(() => { + const showOfflineIndicatorBackground = !bottomContent && (isSoftKeyNavigation || isOffline); + if (!showOfflineIndicatorBackground) { + return undefined; + } + return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG; + }, [bottomContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]); + const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({ + addBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPadding ? true : !includeSafeAreaPaddingBottom, + styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom', + }); + + const displayStickyMobileOfflineIndicator = shouldMobileOfflineIndicatorStickToBottom && !bottomContent; + const mobileOfflineIndicatorContainerStyle = useMemo( + () => [mobileOfflineIndicatorBottomSafeAreaStyle, displayStickyMobileOfflineIndicator && styles.stickToBottom, !isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle], + [mobileOfflineIndicatorBottomSafeAreaStyle, displayStickyMobileOfflineIndicator, styles.stickToBottom, isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle], + ); + const mobileOfflineIndicatorStyle = useMemo( + () => [styles.pl5, isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle], + [isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle, styles.pl5], + ); + const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true; const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit()); @@ -369,20 +405,19 @@ function ScreenWrapper( } {isSmallScreenWidth && shouldShowOfflineIndicator && ( <> - - {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} + {isOffline && ( + + + {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} + + )} )} {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && ( <> {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} diff --git a/src/components/ScrollView.tsx b/src/components/ScrollView.tsx index 8a2a4519e0d4f..e4b2c6703c30d 100644 --- a/src/components/ScrollView.tsx +++ b/src/components/ScrollView.tsx @@ -8,13 +8,27 @@ import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddi type ScrollViewProps = RNScrollViewProps & { /** Whether to add bottom safe area padding to the content. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; }; function ScrollView( - {children, scrollIndicatorInsets, contentContainerStyle: contentContainerStyleProp, addBottomSafeAreaPadding = false, ...props}: ScrollViewProps, + { + children, + scrollIndicatorInsets, + contentContainerStyle: contentContainerStyleProp, + addBottomSafeAreaPadding = false, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, + ...props + }: ScrollViewProps, ref: ForwardedRef, ) { - const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: contentContainerStyleProp}); + const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({ + addBottomSafeAreaPadding, + addOfflineIndicatorBottomSafeAreaPadding, + style: contentContainerStyleProp, + }); return ( ( - {addBottomSafeAreaPadding = false, contentContainerStyle: contentContainerStyleProp, ...restProps}: SectionListProps, + { + addBottomSafeAreaPadding = false, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, + contentContainerStyle: contentContainerStyleProp, + ...restProps + }: SectionListProps, ref: SectionListRef, ) { - const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: contentContainerStyleProp}); + const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: contentContainerStyleProp}); return ( = RNSectionListProps & { /** Whether to add bottom safe area padding to the content. */ addBottomSafeAreaPadding?: boolean; + + /** Whether to add bottom safe area padding to the content. */ + addOfflineIndicatorBottomSafeAreaPadding?: boolean; }; type SectionListRef = ForwardedRef>; diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index c1e3818a12e28..e6db53cecd2ff 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -16,7 +16,6 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import useActiveElementRole from '@hooks/useActiveElementRole'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; -import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; @@ -116,7 +115,7 @@ function BaseSelectionList( listItemWrapperStyle, shouldIgnoreFocus = false, scrollEventThrottle, - contentContainerStyle: contentContainerStyleProp, + contentContainerStyle, shouldHighlightSelectedItem = false, shouldKeepFocusedItemAtTopOfViewableArea = false, shouldDebounceScrolling = false, @@ -129,6 +128,7 @@ function BaseSelectionList( isScreenFocused = false, shouldSubscribeToArrowKeyEvents = true, addBottomSafeAreaPadding = false, + addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding, }: SelectionListProps, ref: ForwardedRef, ) { @@ -831,13 +831,6 @@ function BaseSelectionList( [footerContent, includeSafeAreaPaddingBottom, isKeyboardShown, safeAreaPaddingBottomStyle], ); - // If the default confirm button is visible and it is bottom-sticky, - // we need to add additional padding bottom to the content container. - const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({ - addBottomSafeAreaPadding: false, // Bottom safe area padding is already applied in the SectionList - style: contentContainerStyleProp, - }); - const shouldHideContentBottomSafeAreaPadding = showConfirmButton || !!footerContent; // TODO: test _every_ component that uses SelectionList @@ -900,6 +893,7 @@ function BaseSelectionList( onEndReachedThreshold={onEndReachedThreshold} scrollEventThrottle={scrollEventThrottle} addBottomSafeAreaPadding={!shouldHideContentBottomSafeAreaPadding && addBottomSafeAreaPadding} + addOfflineIndicatorBottomSafeAreaPadding={!shouldHideContentBottomSafeAreaPadding && addOfflineIndicatorBottomSafeAreaPadding} contentContainerStyle={contentContainerStyle} CellRendererComponent={shouldPreventActiveCellVirtualization ? FocusAwareCellRendererComponent : undefined} /> @@ -910,6 +904,7 @@ function BaseSelectionList(