Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-dropdown-select-list
Advanced tools
Readme
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,083 weekly downloads. As such, react-native-dropdown-select-list popularity was classified as popular.
We found that react-native-dropdown-select-list demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.