1.1.1 • Published 6 years ago
rn-modal-picker-awesome v1.1.1
React Native Modal Picker Awesome
React Native Modal Picker Component , Enable Single, Multi Selection , auto close Modal
- The Modal is Smart enough to close automatioc in both single, multi Selection
- all section of component is reusable for developer customize
- hope this help :)
Ios
Installation
make sure you have installed react-native-vector-icons & linked it :) , or install
$ yarn add react-native-vector-icons || npm i --save react-native-vector-icons
Then link
$ react-native link react-native-vector-iconsusage
<Modal
onSelectOption={(option) => console.log('@option/options', option)}
modalOptions={[
{name:'Option 1', value:'1'},
{name:'Option 2', value:'2'},
{name:'Option 3', value:'3'},
{name:'Option 4', value:'4'},
{name:'Option 5', value:'5'},
]}
visible={this.state.visible}
autoClose={true}
multiple={false}
/>install the package
$ yarn add rn-modal-picker-awesome
or
$ npm i --save rn-modal-picker-awesomeModal Functions
| name | purpose | usage |
|---|---|---|
| onSelectOption | this func help to get selected option, options depend on your multiple case | onSelectOption={(option) => console.log('@Option/options ',option)} |
Modal Props
| name | default | usage | description | type |
|---|---|---|---|---|
| visible | false | visible={true/false} | show/hide Modal | bool |
| multiple | false | multiple={false/true} | if true enable multi select options | bool |
| autoClose | false | visible={false/true} | close automatic after select option in case multiple={false} otherwise will close automatice after all options has been selected in case multiple={true} | bool |
| modalOptions | { name:'Option 1', value: '1' }, ... | modalOptions={name:'', value:''},{...},...etc | modal Options Prop must be an array of objects contains name & value | array |
| selectedOptions | null | selectedOptions={value:'1'},{...} | works only with multiple selection , and this will mark your values as selected , | array |
| selectedOption | null | selectedOption={{value:'1' }} | works only with single selection | Object |
| animateType | 'slide' | animateType='slide' | change modal animation from 'slide', 'fade' | string |
| modalBackground | '#fff' | modalBackground='#ccc' | change modal background color | string |
| modalHeaderBackground | '#fff' or modalBackground if changed | modalHeaderBackground='#eee' | modal header by default inherit the modalBackground color, but in case you need to change it seperately , do it :) | string |
| closeIconName | 'ios-close-circle-outline' | closeIconName='name-of-icon' | this will change your icon , here is list of icons can be used IonicIconsList | string |
| closeIconText | 'Close' | closeIconText='string' | change the close icon text | string |
| closeIconStyle | {} | closeIconStyle={{}} | overwrite the style of close icon with new style | object |
| closeIconTextStyle | {} | closeIconTextStyle={{}} | overwrite the style of close icon text with new style | object |
| doneIconName | 'ios-checkmark-circle-outline' | doneIconName='name-of-icon' | this will change your icon , here is list of icons can be used IonicIconsList | string |
| doneIconStyle | {} | doneIconStyle={{}} | overwrite the style of done icon with new style | object |
| doneIconTextStyle | {} | doneIconTextStyle={{}} | overwrite the style of done icon text with new style | object |
| doneIconText | 'string' | doneIconText='string' | change the done icon text | string |
| titleStyle | {} | titleStyle={{}} | overwrite style of title with new style | object |
| titleText | 'Title Of Modal' | titleText='string' | change title of header | string |
| optionContainerStyle | {} | optionContainerStyle={{}} | change style of option Conatiner | object |
| optionTextContainerStyle | {} | optionTextContainerStyle={{}} | change style of optionText View | object |
| optionTextStyle | {} | optionTextStyle={{}} | change style of option text | object |
| optionCircleColor | '#4caf50' | optionCircleColor='color' | change the color of circle | string |
| optionCircleInnerColor | '#4caf50' | optionCircleInnerColor='color' | inner circle will inherit color from the main circle, but in case want to change , do it :) | string |