
Security News
pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
react-native-dropdown-select-list
Advanced tools
⭐ React Native Select List Equivalent to Html's Select with options"
React Native Select List Equivalent to Html's Select "
Multiple Select List | Select List |
---|---|
![]() | ![]() |
iOS | Android | Web | Expo |
---|---|---|---|
✅ | ✅ | ✅ | ✅ |
$ npm install react-native-dropdown-select-list
OR
$ yarn add react-native-dropdown-select-list
import { SelectList } from 'react-native-dropdown-select-list'
const App = () => {
const [selected, setSelected] = React.useState("");
const data = [
{key:'1', value:'Mobiles', disabled:true},
{key:'2', value:'Appliances'},
{key:'3', value:'Cameras'},
{key:'4', value:'Computers', disabled:true},
{key:'5', value:'Vegetables'},
{key:'6', value:'Diary Products'},
{key:'7', value:'Drinks'},
]
return(
<SelectList
setSelected={(val) => setSelected(val)}
data={data}
save="value"
/>
)
};
import { MultipleSelectList } from 'react-native-dropdown-select-list'
const App = () => {
const [selected, setSelected] = React.useState([]);
const data = [
{key:'1', value:'Mobiles', disabled:true},
{key:'2', value:'Appliances'},
{key:'3', value:'Cameras'},
{key:'4', value:'Computers', disabled:true},
{key:'5', value:'Vegetables'},
{key:'6', value:'Diary Products'},
{key:'7', value:'Drinks'},
]
return(
<MultipleSelectList
setSelected={(val) => setSelected(val)}
data={data}
save="value"
onSelect={() => alert(selected)}
label="Categories"
/>
)
};
For Live Demo
(Expo Snack)
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 |
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 |
import { SelectList } from 'react-native-dropdown-select-list'
const App = () => {
const [selected, setSelected] = React.useState("");
const data = [
{key:'1',value:'Jammu & Kashmir'},
{key:'2',value:'Gujrat'},
{key:'3',value:'Maharashtra'},
{key:'4',value:'Goa'},
];
return(
<SelectList
onSelect={() => alert(selected)}
setSelected={setSelected}
fontFamily='lato'
data={data}
arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />}
searchicon={<FontAwesome name="search" size={12} color={'black'} />}
search={false}
boxStyles={{borderRadius:0}} //override default styles
defaultOption={{ key:'1', value:'Jammu & Kashmir' }} //default selected option
/>
)
};
import { SelectList } from 'react-native-dropdown-select-list'
const App = () => {
const [selected, setSelected] = React.useState("");
const [data,setData] = React.useState([]);
React.useEffect(() =>
//Get Values from database
axios.get('https://jsonplaceholder.typicode.com/users')
.then((response) => {
// Store Values in Temporary Array
let newArray = response.data.map((item) => {
return {key: item.id, value: item.name}
})
//Set Data Variable
setData(newArray)
})
.catch((e) => {
console.log(e)
})
,[])
return(
<SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} />
)
};
Applicable on MultipleSelectList Only
Name | Type | Description |
---|---|---|
label | string | Pass any string to be placed instead of default label |
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 |
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)
FAQs
⭐ React Native Select List Equivalent to Html's Select with options"
The npm package react-native-dropdown-select-list receives a total of 6,997 weekly downloads. As such, react-native-dropdown-select-list popularity was classified as popular.
We found that react-native-dropdown-select-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.