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
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:: ''}]
closeModalWhenSelectedItem
Boolean
No
By default, closeModalWhenSelectedItem is set to true. When closeModalWhenSelectedItem is set to false, the Modal won't close when an item is selected.
excludeItems
Item[]
No
The array containing the items to be excluded.
excludeSearchItems
Item[]
No
The array containing the items to be excluded.
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
No
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
No
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
selectedTextProps
TextProps
No
Text Props for selected text. Ex: numberOfLines={1}
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}
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';
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
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
> 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.)
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.
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
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?
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.
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.
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
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.
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
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?
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.
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
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 :)
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.
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
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