Merge pull request Expensify#87620 from software-mansion-labs/mrejdak/fix-empty-state

Author: mjasikowski

src/components/Search/index.tsx

@@ -283,7 +283,7 @@ function Search({
     const {isOffline} = useNetwork();
     const prevIsOffline = usePrevious(isOffline);
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {shouldUseNarrowLayout, isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isSmallScreenWidth, isLargeScreenWidth, isInLandscapeMode} = useResponsiveLayout();
     const styles = useThemeStyles();
     const navigation = useNavigation<PlatformStackNavigationProp<SearchFullscreenNavigatorParamList>>();
     const isFocused = useIsFocused();
@@ -1550,12 +1550,14 @@ function Search({
     ) {
         cancelNavigationSpans();
         return (
-            <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
+            <View style={[styles.flex1, isInLandscapeMode ? undefined : [shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3]]}>
                 <EmptySearchView
                     similarSearchHash={similarSearchHash}
                     type={type}
                     hasResults={searchResults?.search?.hasResults}
                     queryJSON={queryJSON}
+                    onScroll={onSearchListScroll}
+                    contentContainerStyle={isInLandscapeMode ? styles.searchListContentContainerStyles : undefined}
                 />
             </View>
         );

src/pages/Search/EmptySearchView.tsx

@@ -3,14 +3,14 @@ import {accountIDSelector} from '@selectors/Session';
 import {validTransactionDraftIDsSelector} from '@selectors/TransactionDraft';
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import type {ImageStyle, NativeScrollEvent, NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {Linking, View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import Animated from 'react-native-reanimated';
 import BookTravelButton from '@components/BookTravelButton';
 import GenericEmptyStateComponent from '@components/EmptyStateComponent/GenericEmptyStateComponent';
 import type {EmptyStateButton, HeaderMedia} from '@components/EmptyStateComponent/types';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
-import ScrollView from '@components/ScrollView';
 import {SearchScopeProvider} from '@components/Search/SearchScopeProvider';
 import type {SearchQueryJSON} from '@components/Search/types';
 import Text from '@components/Text';
@@ -19,6 +19,7 @@ import useConfirmModal from '@hooks/useConfirmModal';
 import useCreateEmptyReportConfirmation from '@hooks/useCreateEmptyReportConfirmation';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useHasEmptyReportsForPolicy from '@hooks/useHasEmptyReportsForPolicy';
+import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -48,6 +49,8 @@ type EmptySearchViewProps = {
     type: SearchDataTypes;
     hasResults: boolean;
     queryJSON?: SearchQueryJSON;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    contentContainerStyle?: StyleProp<ViewStyle>;
 };
 
 type EmptySearchViewContentProps = EmptySearchViewProps & {
@@ -70,7 +73,7 @@ type EmptySearchViewItem = {
     children?: React.ReactNode;
 };
 
-function EmptySearchView({similarSearchHash, type, hasResults, queryJSON}: EmptySearchViewProps) {
+function EmptySearchView({similarSearchHash, type, hasResults, queryJSON, onScroll, contentContainerStyle}: EmptySearchViewProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const {typeMenuSections} = useSearchTypeMenuSections();
 
@@ -98,6 +101,8 @@ function EmptySearchView({similarSearchHash, type, hasResults, queryJSON}: Empty
                 groupPoliciesWithChatEnabled={groupPoliciesWithChatEnabled}
                 hasSeenTour={hasSeenTour}
                 queryJSON={queryJSON}
+                onScroll={onScroll}
+                contentContainerStyle={contentContainerStyle}
             />
         </SearchScopeProvider>
     );
@@ -120,9 +125,12 @@ function EmptySearchViewContent({
     groupPoliciesWithChatEnabled,
     hasSeenTour,
     queryJSON,
+    onScroll,
+    contentContainerStyle,
 }: EmptySearchViewContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const isInLandscapeMode = useIsInLandscapeMode();
 
     const illustrations = useMemoizedLazyIllustrations(['EmptyStateTravel']);
     const {showConfirmModal} = useConfirmModal();
@@ -434,13 +442,16 @@ function EmptySearchViewContent({
     }
 
     return (
-        <ScrollView
+        <Animated.ScrollView
             showsVerticalScrollIndicator={false}
-            contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}
+            contentContainerStyle={[styles.flexGrow1, styles.flexShrink0, contentContainerStyle]}
+            scrollEventThrottle={CONST.TIMING.MIN_SMOOTH_SCROLL_EVENT_THROTTLE}
+            onScroll={onScroll}
         >
             <GenericEmptyStateComponent
                 headerMedia={content.headerMedia}
                 headerStyles={styles.emptyStateCardIllustrationContainer}
+                minModalHeight={isInLandscapeMode ? 0 : undefined}
                 title={content.title}
                 titleStyles={content.titleStyles}
                 subtitle={content.subtitle}
@@ -450,7 +461,7 @@ function EmptySearchViewContent({
             >
                 {content.children}
             </GenericEmptyStateComponent>
-        </ScrollView>
+        </Animated.ScrollView>
     );
 }