Gathering detailed insights and metrics for @nguyenviet3057/react-native-dropdown-select-list-for-bottomsheet
Gathering detailed insights and metrics for @nguyenviet3057/react-native-dropdown-select-list-for-bottomsheet
☝️ React Native Select List Equivalent to Html's Select with options"
2.0.3-custom.1
238
MIT
TypeScript
47.12 kB
Installations
npm install @nguyenviet3057/react-native-dropdown-select-list-for-bottomsheetDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.17.0
NPM Version
11.3.0
Releases
4
Languages
1
TypeScript
TypeScript (100%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
238 Stars
94 Commits
116 Forks
6 Watchers
1 Branches
4 Contributors
Updated on Jul 07, 2025
Maintainers
1
Package Meta Information
Latest Version
2.0.3-custom.1
Package Id
@nguyenviet3057/react-native-dropdown-select-list-for-bottomsheet@2.0.3-custom.1
Unpacked Size
47.12 kB
Size
9.61 kB
File Count
11
NPM Version
11.3.0
Node Version
20.17.0
Published on
May 03, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
5
 |  |  |  |  |
⭐ React Native Dropdown Select List
React Native Select List Equivalent to Html's Select "
| Multiple Select List | Select List |
|---|---|
 |  |
Light weight and Easy to use dropdown select list.
- Style it your way with style props of every view.
- Smooth performance on all platforms IOS, Android and Web.
- Change Font Family Easily which community picker lacks.
- Zero dependencies
Compatibility
| iOS | Android | Web | Expo |
|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ |
🔌 Installation
1$ npm install react-native-dropdown-select-list 2
OR
1$ yarn add react-native-dropdown-select-list
😎 Basic Usage for SelectList
1import { SelectList } from 'react-native-dropdown-select-list' 2 3const App = () => { 4 5 const [selected, setSelected] = React.useState(""); 6 7 const data = [ 8 {key:'1', value:'Mobiles', disabled:true}, 9 {key:'2', value:'Appliances'}, 10 {key:'3', value:'Cameras'}, 11 {key:'4', value:'Computers', disabled:true}, 12 {key:'5', value:'Vegetables'}, 13 {key:'6', value:'Diary Products'}, 14 {key:'7', value:'Drinks'}, 15 ] 16 17 return( 18 <SelectList 19 setSelected={(val) => setSelected(val)} 20 data={data} 21 save="value" 22 /> 23 ) 24 25};
😎 Basic Usage for MultipleSelectList
1import { MultipleSelectList } from 'react-native-dropdown-select-list' 2 3const App = () => { 4 5 const [selected, setSelected] = React.useState([]); 6 7 const data = [ 8 {key:'1', value:'Mobiles', disabled:true}, 9 {key:'2', value:'Appliances'}, 10 {key:'3', value:'Cameras'}, 11 {key:'4', value:'Computers', disabled:true}, 12 {key:'5', value:'Vegetables'}, 13 {key:'6', value:'Diary Products'}, 14 {key:'7', value:'Drinks'}, 15 ] 16 17 return( 18 <MultipleSelectList 19 setSelected={(val) => setSelected(val)} 20 data={data} 21 save="value" 22 onSelect={() => alert(selected)} 23 label="Categories" 24 /> 25 ) 26 27};
For Live Demo (Expo Snack)
🔧 General Props
Applicable on both SelectList & MultipleSelectList Components
| Name | Type | Description |
|---|---|---|
| save | string | Pass ('key' or 'value') to save data of your choice in your local state variable |
| onSelect | Function | Pass any function that you want to trigger immediately after a value is selected |
| placeholder | String | Placeholder text that will be displayed in the select box |
| search | boolean | set to false if you dont want to use search functionality |
| maxHeight | Number | Maximum height of the dropdown wrapper to occupy |
| data | array or array[object] | Data which will be iterated as options of select list |
| setSelected | Function | For Setting the option value which will be stored in your local state |
| searchicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon |
| arrowicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon |
| closeicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon |
| searchPlaceholder | String | Custom placeholder text for search TextInput |
| defaultOption | Object | Pass default selected option in key value pair |
| fontFamily | string | Pass font name to apply globally on each text field of component |
| notFoundText | string | Pass your custom message if any search result returns empty |
| dropdownShown | boolean | Control your dropdown ( on & off ) state by changing its value to true or false |
🔧 General Style Props
Applicable on both SelectList & MultipleSelectList Components
| Name | Type | Description |
|---|---|---|
| boxStyles | Object | Additional styles for select box parent wrapper |
| inputStyles | Object | Additional styles for text of selection box |
| dropdownStyles | Object | Additional styles for dropdown scrollview |
| dropdownItemStyles | Object | Additional styles for dropdown single list item |
| dropdownTextStyles | Object | Additional styles for dropdown list items text |
| disabledItemStyles | Object | Additional styles for disabled dropdown list item |
| disabledTextStyles | Object | Additional styles for disabled dropdown list items text |
😎 Advanced Usage
1import { SelectList } from 'react-native-dropdown-select-list' 2 3const App = () => { 4 5 const [selected, setSelected] = React.useState(""); 6 7 const data = [ 8 {key:'1',value:'Jammu & Kashmir'}, 9 {key:'2',value:'Gujrat'}, 10 {key:'3',value:'Maharashtra'}, 11 {key:'4',value:'Goa'}, 12 ]; 13 14 return( 15 <SelectList 16 onSelect={() => alert(selected)} 17 setSelected={setSelected} 18 fontFamily='lato' 19 data={data} 20 arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />} 21 searchicon={<FontAwesome name="search" size={12} color={'black'} />} 22 search={false} 23 boxStyles={{borderRadius:0}} //override default styles 24 defaultOption={{ key:'1', value:'Jammu & Kashmir' }} //default selected option 25 /> 26 ) 27 28};
😎 Getting Options From Database
1import { SelectList } from 'react-native-dropdown-select-list' 2 3const App = () => { 4 5 const [selected, setSelected] = React.useState(""); 6 const [data,setData] = React.useState([]); 7 8 React.useEffect(() => 9 //Get Values from database 10 axios.get('https://jsonplaceholder.typicode.com/users') 11 .then((response) => { 12 // Store Values in Temporary Array 13 let newArray = response.data.map((item) => { 14 return {key: item.id, value: item.name} 15 }) 16 //Set Data Variable 17 setData(newArray) 18 }) 19 .catch((e) => { 20 console.log(e) 21 }) 22 ,[]) 23 24 return( 25 <SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} /> 26 ) 27 28};
🔧 Additional Props
Applicable on MultipleSelectList Only
| Name | Type | Description |
|---|---|---|
| label | string | Pass any string to be placed instead of default label |
🔧 Additional Style Props
Applicable on MultipleSelectList Only
| Name | Type | Description |
|---|---|---|
| disabledCheckBoxStyles | Object | Additional styles disabled checkbox inside dropdown |
| checkBoxStyles | Object | Additional styles for active checkbox |
| badgeStyles | Object | Additional styles for badges of selected values |
| badgeTextStyles | Object | Additional styles for Text of badges of selected values |
| labelStyles | Object | Additional styles for label of multiple select list |
▶️ Watch Video
💲 Would you like to support me?
If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.
For Live Demo (Expo Snack)
No vulnerabilities found.
No security vulnerabilities found.