Want to add custom item if search not found

[sagarkbluebenz]

Hi im rendering a list .. if user search the list and he doesn't find the item.. then he can add that custom item.. is it possible?

[hoaphantn7604]

hi @sagarkbluebenz ,
Please refer code example:

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import AntDesign from 'react-native-vector-icons/AntDesign';

const data = [
  { label: 'Item 1', value: '1' },
  { label: 'Item 2', value: '2' },
  { label: 'Item 3', value: '3' },
  { label: 'Item 4', value: '4' },
  { label: 'Item 5', value: '5' },
  { label: 'Item 6', value: '6' },
  { label: 'Item 7', value: '7' },
  { label: 'Item 8', value: '8' },
];

const DropdownComponent = () => {
  const [value, setValue] = useState(null);

  const renderEmptyList = () => {
    return (
      <View style={styles.emptyContainer}>
        <Text>List is empty!</Text>
      </View>
    );
  };

  return (
    <Dropdown
      style={styles.dropdown}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      data={data}
      search
      maxHeight={200}
      labelField="label"
      valueField="value"
      placeholder="Select item"
      searchPlaceholder="Search..."
      value={value}
      onChange={item => {
        setValue(item.value);
      }}
      renderLeftIcon={() => <AntDesign style={styles.icon} color="black" name="Safety" size={20} />}
      flatListProps={{ ListEmptyComponent: () => renderEmptyList() }}
    />
  );
};

export default DropdownComponent;

const styles = StyleSheet.create({
  dropdown: {
    marginTop: 360,
    height: 50,
    borderBottomColor: 'gray',
    borderBottomWidth: 0.5,
  },
  icon: {
    marginRight: 5,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  emptyContainer: {
    height: 50,
    margin: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[sagarkbluebenz]

Still Cannot add. Only showing List is empty...

[glaucomp]

Same issue

[developer8530]

text showing in reverse when dropdownPosition="top" selected

[hoaphantn7604]

text showing in reverse when dropdownPosition="top" selected

Hi @developer8530 , Install later version 2.7.0. Use inverted set is "false".

   <Dropdown
      {...}
      inverted={flase}
   />

[sadman11]

did anyone manage to achieve this?