Gathering detailed insights and metrics for react-native-modal-multi-selector
A cross-platform (iOS / Android), selector/picker component for React Native that is filterable, highly customizable and supports sections.
Installations
npm install react-native-modal-multi-selectorDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.13.0
NPM Version
9.4.2
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (58.17%)
JavaScript (41.83%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
oguzgundogdu
Download Statistics
Total Downloads
434
Last Day
1
Last Week
3
Last Month
13
Last Year
170
GitHub Statistics
183 Commits
2 Watching
1 Branches
2 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.0-alpha.3
Package Id
react-native-modal-multi-selector@1.0.0-alpha.3
Unpacked Size
51.66 kB
Size
11.21 kB
File Count
9
NPM Version
9.4.2
Node Version
16.13.0
Publised On
18 Jun 2023
Total Downloads
Cumulative downloads
Total Downloads
434
Last day
0%
1
Compared to previous day
Last week
-50%
3
Compared to previous week
Last month
62.5%
13
Compared to previous month
Last year
-26.4%
170
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
react-native-modal-multi-selector 
A cross-platform (iOS / Android), selector/picker component for React Native that is filterable and multi supported, highly customizable and supports sections.
Multi selection functionality has been added to this fork repository
This project was forked from react-native-modal-selector-searchable
Demo
Install
1npm i react-native-modal-multi-selector --save
Usage
You can either use this component in its default mode, as a wrapper around your existing component or provide a custom component (where you need to control opening of the modal yourself). In default mode a customizable button is rendered.
See SampleApp for an example how to use this component.
1 2import ModalSelector from 'react-native-modal-multi-selector' 3 4class SampleApp extends Component { 5 6 constructor(props) { 7 super(props); 8 9 this.state = { 10 textInputValue: '' 11 } 12 } 13 14 render() { 15 let index = 0; 16 const data = [ 17 { key: index++, section: true, label: 'Fruits' }, 18 { key: index++, label: 'Red Apples' }, 19 { key: index++, label: 'Cherries' }, 20 { key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' }, 21 // etc... 22 // Can also add additional custom keys which are passed to the onChange callback 23 { key: index++, label: 'Vegetable', customKey: 'Not a fruit' } 24 ]; 25 26 return ( 27 <View style={{flex:1, justifyContent:'space-around', padding:50}}> 28 29 // Default mode 30 <ModalSelector 31 data={data} 32 initValue="Select something yummy!" 33 onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} /> 34 35 // Multi mode 36 <ModalSelector 37 data={data} 38 selectStyle={{borderColor: "black"}} 39 selectTextStyle={{color: "blue"}} 40 multi={true} 41 onChange={item => { console.log(item) }} 42 /> 43 44 // Wrapper 45 <ModalSelector 46 data={data} 47 initValue="Select something yummy!" 48 supportedOrientations={['landscape']} 49 accessible={true} 50 scrollViewAccessibilityLabel={'Scrollable options'} 51 cancelButtonAccessibilityLabel={'Cancel Button'} 52 onChange={(option)=>{ this.setState({textInputValue:option.label})}}> 53 54 <TextInput 55 style={{borderWidth:1, borderColor:'#ccc', padding:10, height:30}} 56 editable={false} 57 placeholder="Select something yummy!" 58 value={this.state.textInputValue} /> 59 60 </ModalSelector> 61 62 // Custom component 63 <ModalSelector 64 data={data} 65 ref={selector => { this.selector = selector; }} 66 customSelector={<Switch onValueChange={() => this.selector.open()} />} 67 /> 68 </View> 69 ); 70 } 71}
Data Format
The selector accepts a specific format of data:
1[{ key: 5, label: 'Red Apples' }]
Optionally provide a component key which overrides the default label text. Optionally provide a unique testID for each item:
1[{ 2 key: 5, 3 label: 'Red Apples', 4 // The next keys are optional -- 5 component: <View style={{backgroundColor: 'red'}}><Text style={{color: 'white'}}>Red Apples custom component ☺</Text></View>, 6 testID: '5-red-apples' 7}]
If your data has a specific format, you can define extractors of data, example:
1this.setState({data: [{ id: 5, name: 'Red Apples' }]}); 2 3return ( 4 <ModalSelector 5 data={this.state.data} 6 keyExtractor= {item => item.id} 7 labelExtractor= {item => item.name} 8 /> 9);
API
Props
| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
data | array | No | [] | array of objects with a unique key and label to select in the modal. Optional component overrides label text. Optional unique testID for each item. |
search | bool | Yes | true | Control the search box visibility |
hideSectionOnSearch | bool | Yes | false | Hide the caption of related matched items |
caseSensitiveSearch | bool | Yes | false | Sensitive mode on search |
frozenSearch | bool | Yes | false | Preserve initial modal size on search |
fullHeight | bool | Yes | false | Keep the modal size to the maximum regardless of the listed items |
onSearchFilterer | function | Yes | (searchText, data) => filteredData | Custom search filterer function. |
onChange | function | Yes | () => {} | callback function, when the users has selected an option |
onChangeSearch | function | Yes | (searchData) => {} | Callback function, when the users has typed in search box |
onModalOpen | function | Yes | () => {} | callback function, when modal is opening |
onModalClose | function | Yes | (item) => {} | callback function, when modal is closing. Returns the selected item. |
onCancel | function | Yes | () => {} | callback function, when clicking the cancel button |
keyExtractor | function | Yes | (data) => data.key | extract the key from the data item |
labelExtractor | function | Yes | (data) => data.label | extract the label from the data item |
componentExtractor | function | Yes | (data) => data.component | extract the component from the data item |
visible | bool | Yes | false | control open/close state of modal |
closeOnChange | bool | Yes | In single mode true In multi mode false | control if modal closes on select |
initValue | string | Yes | Select me! | text that is initially shown on the button (available in single mode only!) |
cancelText | string | Yes | cancel | text of the cancel button |
searchText | string | Yes | search | text of the search placeholder |
disabled | bool | Yes | false | true disables opening of the modal |
supportedOrientations | ['portrait', 'landscape'] | Yes | both | orientations the modal supports |
keyboardShouldPersistTaps | string / bool | Yes | always | passed to underlying ScrollView |
listType | string | Yes | SCROLLVIEW | scroller type: SCROLLVIEW or FLATLIST |
animationType | string | Yes | slide | type of animation to be used to show the modal. Must be one of none, slide or fade. |
style | object | Yes | style definitions for the root element | |
childrenContainerStyle | object | Yes | {} | style definitions for the children container view |
touchableStyle | object | Yes | {} | style definitions for the touchable element |
touchableActiveOpacity | number | Yes | 0.2 | opacity for the touchable element on touch |
selectStyle | object | Yes | {} | style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass flex:1 explicitly to selectStyle as a prop. |
selectTextStyle | object | Yes | {} | style definitions for the select element (available in default mode only!) |
overlayStyle | object | Yes | { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } | style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding. |
sectionStyle | object | Yes | {} | style definitions for the section element |
sectionTextStyle | object | Yes | {} | style definitions for the select text element |
optionStyle | object | Yes | {} | style definitions for the option element |
optionTextStyle | object | Yes | {} | style definitions for the option text element |
optionSelectedStyle | object | Yes | { padding: 8, borderBottomWidth: 1, borderBottomColor: '#ccc' } | style definitions for the selected option elements |
optionSelectedTextStyle | object | Yes | { textAlign: 'center', fontSize: FONT_SIZE, color: 'rgba(255, 0, 59, 0.9)' } | style definitions for the selected option text elements |
optionContainerStyle | object | Yes | {} | style definitions for the option container element |
cancelStyle | object | Yes | {} | style definitions for the cancel element |
cancelTextStyle | object | Yes | {} | style definitions for the cancel text element |
initValueTextStyle | object | Yes | {} | style definitions for the initValue text element (available in single mode only!) |
cancelContainerStyle | object | Yes | {} | style definitions for the cancel container |
searchStyle | object | Yes | {} | Style definitions for the search view element |
searchTextStyle | object | Yes | {} | Style definitions for the search text element |
backdropPressToClose | bool | Yes | false | true makes the modal close when the overlay is pressed |
passThruProps | object | Yes | {} | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing) |
selectTextPassThruProps | object | Yes | {} | props to pass through to the select text component |
optionTextPassThruProps | object | Yes | {} | props to pass through to the options text components in the modal |
cancelTextPassThruProps | object | Yes | {} | props to pass through to the cancel text components in the modal |
scrollViewPassThruProps | object | Yes | {} | props to pass through to the internal ScrollView |
openButtonContainerAccessible | bool | Yes | false | true enables accessibility for the open button container. Note: if false be sure to define accessibility props directly in the wrapped component. |
listItemAccessible | bool | Yes | false | true enables accessibility for data items. Note: data items should have an accessibilityLabel property if this is enabled |
cancelButtonAccessible | bool | Yes | false | true enables accessibility for cancel button. |
scrollViewAccessible | bool | Yes | false | true enables accessibility for the scroll view. Only enable this if you don't want to interact with individual data items. |
scrollViewAccessibilityLabel | string | Yes | undefined | Accessibility label for the modal ScrollView |
cancelButtonAccessibilityLabel | string | Yes | undefined | Accessibility label for the cancel button |
modalOpenerHitSlop | object | Yes | {} | How far touch can stray away from touchable that opens modal (RN docs) |
customSelector | node | Yes | undefined | Render a custom node instead of the built-in select box. |
selectedKey | any | Yes | '' | Key of the item to be initially selected |
enableShortPress | bool | Yes | true | enables short press. This is regular touch behavior. |
enableLongPress | bool | Yes | false | enables long press. When true, onModalOpen returns {longPress: true} |
optionsTestIDPrefix | string | Yes | 'default' | This prefixes each selectable option's testID prop if no testID keys are provided in props.data array objects. Default for each option's testID: 'default-<optionLabel>' |
multi | bool | Yes | false | enables multiple selection mode |
text | function | Yes | (count) => '${count} item(s) selected' | text of dropdown in multi mode |
Methods
getSelectedItem(): get current selected item(s) (returns object in single mode, returns array of object in multi mode), updated by onChange event.
No vulnerabilities found.
No security vulnerabilities found.