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 |