A cross-platform (iOS / Android) single and multiple-choice React Native component.
yarn add somoso/react-native-multiple-choice
Here is an overview of the component usage.
Simple list (i.e. list of strings):
<MultipleChoice
options={[
'Lorem ipsum dolor sit',
'Lorem ipsum',
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
'Lorem ipsum dolor sit amet, consetetur',
'Lorem ipsum dolor'
]}
selectedOptions={['Lorem ipsum']}
maxSelectedOptions={2}
onSelection={(option)=>alert(option + ' was selected!')}
/>
For list of objects:
<MultipleChoice
options={[
{item: 'Lorem ipsum dolor sit'},
{item: 'Lorem ipsum'},
{item: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'},
{item: 'Lorem ipsum dolor sit amet, consetetur'},
{item: 'Lorem ipsum dolor'}
]}
findIndexProp="item"
selectedOptions={[{item: 'Lorem ipsum'}]}
maxSelectedOptions={2}
onSelection={(option)=>alert(option.item + ' was selected!')}
/>
style - {}
custom style of the listoptionStyle - {}
custom style of the option elementoptions - []
required array of optionsselectedOptions - []
optional array of initially selected optionsselectedOptionsList - function(optionList){}
optional callback , returns a list of selected optionsmaxSelectedOptions - int
optional maximum number of selectable optionsonSelection - function(option){}
option selection callbackrenderIndicator - function(option)
should return a selected/deselected indicator node, default: check mark imagerenderSeparator - function(option)
should return a separator node that is displayed between the options, default: gray linerenderText - function(option)
should return a text node, default: text noderenderRow - function(option)
should return a option viewdisabled - bool
if set to true component is disabled and can't be interacted withfindIndexProp
if set, it will treat the list as a list of objects, and display the value matching the key in the object