TypeError: Cannot read property 'Dropdown' of undefined

[mjaggard]

I get the error TypeError: Cannot read property 'Dropdown' of undefined when I attempt to use Dropdown for a single selection drop down exactly as described in the docs (I copied and pasted with the exception of adding a type parameter for useState, changing the name of the component and removing AntDesign because I don't use that)

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

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 TestDropdown = () => {
  const [value, setValue] = useState<string | null>(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={() => <Text>Blah</Text>}
      />
    </View>
  );
};

export default TestDropdown;

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,
  },
});

[amarnyayapati]

We are also facing simlar issue Dropdown Component not found

And it same with MultiSelectComponent and SelectCountryComponent Looking for a fix

[LucasHimelfarb]

same here

[LucasHimelfarb]

you did find any solution @mjaggard ?

[mjaggard]

@LucasHimelfarb I gave up on using a dropdown and used a scrollable list instead.

[LucasHimelfarb]

@mjaggard check this library: https://github.com/MobileReality/react-native-select-pro

[kasunchamara]

I faced the same issue with version 2.12.2 and 2.12.1. After I downgraded to version 2.12.0 the issue seemed to be no longer created. @mjaggard @LucasHimelfarb @amarnyayapati