Search error styles and text

[yamunamaccarana]

Hi,

I'd like to add a search error message below the search bar, including the possibility to customise/change the text (e.g. red color, translate in Italian "Non c'è").

I've seen something similar in react-native-dropdown-picker, like in https://github.com/hossein-zare/react-native-dropdown-picker/issues/404

Is there any chance to do it with the current library? I could not find anything in the documentation.

Actual result:

Expected result:

Thanks

[yamunamaccarana]

I made it! The result:

My code:

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

const MyDropdownComponent = ({ data }) => {

  const [isFocus, setIsFocus] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState(data);

  const handleSearch = (text) => {
    const filteredResults = dropDownData.filter((item) =>
      item.name.toLowerCase().includes(text.toLowerCase())
    );
    setSearchQuery(text);
    setSearchResults(filteredResults);
  };

  const renderInputSearch = (onSearch) => {
    return (
      <View>
        <TextInput
          placeholder="Search..."
          style={styles.inputSearchStyle}
          onChangeText={(text) => {
            onSearch(text);
            handleSearch(text);
          }}
        />
        {searchResults.length === 0 && searchQuery.length > 0 && (
          <Text style={styles.nothingToShowText}>Nothing to show</Text>
        )}
      </View>
    );
  };

return (
    <View>
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={!isFocus ? 'Select item' : '...'}
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);
          }}
          renderInputSearch={renderInputSearch}
        />
    </View>
  );
};

export default MyDropdownComponent;

const styles = StyleSheet.create({
inputSearchStyle: {
    // customise your style
  },
  nothingToShowText: {
    // customise your style
  }
});

Basically I had to play with renderInputSearch