react-native-dropdown-select-list

⭐ React Native Select List Equivalent to Html's Select with options"

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-dropdown-select-list
1421.0.2121 days ago3 months agoMinified + gzip package size for react-native-dropdown-select-list in KB

Readme

🚩React Native Dropdown Select List
🟒 React Native Select List Equivalent to Html's Select with options --"

<img
src="https://i.imgur.com/JM9fFbH.gif"
title="List Demo"
>

React Native Dropdown Select List Demo.

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
```sh $ npm install react-native-dropdown-select-list ``` OR ```sh $ yarn add react-native-dropdown-select-list ```
😎 Usage
```jsx import SelectList from 'react-native-dropdown-select-list' const App = () => { const selected, setSelected = React.useState(""); const data = {key:'1',value:'Jammu & Kashmir'}; return(
<SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} />
) }; ``` For Live Demo (Expo Snack)
⭐ Props
| Name | Type | Description | | ---- | ---- | ----------- | | 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 | boxStyles| Object| Additional styles for select box | inputStyles| Object| Additional styles for text of select box | dropdownStyles| Object| Additional styles for dropdown scrollview | dropdownItemStyles| Object| Additional styles for dropdown list item | dropdownTextStyles| Object| Additional styles for list items text | maxHeight| Number | Maximum height of the dropdown wrapper to occupy | data| array or arrayobject| 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 | searchPlaceholder| String | Custom placeholder text for search TextInput | defaultOption| Object | Pass default selected option in key value pair
😎 Advanced Usage
```jsx 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} 
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
/>
) }; ```
😎 Getting Options From Database
```jsx 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)} />
) }; ```
▢️ Watch Video
Watch the 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.

Paypal

For Live Demo (Expo Snack)