hoaphantn7604 / react-native-element-dropdown Goto Github PK
View Code? Open in Web Editor NEWA react-native dropdown component easy to customize for both iOS and Android.
License: MIT License
A react-native dropdown component easy to customize for both iOS and Android.
License: MIT License
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?
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}
How i can set min Height? because i have a list with 2 items and dropdown list is big
I have used Dropdown. When using search input box the error of Cannot read property 'indexOf' of undefined arises.
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}
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.
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
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'
},
})
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
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
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
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 :)
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 ?
How to change font size and colour for search input text?
would it be possible to add a prop for the function that filters the list (function onSearch in Dropdown component)?
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?
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
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>
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.
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
> 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
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';
I'm not able to make the height of the container list fit its content?
How to close or open dropdown from another event ?
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.
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
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.
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
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.
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
OnonEndReached and onEndReachedThreshold not working eitheir in Dropdown component or flatlistprops
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
Hi @hoaphantn7604, Is it possible to implement pull to refresh or refreshControl in the dropdown items? Thank you
FAILURE: Build completed with 2 failures.
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.
com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle
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.
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
Hi @hoaphantn7604,
How can I open the Dropdown list using TouchableOpacity outside Dropdown component? Thank you
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
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
Should that down arrow in right flip when dropdown is opened?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.