
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
react-native-modal-picker-improved
Advanced tools
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
npm i react-native-modal-picker-improved --save
You can either use this component as an wrapper around your existing component or use it in its default mode. In default mode a customizable button is rendered.
See SampleApp
for an example how to use this component.
import ModalPicker from 'react-native-modal-picker-improved'
[..]
class SampleApp extends Component {
constructor() {
super();
this.state = {
textInputValue: ''
}
}
render() {
let index = 0;
const data = [
{ key: index++, section: true, label: 'Fruits' },
{ key: index++, label: 'Red Apples' },
{ key: index++, label: 'Cherries' },
{ key: index++, label: 'Cranberries' },
{ key: index++, label: 'Pink Grapefruit' },
{ key: index++, label: 'Raspberries' },
{ key: index++, section: true, label: 'Vegetables' },
{ key: index++, label: 'Beets' },
{ key: index++, label: 'Red Peppers' },
{ key: index++, label: 'Radishes' },
{ key: index++, label: 'Radicchio' },
{ key: index++, label: 'Red Onions' },
{ key: index++, label: 'Red Potatoes' },
{ key: index++, label: 'Rhubarb' },
{ key: index++, label: 'Tomatoes' }
];
return (
<View style={{flex:1, justifyContent:'space-around', padding:50}}>
<ModalPicker
data={data}
initValue="Select something yummy!"
onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} />
<ModalPicker
data={data}
initValue="Select something yummy!"
onChange={(option)=>{ this.setState({textInputValue:option.label})}}>
<TextInput
style={{borderWidth:1, borderColor:'#ccc', padding:10, height:30}}
editable={false}
placeholder="Select something yummy!"
value={this.state.textInputValue} />
</ModalPicker>
</View>
);
}
}
data - []
required, array of objects with a unique key and labelstyle - object
optional, style definitions for the root elementonChange - function
optional, callback function, when the users has selected an optioninitValue - string
optional, text that is initially shown on the buttoncancelText - string
optional, text of the cancel buttonselectStyle - object
optional, style definitions for the select element (available in default mode only!)selectTextStyle - object
optional, style definitions for the select element (available in default mode only!)overlayStyle - object
optional, style definitions for the overly/background elementsectionStyle - object
optional, style definitions for the section elementsectionTextStyle - object
optional, style definitions for the select text elementoptionStyle - object
optional, style definitions for the option elementoptionTextStyle - object
optional, style definitions for the option text elementcancelStyle - object
optional, style definitions for the cancel elementcancelTextStyle - object
optional, style definitions for the cancel text elementFAQs
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
We found that react-native-modal-picker-improved 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
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.