rn-modal-picker-awesome

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-icons

usage

<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-awesome

Modal 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