Add Custom Component For No Search Results

[coltenkrauter]

Hi there, is there a straightforward way to set a custom component or text for when the search results return no results?

The closest idea I have is this,

<SelectDropdown
	data={filteredCountries.length > 0 ? filteredCountries : [{ name: 'No results found', dialCode: '', flag: '' }]}
	disableAutoScroll
	dropdownStyle={{ backgroundColor: theme.colors.background, minWidth: 300, borderRadius: 6 }}
	onChangeSearchInputText={handleSearchInputChange}
	onSelect={(item) => {
		// Prevent selection of "No results found" entry
		if (item.name !== 'No results found') {
			setSelectedCountry(item)
		}
	}}
	renderButton={renderDropdownButton}
	renderItem={(item) =>
		item.name === 'No results found' ? (
			<View style={{ padding: 10, alignItems: 'center' }}>
				<Text style={{ color: theme.colors.text, fontSize: 14 }}>{item.name}</Text>
			</View>
		) : (
			renderDropdownItem(item)
		)
	}
	search
	searchInputStyle={{ backgroundColor: theme.colors.background }}
	searchInputTxtStyle={{ color: theme.colors.text, padding: 10 }}
	searchPlaceHolder="Search countries"
/>

But I would much rather do this instead,

renderEmptyComponent

<SelectDropdown
	data={filteredCountries}
	disableAutoScroll
	dropdownStyle={{ backgroundColor: theme.colors.background, minWidth: 300, borderRadius: 6 }}
	onChangeSearchInputText={handleSearchInputChange}
	onSelect={setSelectedCountry}
	renderButton={renderDropdownButton}
	renderItem={renderDropdownItem}
	search
	searchInputStyle={{ backgroundColor: theme.colors.background }}
	searchInputTxtStyle={{ color: theme.colors.text, padding: 10 }}
	searchPlaceHolder="Search countries"
	renderEmptyComponent={() => (
		<View style={{ padding: 10, alignItems: 'center' }}>
			<Text style={{ color: theme.colors.text, fontSize: 14 }}>No results found</Text>
		</View>
	)}
/>