1.0.6 • Published 4 years ago
react-native-multiple-choice-picker v1.0.6
react-native-multiple-choice-picker
A cross-platform (iOS / Android) multiple-choice component for React Native.
Getting Started
Installing
npm i react-native-multiple-choice-picker
Or
yarn add npm i react-native-multiple-choice-picker
Basic Usage
<MultipleChoice
choices={['Football', 'Soccer']}/>
<MultipleChoice
direction={'column'}
choices={['Football', 'Badminton', 'Basketball', 'Tennis']}/>
<MultipleChoice
renderCustomItem={() => {
return <Text style={{ color: 'red', fontWeight: 'bold' }}>Basketball</Text>
}}
chosenColor={'red'}
chosenTextColor={'black'}
customIndex={0}
direction={'column'}
choices={['Football', 'Badminton', 'Basketball', 'Tennis']}/>
Props
| Name | Description | Details |
|---|---|---|
choices | Labels of multiple choice component | requiredarray: [] |
chosenIndex | Currently chosen index | number: 0 |
onPress | Event handler when clicking at a choice | function: () => {} |
style | Style of container | object: {} |
direction | Multiple choice can be render in row or column direction | string: 'row' / 'column' |
chosenColor | Color of the chosen component | string: '#e2641e' |
chosenTextColor | Color of the chosen label | string: '#e2641e' |
TouchableComponent | Custom choosing compoenent | component: DefaultTouchableComponent |
outerRound | Dimension of outer round of the choosing component | number: 24 |
innerRound | Demision of inner round of the choosing component | number: 16.8 |
renderCustomItem | Render custom label component | function: () => {} |
customIndex | Index to render custom label component | number: -1 |