@planningcenter/chat-react-native 4.4.1-qa-staging.29 → 4.4.1-qa-staging.31

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,6 +1,6 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, useNavigation } from '@react-navigation/native'
-import { RefObject, useRef, useState } from 'react'
+import { ReactElement, RefObject, useRef, useState } from 'react'
 import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -92,38 +92,31 @@ export function ConversationSelectDirectMessageRecipientsScreen({
 
   return (
     <KeyboardView>
-      {isError && (
-        <Banner
-          appearance="error"
-          description="There was an issue starting the conversation. Please try again."
-          style={styles.errorBanner}
-        />
-      )}
-      <ToField
-        selectedPeople={selectedPeople}
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-        onRemove={removePerson}
-        onClear={() => setSelectedPeople(new Map())}
-        searchInputRef={searchInputRef}
-      />
       <View style={styles.candidateResultsContainer}>
-        <ComponentErrorBoundary
-          key={debouncedTerm}
-          fallback={
-            <Banner
-              appearance="error"
-              description="Couldn't load people right now. Try again."
-              style={styles.errorBanner}
-            />
+        <CandidateResults
+          term={debouncedTerm}
+          selectedPeople={selectedPeople}
+          onSelect={selectPerson}
+          header={
+            <>
+              {isError && (
+                <Banner
+                  appearance="error"
+                  description="There was an issue starting the conversation. Please try again."
+                  style={styles.errorBanner}
+                />
+              )}
+              <ToField
+                selectedPeople={selectedPeople}
+                searchTerm={searchTerm}
+                onSearchChange={setSearchTerm}
+                onRemove={removePerson}
+                onClear={() => setSelectedPeople(new Map())}
+                searchInputRef={searchInputRef}
+              />
+            </>
           }
-        >
-          <CandidateResults
-            term={debouncedTerm}
-            selectedPeople={selectedPeople}
-            onSelect={selectPerson}
-          />
-        </ComponentErrorBoundary>
+        />
       </View>
       <ActionButton
         title={buttonText}
@@ -214,53 +207,74 @@ function CandidateResults({
   term,
   selectedPeople,
   onSelect,
+  header,
 }: {
   term: string
   selectedPeople: Map<string, DirectMessageCandidateResource>
   onSelect: (candidate: DirectMessageCandidateResource) => void
+  header: ReactElement
 }) {
   const styles = useStyles()
-  const { data, isFetching } = useDirectMessageCandidates(term)
+  const { data, isFetching, isError } = useDirectMessageCandidates(term, { throwOnError: false })
   const { groups, teams, resultsDescription } = useDirectMessageAffiliations()
 
-  if (term.length < 1) {
-    if (selectedPeople.size > 0) return null
+  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
+  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+  const showsResults = term.length >= 1 && !isAtLimit && !isError && unselectedCandidates.length > 0
 
-    return (
-      <View style={styles.emptyState}>
-        <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
-        <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
-        <Text variant="secondary" style={styles.emptyStateSubtitle}>
-          Start a conversation with people in your groups and teams.
-        </Text>
-      </View>
-    )
-  }
+  const emptyState = (() => {
+    if (showsResults) return null
 
-  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS
+    if (term.length < 1) {
+      if (selectedPeople.size > 0) return null
 
-  if (isAtLimit) {
-    return (
-      <View style={styles.emptyState}>
-        <Text variant="secondary" style={styles.emptyStateSubtitle}>
-          You can add up to {MAX_RECIPIENTS} people to a direct message.
-        </Text>
-      </View>
-    )
-  }
+      return (
+        <View style={styles.emptyState}>
+          <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
+          <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
+          <Text variant="secondary" style={styles.emptyStateSubtitle}>
+            Start a conversation with people in your groups and teams.
+          </Text>
+        </View>
+      )
+    }
 
-  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
-  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)
+    if (isError) {
+      return (
+        <ComponentErrorBoundary
+          key={term}
+          fallback={
+            <Banner
+              appearance="error"
+              description="Couldn't load people right now. Try again."
+              style={styles.errorBanner}
+            />
+          }
+        >
+          <CandidateSearchError term={term} />
+        </ComponentErrorBoundary>
+      )
+    }
 
-  if (isFetching && unselectedCandidates.length === 0) {
-    return (
-      <View style={styles.emptyState}>
-        <Spinner />
-      </View>
-    )
-  }
+    if (isAtLimit) {
+      return (
+        <View style={styles.emptyState}>
+          <Text variant="secondary" style={styles.emptyStateSubtitle}>
+            You can add up to {MAX_RECIPIENTS} people to a direct message.
+          </Text>
+        </View>
+      )
+    }
+
+    if (isFetching) {
+      return (
+        <View style={styles.emptyState}>
+          <Spinner />
+        </View>
+      )
+    }
 
-  if (!isFetching && unselectedCandidates.length === 0) {
     return (
       <View style={styles.emptyState}>
         <Icon name="general.search" size={32} style={styles.emptyStateIcon} />
@@ -270,13 +284,16 @@ function CandidateResults({
         </Text>
       </View>
     )
-  }
+  })()
 
   return (
     <CandidateList
-      candidates={unselectedCandidates}
-      hasTruncated={hasTruncated}
-      description={resultsDescription}
+      header={header}
+      candidates={showsResults ? unselectedCandidates : []}
+      hasTruncated={showsResults && hasTruncated}
+      description={showsResults ? resultsDescription : null}
+      showsHeading={showsResults}
+      emptyState={emptyState}
       groups={groups}
       teams={teams}
       onSelect={onSelect}
@@ -284,6 +301,11 @@ function CandidateResults({
   )
 }
 
+function CandidateSearchError({ term }: { term: string }) {
+  useDirectMessageCandidates(term)
+  return null
+}
+
 function candidateBadges(candidate: DirectMessageCandidateResource) {
   const badges = []
   if (candidate.directMessagesDisabled) badges.push({ title: 'DMs off' })
@@ -309,16 +331,22 @@ function candidateAffiliationNames(
 }
 
 function CandidateList({
+  header,
   candidates,
   hasTruncated,
   description,
+  showsHeading,
+  emptyState,
   groups,
   teams,
   onSelect,
 }: {
+  header: ReactElement
   candidates: DirectMessageCandidateResource[]
   hasTruncated: boolean
   description: string | null
+  showsHeading: boolean
+  emptyState: ReactElement | null
   groups: Map<number, string>
   teams: Map<number, string>
   onSelect: (candidate: DirectMessageCandidateResource) => void
@@ -330,6 +358,7 @@ function CandidateList({
   return (
     <FlatList<DirectMessageCandidateResource>
       data={available}
+      contentInsetAdjustmentBehavior="automatic"
       keyboardShouldPersistTaps="handled"
       keyExtractor={item => item.id}
       renderItem={({ item }) => (
@@ -340,7 +369,13 @@ function CandidateList({
           onSelect={() => onSelect(item)}
         />
       )}
-      ListHeaderComponent={<ResultsHeading description={description} />}
+      ListHeaderComponent={
+        <>
+          {header}
+          {showsHeading && <ResultsHeading description={description} />}
+        </>
+      }
+      ListEmptyComponent={emptyState}
       ListFooterComponent={
         <>
           {dmDisabled.length > 0 && (

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -60,6 +60,7 @@ export const ConversationSelectGroupRecipientsScreen = ({
 
   return (
     <SectionList<GroupsGroupResource, GroupsSection>
+      contentInsetAdjustmentBehavior="automatic"
       sections={sections}
       keyExtractor={item => item.id.toString()}
       stickySectionHeadersEnabled={false}

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -32,6 +32,7 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
 
   return (
     <FlatList
+      contentInsetAdjustmentBehavior="automatic"
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
       contentContainerStyle={styles.contentContainer}

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -125,18 +125,6 @@ describe('FilterDropdownListHeaderComponent', () => {
     setRouteParams({})
   })
 
-  it('caps the trigger to the row so a long label truncates instead of overflowing', () => {
-    render(<FilterDropdownListHeaderComponent />)
-
-    fireEvent(screen.getByTestId('conversations-filter-heading-row'), 'layout', {
-      nativeEvent: { layout: { width: 360 } },
-    })
-
-    expect(screen.getByRole('button', { name: 'All conversations' })).toHaveStyle({
-      maxWidth: 328,
-    })
-  })
-
   it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)
 
@@ -311,13 +299,4 @@ describe('FilterDropdownListHeaderComponent', () => {
 
     expect(mockNavigate).toHaveBeenCalledWith('Search')
   })
-
-  it('renders the search button after the other actions', () => {
-    const view = render(<FilterDropdownListHeaderComponent />)
-
-    const buttons = view.getAllByRole('button').map(button => button.props.accessibilityLabel)
-
-    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('Chat settings'))
-    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('New conversation'))
-  })
 })

package/src/screens/conversations/components/filter_dropdown_list_header_component.tsx

@@ -1,7 +1,12 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Alert, LayoutChangeEvent, StyleSheet, View } from 'react-native'
-import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
+import {
+  FilterDropdown,
+  FilterDropdownOption,
+  FilterDropdownTrigger,
+  TextButton,
+} from '../../../components'
 import {
   useCanBrowseArchivedConversations,
   useCanCreateConversations,
@@ -207,19 +212,41 @@ export const FilterDropdownListHeaderComponent = () => {
 
   const styles = useStyles()
 
+  // Cap the trigger beside the actions while the widest fixed label fits there, so only longer
+  // labels truncate; past that, cap it to the row and let the actions wrap.
   const [rowWidth, setRowWidth] = useState<number>()
+  const [actionsWidth, setActionsWidth] = useState<number>()
+  const [widestFixedLabelWidth, setWidestFixedLabelWidth] = useState<number>()
   const handleRowLayout = useCallback((event: LayoutChangeEvent) => {
     setRowWidth(event.nativeEvent.layout.width)
   }, [])
-  const triggerMaxWidth = rowWidth !== undefined ? rowWidth - ROW_PADDING_HORIZONTAL * 2 : undefined
+  const handleActionsLayout = useCallback((event: LayoutChangeEvent) => {
+    setActionsWidth(event.nativeEvent.layout.width)
+  }, [])
+  const handleWidestFixedLabelLayout = useCallback((event: LayoutChangeEvent) => {
+    setWidestFixedLabelWidth(event.nativeEvent.layout.width)
+  }, [])
+  const triggerMaxWidth = useMemo(() => {
+    if (rowWidth === undefined) return undefined
+
+    const rowContentWidth = rowWidth - ROW_PADDING_HORIZONTAL * 2
+    if (actionsWidth === undefined || widestFixedLabelWidth === undefined) return rowContentWidth
+
+    const roomBesideActions = rowContentWidth - actionsWidth - HEADING_ROW_GAP
+    return roomBesideActions >= widestFixedLabelWidth ? roomBesideActions : rowContentWidth
+  }, [rowWidth, actionsWidth, widestFixedLabelWidth])
 
   return (
     <View style={styles.listHeader}>
-      <View
-        style={styles.headingRow}
-        onLayout={handleRowLayout}
-        testID="conversations-filter-heading-row"
-      >
+      <View style={styles.widestFixedLabel} pointerEvents="none">
+        <FilterDropdownTrigger
+          label={ALL_CONVERSATIONS_LABEL}
+          onLayout={handleWidestFixedLabelLayout}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        />
+      </View>
+      <View style={styles.headingRow} onLayout={handleRowLayout}>
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -231,7 +258,7 @@ export const FilterDropdownListHeaderComponent = () => {
             maxWidth={triggerMaxWidth}
           />
         </View>
-        <View style={styles.actionsContainer}>
+        <View style={styles.actionsContainer} onLayout={handleActionsLayout}>
           <ListHeaderActionButton
             name="general.cog"
             onPress={handleChatSettings}
@@ -297,6 +324,10 @@ const useStyles = () => {
     titleContainer: {
       flexShrink: 0,
     },
+    widestFixedLabel: {
+      position: 'absolute',
+      opacity: 0,
+    },
     actionsContainer: {
       flexDirection: 'row',
       gap: 8,

package/src/screens/get_help_screen.tsx

@@ -1,6 +1,6 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { useCallback, useMemo } from 'react'
-import { Alert, Linking, StyleSheet, View } from 'react-native'
+import { Alert, Linking, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -56,7 +56,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
   }, [navigation])
 
   return (
-    <View style={[styles.container]}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
       {appSpecificHelpUrls.length > 0 && (
         <Heading variant="h2" style={[styles.heading, styles.headingBottomBorder]}>
           How-to articles
@@ -90,7 +90,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
           to the development team.
         </Text>
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -145,7 +145,7 @@ const useStyles = () => {
 
   return StyleSheet.create({
     container: {
-      flex: 1,
+      flexGrow: 1,
     },
     text: {
       paddingVertical: 4,

package/src/screens/group_notification_settings_screen.tsx

@@ -2,7 +2,7 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useEffect } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useTheme } from '../hooks'
 import { platformFontWeightBold } from '../utils/styles'
@@ -38,7 +38,7 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
   }
 
   return (
-    <View style={styles.container}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.container}>
       <View style={styles.sectionOuter}>
         <View style={styles.sectionInner}>
           <Heading variant="h2" style={styles.sectionHeading}>
@@ -76,7 +76,7 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
           )}
         </View>
       </PlatformPressable>
-    </View>
+    </ScrollView>
   )
 }
 

package/src/screens/notification_settings_screen.tsx

@@ -123,6 +123,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   return (
     <View style={styles.listContainer}>
       <FlatList
+        contentInsetAdjustmentBehavior="automatic"
         data={listData as SectionListData}
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item, index }) => {

package/src/screens/preferred_app_selection_screen.tsx

@@ -2,7 +2,7 @@ import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps } from '@react-navigation/native'
 import { useMutation } from '@tanstack/react-query'
 import React, { type PropsWithChildren } from 'react'
-import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Image, ScrollView, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useApiClient, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
@@ -45,7 +45,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
   const sectionTitle = chatType ? chatTypeLabel(chatType.title) : undefined
 
   return (
-    <View style={styles.container}>
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.container}>
       <View style={styles.section}>
         <Heading variant="h2" style={styles.sectionHeading}>
           {sectionTitle}
@@ -64,7 +64,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
           </PressableRow>
         ))}
       </View>
-    </View>
+    </ScrollView>
   )
 }
 
@@ -118,7 +118,7 @@ const PressableRow = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexGrow: 1,
   },
   section: {
     paddingTop: 24,

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -106,12 +106,13 @@ describe('SearchScreen', () => {
     fireEvent.changeText(input, ' budget ')
 
     expect(view.getByText('Search chat')).toBeTruthy()
-    expect(mockUseSearchResults).not.toHaveBeenCalled()
+    const searchedTerms = () =>
+      new Set(mockUseSearchResults.mock.calls.map(([term]) => term).filter(term => term.trim()))
+    expect([...searchedTerms()]).toEqual([])
 
     act(() => jest.advanceTimersByTime(200))
 
-    const searchedTerms = new Set(mockUseSearchResults.mock.calls.map(([term]) => term))
-    expect([...searchedTerms]).toEqual(['budget'])
+    expect([...searchedTerms()]).toEqual(['budget'])
     expect(view.queryByText('Search chat')).toBeNull()
     expect(view.getByLabelText('Loading results')).toBeTruthy()
   })
@@ -121,10 +122,7 @@ describe('SearchScreen', () => {
 
     const scrollView = view.UNSAFE_getByType(ScrollView)
     expect(scrollView.props.keyboardShouldPersistTaps).toBe('handled')
-    expect(scrollView.props.contentContainerStyle).toMatchObject({
-      flexGrow: 1,
-      justifyContent: 'center',
-    })
+    expect(scrollView.props.contentContainerStyle).toMatchObject({ flexGrow: 1 })
     expect(view.getByText('Search chat')).toBeTruthy()
   })
 

package/src/screens/search/components/__tests__/search_results_list.test.tsx

@@ -49,9 +49,13 @@ const messageResult = (id: string): MessageSearchResultResource => ({
   },
 })
 
+const slots = { header: <></>, prompt: <></> }
+
 const renderList = (state: Partial<SearchState>, onSettled = jest.fn()) => {
   mockUseSearchResults.mockReturnValue(searchState(state))
-  const list = () => <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} />
+  const list = () => (
+    <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} {...slots} />
+  )
   const view = render(list())
   const rerenderWith = (next: Partial<SearchState>) => {
     mockUseSearchResults.mockReturnValue(searchState(next))
@@ -130,7 +134,7 @@ describe('SearchResultsList', () => {
     const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
     mockUseSearchResults.mockReturnValue(searchState({ results }))
     const view = render(
-      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} />
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} {...slots} />
     )
 
     fireEvent.press(view.getByLabelText(/^Message 2/))

package/src/screens/search/components/search_results_list.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { ReactElement, useEffect, useRef } from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import { Banner, Spinner, Text, TextButton } from '../../../components'
 import { useSearchResults } from '../../../hooks/use_search_results'
@@ -23,9 +23,17 @@ interface SearchResultsListProps {
   term: string
   onSelect: (result: SearchResultResource, position: number) => void
   onSettled: (term: string, counts: SearchResultCounts) => void
+  header: ReactElement
+  prompt: ReactElement
 }
 
-export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsListProps) {
+export function SearchResultsList({
+  term,
+  onSelect,
+  onSettled,
+  header,
+  prompt,
+}: SearchResultsListProps) {
   const {
     results,
     failedTypes,
@@ -36,9 +44,10 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
     hasNextPage,
     isFetchingNextPage,
   } = useSearchResults(term)
-  const conversationResults = results.filter(isConversationResult)
-  const messageResults = results.filter(isMessageResult)
-  const settled = !isPending && !isError
+  const searching = term.trim().length > 0
+  const conversationResults = searching ? results.filter(isConversationResult) : []
+  const messageResults = searching ? results.filter(isMessageResult) : []
+  const settled = searching && !isPending && !isError
 
   const settledTermRef = useRef<string | undefined>(undefined)
 
@@ -56,6 +65,7 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
     <FlatList
       data={messageResults}
       keyExtractor={item => item.id}
+      contentInsetAdjustmentBehavior="automatic"
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="on-drag"
       contentContainerStyle={styles.content}
@@ -64,16 +74,20 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
       )}
       ListHeaderComponent={
         <>
+          {header}
           {conversationResults.length > 0 && (
             <ConversationResults results={conversationResults} onSelect={onSelect} />
           )}
-          {failedTypes.includes('conversation') && <SectionFailure type="conversation" />}
+          {searching && failedTypes.includes('conversation') && (
+            <SectionFailure type="conversation" />
+          )}
           {messageResults.length > 0 && <ResultsSection title="Messages" />}
         </>
       }
       ListEmptyComponent={
         <ListEmpty
           term={term}
+          prompt={prompt}
           isError={isError}
           isPending={isPending}
           noResults={results.length === 0 && failedTypes.length === 0}
@@ -91,7 +105,7 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
               Try again
             </TextButton>
           )}
-          {failedTypes.includes('message') && <SectionFailure type="message" />}
+          {searching && failedTypes.includes('message') && <SectionFailure type="message" />}
         </>
       }
       onEndReached={() => {
@@ -104,12 +118,15 @@ export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsLi
 
 interface ListEmptyProps {
   term: string
+  prompt: ReactElement
   isError: boolean
   isPending: boolean
   noResults: boolean
 }
 
-function ListEmpty({ term, isError, isPending, noResults }: ListEmptyProps) {
+function ListEmpty({ term, prompt, isError, isPending, noResults }: ListEmptyProps) {
+  if (term.trim().length === 0) return <View style={styles.prompt}>{prompt}</View>
+
   if (isError) {
     return <Banner appearance="error" description={SEARCH_ERROR_MESSAGE} style={styles.banner} />
   }
@@ -149,6 +166,10 @@ const styles = StyleSheet.create({
   content: {
     flexGrow: 1,
   },
+  prompt: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
   banner: {
     margin: 16,
   },