
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
@pncodebreaker/react-native-dropdown-select-list
Advanced tools
Fork of react-native-dropdown-select-list, React Native Select List Equivalent to Html's Select with options"
i. Fixed Default option in MultiSelect.
ii. Added checkicon option as props ( checkicon props ) to change default color or image.
iii. Added props ( labelHeadingColor ) to change default color of text selected.
iv. Added showSelected prop ( showSelected = false ) will not show the selected bubbles on the selection dropdown. This fixes the
visibility of select option data as it was shrinking when selecting a large number of data.
v. Now Added the function to also Add custom input if that data is not present in the list Using customUserInput prop (
boolean ) for both SingleSelect & MultiSelect Dropdown.
use defaultOption={[]} in MultiSelect as array of selected value instead of key value pair ( Object ).
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 |
checkicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of checkicon |
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 |
showSelected | boolean | show selected items on the item selection dropdown or not, fixes the visibility bug when selecting large number of data. |
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 |
labelHeadingColor | TextStyle | Change Color of default Label Heading Text Selected |
FAQs
Fork of react-native-dropdown-select-list, React Native Select List Equivalent to Html's Select with options"
The npm package @pncodebreaker/react-native-dropdown-select-list receives a total of 0 weekly downloads. As such, @pncodebreaker/react-native-dropdown-select-list popularity was classified as not popular.
We found that @pncodebreaker/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
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.