1.0.1 • Published 3 years ago
rn-multiple-choices v1.0.1
rn-multiple-choices
React native component for multiple choice questions-answers/choices.
Install
To add this package to your project:
npm
npm install rn-multiple-choicesyarn
yarn add rn-multiple-choicesUsage
Import
import MultipleChoice from 'rn-multiple-choices';Basic
<MultipleChoice
title={'What is ReactJS?'}
choices={['Server-side framework', 'user interface framework', 'both a and b', 'none of the above']}
onSelection={(index, choice) => {
console.log('selected choice index', index)
console.log('selected choice value', choice)
}}
/>
Custom styling
<MultipleChoice
title={'What is ReactJS?'}
choices={['Server-side framework', 'user interface framework', 'both a and b', 'none of the above']}
onSelection={(index, choice) => {
console.log('selected choice index', index)
console.log('selected choice value', choice)
}}
containerStyle={{backgroundColor: '#bfc2c7', paddingVertical: 25, paddingHorizontal: 10, borderRadius: 6}}
titleStyle={{fontSize: 24, color: '#1D5C5D'}}
choicesContainerStyle={{marginTop: 10, padding: 10, borderWidth: 0.5, borderColor: '#1D5C5D', borderRadius: 12}}
choiceButtonStyle={{width : '100%', alignItems: 'flex-start'}}
choiceTextColor={'#1D5C5D'}
/>
Props
Basic
| Prop | Type | Description |
|---|---|---|
| title | string | title string |
| choices | arraystring | Array of choice |
| onSelection | func | callback for option is selected |
Custom styling
| Prop | Type | Description |
|---|---|---|
| containerStyle | object | parent container style |
| titleStyle | object | title/question textStyle |
| choicesContainerStyle | object | container style for choices/options |
| choiceButtonStyle | object | button style for choices/options |
| choiceTextColor | string | choice text & radio icon color value |
Authors
Contributing
Contributions are always welcome!