hoaphantn7604/react-native-element-dropdown

A react-native dropdown component easy to customize for both iOS and Android.

react-native-element-dropdown

React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications. This library simplifies the process of creating dropdown menus and provides a variety of options to customize the dropdown to match the design and functionality of your application.

Features

• Dropdown and Multiselect in one package
• Easy to use
• Consistent look and feel on iOS and Android
• Customizable font size, colors and animation duration
• Implemented with typescript

If you love this library, give us a star, you will be a ray of sunshine in our lives :)

Free React Native Boilerplate

React Native Template with a beautiful UI.

Getting started

npm install react-native-element-dropdown --save

or

yarn add react-native-element-dropdown

Demo

Dropdown Props

Props	Params	isRequire	Description
mode	'default' or 'modal' of 'auto'	No	Mode 'modal' is show the dropdown in the middle of the screen.
data	Array	Yes	Data is a plain array
labelField	String	Yes	Extract the label from the data item
valueField	String	Yes	Extract the primary key from the data item
searchField	String	Yes	Specify the field of data list you want to search
onChange	(item: object) => void	Yes	Selection callback
onChangeText	(search: string) => void	Yes	Callback that is called when the text input's text changes
value	Item	No	Set default value
placeholder	String	No	The string that will be rendered before dropdown has been selected
placeholderStyle	TextStyle	No	Styling for text placeholder
selectedTextStyle	TextStyle	No	Styling for selected text
selectedTextProps	TextProps	No	Text Props for selected text. Ex: numberOfLines={1}
style	ViewStyle	No	Styling for view container
containerStyle	ViewStyle	No	Styling for list container
maxHeight	Number	No	Customize max height for list container
minHeight	Number	No	Customize min height for list container
fontFamily	String	No	Customize font style
iconStyle	ImageStyle	No	Styling for icon
iconColor	String	No	Color of icons
itemContainerStyle	TextStyle	No	Styling for item container in list
itemTextStyle	TextStyle	No	Styling for text item in list
activeColor	String	No	Background color for item selected in list container
search	Boolean	No	Show or hide input search
searchQuery	(keyword: string, labelValue: string) => Boolean	No	Callback used to filter the list of items
inputSearchStyle	ViewStyle	No	Styling for input search
searchPlaceholder	String	No	The string that will be rendered before text input has been entered
renderInputSearch	(onSearch: (text:string) => void) => JSX.Element	No	Customize TextInput search
disable	Boolean	No	Specifies the disabled state of the Dropdown
dropdownPosition	'auto' or 'top' or 'bottom'	No	Dropdown list position. Default is 'auto'
autoScroll	Boolean	No	Auto scroll to index item selected, default is true
showsVerticalScrollIndicator	Boolean	No	When true, shows a vertical scroll indicator, default is true
renderLeftIcon	(visible?: boolean) => JSX.Element	No	Customize left icon for dropdown
renderRightIcon	(visible?: boolean) => JSX.Element	No	Customize right icon for dropdown
renderItem	(item: object, selected: Boolean) => JSX.Element	No	Takes an item from data and renders it into the list
flatListProps	FlatListProps	No	Customize FlatList element
inverted	Boolean	No	Reverses the direction of scroll on top position mode. Default is true
onFocus	() => void	No	Callback that is called when the dropdown is focused
onBlur	() => void	No	Callback that is called when the dropdown is blurred
keyboardAvoiding	Boolean	No	keyboardAvoiding default is true
backgroundColor	String	No	Set background color
confirmSelectItem	Boolean	No	Turn On confirm select item. Refer example/src/dropdown/example3
onConfirmSelectItem	(item: object) => void	No	Selection callback. Refer example/src/dropdown/example3
testID	String	No	Used to locate this view in end-to-end tests
itemTestIDField	String	No	Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]
accessibilityLabel	String	No	Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected
itemAccessibilityLabelField	String	No	Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]

MultiSelect Props

Props	Params	isRequire	Description
mode	'default' or 'modal' of 'auto'	No	Mode 'modal' is show the dropdown in the middle of the screen.
data	Array	Yes	Data is a plain array
labelField	String	Yes	Extract the label from the data item
valueField	String	Yes	Extract the primary key from the data item
searchField	String	Yes	Specify the field of data list you want to search
onChange	(value[]) => void	Yes	Selection callback. A array containing the "valueField".
onChangeText	(search: string) => void	Yes	Callback that is called when the text input's text changes
value	Item[]	No	Set default value. A array containing the "valueField".
placeholder	String	No	The string that will be rendered before dropdown has been selected
placeholderStyle	TextStyle	No	Styling for text placeholder
style	ViewStyle	No	Styling for view container
containerStyle	ViewStyle	No	Styling for list container
maxHeight	Number	No	Customize max height for list container
minHeight	Number	No	Customize min height for list container
maxSelect	Number	No	maximum number of items that can be selected
fontFamily	String	No	Customize font style
iconStyle	ImageStyle	No	Styling for icon
iconColor	String	No	Color of icons
activeColor	String	No	Background color for item selected in list container
itemContainerStyle	TextStyle	No	Styling for item container in list
itemTextStyle	TextStyle	No	Styling for text item in list
selectedStyle	ViewStyle	No	Styling for selected view
selectedTextStyle	TextStyle	No	Styling for selected text
renderSelectedItem	(item: object, unSelect?: () => void) => JSX.Element	No	Takes an item from data and renders it into the list selected
alwaysRenderSelectedItem	Boolean	No	Always show the list of selected items
visibleSelectedItem	Boolean	No	Option to hide selected item list, Ẽx: visibleSelectedItem={false}
search	Boolean	No	Show or hide input search
searchQuery	(keyword: string, labelValue: string) => Boolean	No	Callback used to filter the list of items
inputSearchStyle	ViewStyle	No	Styling for input search
searchPlaceholder	String	No	The string that will be rendered before text input has been entered
renderInputSearch	(onSearch: (text:string) => void) => JSX.Element	No	Customize TextInput search
disable	Boolean	No	Specifies the disabled state of the Dropdown
dropdownPosition	'auto' or 'top' or 'bottom'	No	Dropdown list position. Default is 'auto'
showsVerticalScrollIndicator	Boolean	No	When true, shows a vertical scroll indicator, default is true
renderLeftIcon	(visible?: boolean) => JSX.Element	No	Customize left icon for dropdown
renderRightIcon	(visible?: boolean) => JSX.Element	No	Customize right icon for dropdown
renderItem	(item: object, selected: Boolean) => JSX.Element	No	Takes an item from data and renders it into the list
flatListProps	FlatListProps	No	Customize FlatList element
inverted	Boolean	No	Reverses the direction of scroll on top position mode. Default is true
onFocus	() => void	No	Callback that is called when the dropdown is focused
onBlur	() => void	No	Callback that is called when the dropdown is blurred
keyboardAvoiding	Boolean	No	keyboardAvoiding default is true
inside	Boolean	No	inside default is false
backgroundColor	String	No	Set background color
confirmSelectItem	Boolean	No	Turn On confirm select item. Refer example/src/dropdown/example7
confirmUnSelectItem	Boolean	No	Turn On confirm un-select item. Refer example/src/dropdown/example7
onConfirmSelectItem	(item: any) => void	No	Selection callback. Refer example/src/dropdown/example7
testID	String	No	Used to locate this view in end-to-end tests
itemTestIDField	String	No	Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]
accessibilityLabel	String	No	Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected
itemAccessibilityLabelField	String	No	Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]

SelectCountry extends Dropdown

Props	Params	isRequire	Description
imageField	String	Yes	Extract the image from the data item
imageStyle	ImageStyle	No	Styling for image

Method

API	Params	Description
open	() => void	Open dropdown list
close	() => void	Close dropdown list

Dropdown example

  import React, { useState } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 [isFocus, setIsFocus] = useState(false);

    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
            Dropdown label
          </Text>
        );
      }
      return null;
    };

    return (
      <View style={styles.container}>
        {renderLabel()}
        <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' : '...'}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);
          }}
          renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color={isFocus ? 'blue' : 'black'}
              name="Safety"
              size={20}
            />
          )}
        />
      </View>
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      padding: 16,
    },
    dropdown: {
      height: 50,
      borderColor: 'gray',
      borderWidth: 0.5,
      borderRadius: 8,
      paddingHorizontal: 8,
    },
    icon: {
      marginRight: 5,
    },
    label: {
      position: 'absolute',
      backgroundColor: 'white',
      left: 22,
      top: 8,
      zIndex: 999,
      paddingHorizontal: 8,
      fontSize: 14,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

Dropdown example 1

  import React, { useState } from 'react';
  import { StyleSheet } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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);

    return (
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        search
        maxHeight={300}
        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} />
        )}
      />
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      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,
    },
  });

Dropdown example 2

  import React, { useState } from 'react';
  import { StyleSheet, View, Text } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 renderItem = item => {
      return (
        <View style={styles.item}>
          <Text style={styles.textItem}>{item.label}</Text>
          {item.value === value && (
            <AntDesign
              style={styles.icon}
              color="black"
              name="Safety"
              size={20}
            />
          )}
        </View>
      );
    };

    return (
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        search
        maxHeight={300}
        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} />
        )}
        renderItem={renderItem}
      />
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      height: 50,
      backgroundColor: 'white',
      borderRadius: 12,
      padding: 12,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.2,
      shadowRadius: 1.41,

      elevation: 2,
    },
    icon: {
      marginRight: 5,
    },
    item: {
      padding: 17,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    textItem: {
      flex: 1,
      fontSize: 16,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

MultiSelect example 1

  import React, { useState } from 'react';
  import { StyleSheet, View } from 'react-native';
  import { MultiSelect } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 MultiSelectComponent = () => {
    const [selected, setSelected] = useState([]);

    return (
      <View style={styles.container}>
        <MultiSelect
          style={styles.dropdown}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          search
          data={data}
          labelField="label"
          valueField="value"
          placeholder="Select item"
          searchPlaceholder="Search..."
          value={selected}
          onChange={item => {
            setSelected(item);
          }}
          renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color="black"
              name="Safety"
              size={20}
            />
          )}
          selectedStyle={styles.selectedStyle}
        />
      </View>
    );
  };

  export default MultiSelectComponent;

  const styles = StyleSheet.create({
    container: { padding: 16 },
    dropdown: {
      height: 50,
      backgroundColor: 'transparent',
      borderBottomColor: 'gray',
      borderBottomWidth: 0.5,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 14,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
    icon: {
      marginRight: 5,
    },
    selectedStyle: {
      borderRadius: 12,
    },
  });

MultiSelect example 2

  import React, { useState } from 'react';
  import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
  import { MultiSelect } from 'react-native-element-dropdown';
  import AntDesign from '@expo/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 MultiSelectComponent = () => {
    const [selected, setSelected] = useState([]);

    const renderItem = item => {
      return (
        <View style={styles.item}>
          <Text style={styles.selectedTextStyle}>{item.label}</Text>
          <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
        </View>
      );
    };

    return (
      <View style={styles.container}>
        <MultiSelect
          style={styles.dropdown}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data}
          labelField="label"
          valueField="value"
          placeholder="Select item"
          value={selected}
          search
          searchPlaceholder="Search..."
          onChange={item => {
            setSelected(item);
          }}
          renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color="black"
              name="Safety"
              size={20}
            />
          )}
          renderItem={renderItem}
          renderSelectedItem={(item, unSelect) => (
            <TouchableOpacity onPress={() => unSelect && unSelect(item)}>
              <View style={styles.selectedStyle}>
                <Text style={styles.textSelectedStyle}>{item.label}</Text>
                <AntDesign color="black" name="delete" size={17} />
              </View>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  };

  export default MultiSelectComponent;

  const styles = StyleSheet.create({
    container: { padding: 16 },
    dropdown: {
      height: 50,
      backgroundColor: 'white',
      borderRadius: 12,
      padding: 12,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.2,
      shadowRadius: 1.41,

      elevation: 2,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 14,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
    icon: {
      marginRight: 5,
    },
    item: {
      padding: 17,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    selectedStyle: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 14,
      backgroundColor: 'white',
      shadowColor: '#000',
      marginTop: 8,
      marginRight: 12,
      paddingHorizontal: 12,
      paddingVertical: 8,
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.2,
      shadowRadius: 1.41,

      elevation: 2,
    },
    textSelectedStyle: {
      marginRight: 5,
      fontSize: 16,
    },
  });

SelectCountry example 1

  import React, { useState } from 'react';
  import { StyleSheet } from 'react-native';
  import { SelectCountry } from 'react-native-element-dropdown';

  const local_data = [
    {
      value: '1',
      lable: 'Country 1',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '2',
      lable: 'Country 2',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '3',
      lable: 'Country 3',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '4',
      lable: 'Country 4',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '5',
      lable: 'Country 5',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
  ];

  const SelectCountryScreen = _props => {
    const [country, setCountry] = useState('1');

    return (
      <SelectCountry
        style={styles.dropdown}
        selectedTextStyle={styles.selectedTextStyle}
        placeholderStyle={styles.placeholderStyle}
        imageStyle={styles.imageStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        search
        maxHeight={200}
        value={country}
        data={local_data}
        valueField="value"
        labelField="lable"
        imageField="image"
        placeholder="Select country"
        searchPlaceholder="Search..."
        onChange={e => {
          setCountry(e.value);
        }}
      />
    );
  };

  export default SelectCountryScreen;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      height: 50,
      borderBottomColor: 'gray',
      borderBottomWidth: 0.5,
    },
    imageStyle: {
      width: 24,
      height: 24,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
      marginLeft: 8,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

SelectCountry example 2

  import React, { useState } from 'react';
  import { StyleSheet } from 'react-native';
  import { SelectCountry } from 'react-native-element-dropdown';

  const local_data = [
    {
      value: '1',
      lable: 'Country 1',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '2',
      lable: 'Country 2',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '3',
      lable: 'Country 3',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '4',
      lable: 'Country 4',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
    {
      value: '5',
      lable: 'Country 5',
      image: {
        uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
      },
    },
  ];

  const SelectCountryScreen = _props => {
    const [country, setCountry] = useState('1');

    return (
      <SelectCountry
        style={styles.dropdown}
        selectedTextStyle={styles.selectedTextStyle}
        placeholderStyle={styles.placeholderStyle}
        imageStyle={styles.imageStyle}
        iconStyle={styles.iconStyle}
        maxHeight={200}
        value={country}
        data={local_data}
        valueField="value"
        labelField="lable"
        imageField="image"
        placeholder="Select country"
        searchPlaceholder="Search..."
        onChange={e => {
          setCountry(e.value);
        }}
      />
    );
  };

  export default SelectCountryScreen;

  const styles = StyleSheet.create({
    dropdown: {
      margin: 16,
      height: 50,
      width: 150,
      backgroundColor: '#EEEEEE',
      borderRadius: 22,
      paddingHorizontal: 8,
    },
    imageStyle: {
      width: 24,
      height: 24,
      borderRadius: 12,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
      marginLeft: 8,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
  });

react-native-element-dropdown's Issues

Opening dropdown with button

Hi @hoaphantn7604,

How can I open the Dropdown list using TouchableOpacity outside Dropdown component? Thank you

Remove Space on FlatList when there are a small size of elements

So I have three elements in my Dropdown, but it has way too much space.

Dropdown doesn't move when keyboard is open

Here is search bar:

When you click on input, it opens dropdown with new input:

When you click on "Search", modal moves, but dropdown doesn't:

)

Here is the code:

How to reset dropdown

Pull to refresh items

Hi @hoaphantn7604, Is it possible to implement pull to refresh or refreshControl in the dropdown items? Thank you

[Android] Android app is crashing while opening modal

IOS app is working fine but android is crashing.

[Request] Recalculate dropdown position If using KeyboardAvoidingView

Hi hoaphantn7604,

First of all - gread job with react-native-elemen-dropdown. I like the flexibility of the component and how it behaves.

I would like to ask you for small improvement. In my case I'm using the dropdown with custom search input in Modal with KeyboardAvoidingVIew. The problem is when the keyboard is opened, the KeyboardAvoidingView is changing the layout and the position of the dropdown is not updated.

Thanks in advance!

Best Regards,
Ivan

Label custom design

Hi, Is it possible to change the design or layout of the label or result portion?

I already done i with list items. I want to style the result with the same design with the item list.

Is It possible?

I found renderLeftIcon but I can't put selected image uri for it.

renderLeftIcon={() => (
                <>
                    <Text>Image left</Text>
                </>
)}

Here's my sample data array

const data = [
    {
        value: '1',
        label: 'Samantha Calls',
        phone: '0932131',
        image: {
            uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
        },
    },
    {
        value: '2',
        label: 'David Salon',
        phone: '0932131',
        image: {
            uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
        },
    },
[

Hoping for your response. Thank you

Dropdown props -> valueField not working

Hi, I was trying to use valueField props for control dynamically my dropdown components. I have this Array<Tax> objects at below.

I used value and label field like below

Label field is working smoothly but valueField not. I suppose when I write valueField='value' Dropdown itself onChange method (_value)=> parameters should come with my <Tax> object key name which is value but when I tried this way I faced (_value)=> parameters came with entirely <Tax> object

Is there any problem on your code or am I doing something wrong ? Thank you :)

prop to onSearch

would it be possible to add a prop for the function that filters the list (function onSearch in Dropdown component)?

Dropdown placed too far down

Anyone having this issue? I can "fix" this by giving containerStyle={{marginTop: -60}}. I'm not sure why it happens.

Add more functionality

it's not a bug but I am using your package in my project u all did a great job just need to add onfocus(),onBlur(), methods so if user click on to dropdown then border color change

Search input text style

How to change font size and colour for search input text?

Text props

can you add feature to add props to text for the dropdown? it will be good for adding props like numberOfLines and ellipsizeMode

<Text style={[styles.textItem, placeholderStyle, font()]} {...this.props.selectedTextProps}>
{currentValue && currentValue[labelField] || placeholder}

Require cycle: node_modules/react-native-element-dropdown/index.ts -> node_modules/react-native-element-dropdown/src/SelectCountry/index.tsx -> node_modules/react-native-element-dropdown/index.ts

Require cycle: node_modules/react-native-element-dropdown/index.ts -> node_modules/react-native-element-dropdown/src/SelectCountry/index.tsx -> node_modules/react-native-element-dropdown/index.ts

node_modules/react-native-element-dropdown/src/SelectCountry/index.tsx
这个文件下的这句要注释掉,不然会导致循环引用
@hoaphantn7604
//import { Dropdown } from '../../index';

Error while opening the dropdown

Sometimes dropdown crashes with the below errors
Invariant Violation: [1297,"RCTView",1,{"height":"<<NaN>>"}] is not usable as a native method argument
Invariant Violation: [1295,"RCTView",1,{"height":"<<NaN>>","justifyContent":"flex-end"}] is not usable as a native method argument

OnonEndReached and onEndReachedThreshold

OnonEndReached and onEndReachedThreshold not working eitheir in Dropdown component or flatlistprops

Add custom button below search input

Hi @hoaphantn7604,

Is it possible that I can add button below search input field?

Below is the sample web design and I want it in react-native also. I want to add "add new customer button".

Hoping for your response. Thank you

Should down arrow flip

Should that down arrow in right flip when dropdown is opened?

Dark mode

Hello friend,
Firstly thank you for this repo.
I realized that we can't change styles of dropdown select item menu. See the image below. If there is a way doing this, can you explain to me

min height

How i can set min Height? because i have a list with 2 items and dropdown list is big

state value gets updated automatically (MultiSelect)

Hey @hoaphantn7604 ,

State value gets updated without using any setState function in onChange ,
If I only print the stateValue in onChange function, It prints the updated value.

Here is expo (check logs) : https://snack.expo.dev/@ak_expo/react-native-element-dropdown

Changing righthand icon to show state of dropdown

How do I know state of dropdown box open vs closed in order to set right hand icon.

I could track via onblur and onfocus but there may be better and safer way

Failure in build.gradle

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.

• Where:
  Build file 'F:\Test\node_modules\react-native-element-dropdown\android\build.gradle' line: 25

• What went wrong:
  A problem occurred evaluating project ':react-native-element-dropdown'.

Plugin with id 'maven' not found.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
  ==============================================================================

2: Task failed with an exception.

• What went wrong:
  A problem occurred configuring project ':react-native-element-dropdown'.

com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle

Errors in components

Issue: When I am running code inspection there are several issues reported:

Errors:

node_modules/react-native-element-dropdown/src/Dropdown/index.tsx:363:7 - error TS2531: Object is possibly 'null'.

363 ref.current.measure((width, height, px, py, fx, fy) => {
~~~~~~~~~~~

node_modules/react-native-element-dropdown/src/MultiSelect/index.tsx:348:7 - error TS2531: Object is possibly 'null'.

348 ref.current.measure((width, height, px, py, fx, fy) => {
~~~~~~~~~~~

node_modules/react-native-element-dropdown/src/useDeviceOrientation.ts:41:24 - error TS2339: Property 'remove' does not exist on type 'never'.

41 if(susbcription?.remove){
~~~~~~

node_modules/react-native-element-dropdown/src/useDeviceOrientation.ts:42:22 - error TS2339: Property 'remove' does not exist on type 'never'.

42 susbcription.remove();
~~~~~~

Found 4 errors.

Customizable LabelField

It would be a privilege to have ability of customizing Label Field data and it wouldn't be only one filed to display
for example: I like to show the selected item like this,
"John Smith, 25, California"
{fullName, age, state}

Invariant Violation: scrollToIndex out of range: requested index 101 is out of 0 to 36

I am using a dropdown for the country data and it contains more than 150 data, without search, it is working fine but with search it is throwing error of " Invariant Violation: scrollToIndex out of range: requested index 101 is
out of 0 to 36 "

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

return (

<Text style={[styles.regularText, styles.f15]} numberOfLines={1}>
Country/Region

<Dropdown
style={[styles.dropdown, styles.lightText]}
data={allCountries}
labelField="label"
valueField="label"
placeholder="Select Country"
value={country}
onChange={(item) => {
setcountry(item.label);
}}
renderItem={_renderItem}
selectedTextStyle={[styles.selectedText, styles.mediumText]}
placeholderStyle={[styles.selectedText, styles.mediumText]}
maxHeight={300}
search
autoScroll={true}
searchPlaceholder="Search..."
inputSearchStyle={{ height: 40, fontSize: 13, }}
iconColor={colors.primary}
/>

      {/* <Text style={[styles.regularText, styles.errorTextStyle]}>Error message</Text> */}
    </View>

)

onChange

In code examples for Multi-Select it is implied that onChanges passes an array of objects (based on item.value).

In my case it appears that onChange is supply object key denoted by valueField.

onChange={item => {
   setValue(item.value);
}}

In typescript world (as example)

assuming data array is of type IndexedValue[]
where

interface IndexedValue {
  index: number,
  value: string
}

then in my case I see onChange returning a string list and not IndexedValue list.

Can you please confirm correct operation.

Open And Close Dropdown Programatically

How to close or open dropdown from another event ?

Dropdown data doesn't update when open

Hey @hoaphantn7604, first of all thanks for this great library.

There is just one issue I'm facing is, Dropdown data doesn't get updated when dropdown is open (and data is empty),
and when dropdown data gets updated (for e.g null to [...]) I have to close dropdown and open it to display data.

[SelectCountry] Allow incoming renderItem and renderLeftIcon to override pre-set props

Hi @hoaphantn7604 , good work on the dropdown!

I have a suggestion to let user to override renderItem and renderLeftIcon instead of using the default (current) component, this will let user to adjust the design of the component according to their needs.

This is what the SelectCountry do currently:

return (
    <Dropdown
      ref={ref}
      {...props}
      renderItem={_renderItem}
      renderLeftIcon={() => {
        if (selectItem?.image) {
          return <Image source={selectItem.image} style={[styles.image, imageStyle]} />;
        } else {
          return null;
        }
      }}
    />
  );

I'll connect this with the PR I made

TypeError: null is not an object (evaluating 'ElementDropdown.getConstants')

Hi, I am having this problem when I want to use it in my project

const {
    selectOptions,
    inputContainerStyle,
    mainContainerStyle,
    inputFont,
    label,
    placeholder,
    placeholderStyle,
    error,
    dropdownValue,
    withSearchBar,
    searchBarPlaceholder,
    listContainerStyle,
    supportText,
    inputSearchStyle,
    onSelect,
  } = props

  return (
    <View style={[styles.dropdownContainer, mainContainerStyle]}>
        <Dropdown
          style={[styles.dropdown, inputContainerStyle]}
          fontFamily={inputFont ? inputFont : 'Rubik-Regular'}
          containerStyle={listContainerStyle}
          data={selectOptions}
          labelField='value'
          valueField='id'
          placeholder={placeholder}
          placeholderStyle={placeholderStyle}
          value={dropdownValue}
          onChange={onSelect}
          search={withSearchBar}
          searchPlaceholder={searchBarPlaceholder}
          inputSearchStyle={[styles.inputSearchStyle, inputSearchStyle]}
          iconColor={color.Neutral5}
          maxHeight={200}
        />
    </View>

It was running fine, but when I ran the app again, the error occurred.

When Searching Cannot read property 'indexOf' of undefined

I have used Dropdown. When using search input box the error of Cannot read property 'indexOf' of undefined arises.

EventEmitter.removeListener('change', ...)

EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
DropdownComponent@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.nmmc&modulesOnly=false&runModule=true:220050:106

Getting above warning when I leave screen with dropdown

Multiselect, selected item location

Any suggestions on how to place list of selected items in (on) the "select item" line where placeholder text is located (as with dropdown) instead of displaying them below?

implement default value at dropdown

when API provide data for initial value , how to implement initial value from API to component dropdown.
im already try using props value , but still nothing , initial value not render autofill at UI dropdown

Customize the modal style and create custom renderItem callback

Is that possible?

1: I want round borders on the modal, is there a way to achieve that?
2: Can I do a custom renderItem callback ?

Distribute commonJS Build

Because the source is distributed with TS, type checking in CI will check every usage of the library and unfortunately cannot be ignored with normal tsconfigs

An example on how to distribute to commonJS https://github.com/callstack/react-native-builder-bob

[Request] More customizable props

Thanks for this great library, it helped me a lot when I am trying to implement a screen.
But it could be more convenient if we can add more customizable props. At this moment I want to style the search box inside the Dropdown ( placeholder & input style, custom search & close icon... ).
Hope to hear from you soon.

Cannot read property 'getConstants' of undefined

Code

:

Disable option

The module works really good. Only thing I did not find is to disable the options in the dropdown menu or simply disable the menu? Is there a way I can do it with this module?

Nested object value

Hi @hoaphantn7604,

How can I get the value from nested object?

Here's my data it has name under metadata object

Is it possible that I can get it and put it in labelField="metadata.name"?

Regards,
Paul

Issue in Android

Hi I'm having this issues in Android. Please help!

FlatListProps

Hi @hoaphantn7604, I'm not sure if I implemented the flatListProps correctly seems I can't receive the alert even if I change it to console.log. Please see below screenshot

Scrolling issue

When I scroll down and select the dropdown, it also goes down with scroll. Here is the screenshot:

Please note it happens on selecting model(the first dropdown input)
If I don't scroll down it works fine

How to set an auto height for the container list ?

I'm not able to make the height of the container list fit its content?

Deprecated Gradle features warning

> Configure project :react-native-element-dropdown
The maven plugin has been deprecated. This is scheduled to be removed in Gradle 7.0. Please use the maven-publish plugin instead. Consult the upgrading guide for further information: https://docs.gradle.org/6.7/userguide/upgrading_version_5.html#legacy_publication_system_is_deprecated_and_replaced_with_the_publish_plugins
        at build_2e0acd0yfrk2v07824j09izoq.run(/home/minhna/WORKS/Ours/AKTV/apps/pumpkin/node_modules/react-native-element-dropdown/android/build.gradle:25)
        (Run with --stacktrace to get the full stack trace of this deprecation warning.)

I'm using version 1.2.6 with react-native 0.65.1

Please check this scroll issue

Whenever I will scroll to the list at first its works fine but a the second time it threw an error

Dropdown design issue

Hi Team,

       I have found a small UI design issue in your plugin. The issue is in Dropdown. Please replace the view tag with fragment tag for _renderListTop() and _renderListBottom() in src ---> Dropdown ---> index.tsx and remove flex:1 in container from styles.ts. After doing this, the dropdown height is auto set to its items height.

Screenshots for reference:-

[Bug] value: 0 leads to placeholder in Dropdown

If the data array contains first item with a value of 0, selecting that first dropdown item would render the placeholder instead of the first item.

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


const DropdownMenu = props => {
    const [selectedTab, setSelectedTab] = useState(null)

    const tabs = [{label: 'first', value: 0}, {label: 'second', value: 1}, {label: 'third', value: 2}]

    const renderItem = (item) => {

        return(
            <View style={styles.item}>
                <Text style={styles.textItem}>
                    {item.label}
                </Text>
            </View>
        )
    }

    return (
        <Dropdown 
            style={styles.dropdown}
            placeholderStyle={styles.textItem}
            selectedTextStyle={styles.textItem}
            data={tabs}
            search={true}
            labelField='label' 
            valueField='value' 
            placeholder='Select Group'
            searchPlaceholder='Search...'
            value={selectedTab}
            onChange={ item => {
                setSelectedTab(item.value)
                props.selectedCallback(item.value) // callback for changing Tab page
            }} 
            renderItem={renderItem}
        />
    )
}

export default BleDropdown

const styles = StyleSheet.create({
    dropdown: {
        height: 25,
        width: 125,
        margin: 10,
        backgroundColor: 'white',
        borderRadius: 10,
        padding: 10,
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,
        elevation: 2,
    },
    item: {
        padding: 10,
        alignItems: 'center',
    },
    textItem: {
        flex: 1,
        fontSize: 12,
        textAlign: 'center'
    },
})