react-native-checkboxcustom

A cross-platform radio and multiple-choice React Native component that checkbox style users can define

Installation

npm install react-native-checkboxcustom --save

Usage

import CheckboxCustom from 'react-native-checkboxcustom'

Example

default checkbox

<CheckboxCustom
  options={
    [
      { label: '', value: 'A' },
      { label: '', value: 'B' },
      { label: '', value: 'C' },
      { label: '', value: 'D' }
    ]
  }
  maxSelectedOptions={1}
  onSelection={(option)=>console.log(option + ' was selected!')}
/>

custom checkbox

component:

_renderIndicator = (option) => {
  return (
    <View style={[styles.checkbox]}>
      <Text style={[styles.option]}>{option.value}</Text>
    </View>
  )
}
_renderIndicatorChecked = (option) => {
  return (
    <View style={[styles.checkbox, styles.checkboxSelected]}>
      <Text style={[styles.option, styles.optionSelected]}>{option.value}</Text>
    </View>
  )
}
render(){
  return(
	<CheckboxCustom
	  options={
	    [
	      {label:'this is list of A',value:'A'},
	      {label:'this is list of B',value:'B'},
	      {label:'this is list of C',value:'C'},
	      {label:'this is list of D',value:'D'}
	    ]
	  }
	  selectedOptions={['A', 'C']}
	  renderIndicator={this._renderIndicator}
	  renderIndicatorChecked={this._renderIndicatorChecked}
	  onSelection={(option)=>console.log(option + ' was selected!')}
	  contentContainerStyle={{ flexDirection: 'column' }}
	/>
  )
}

styles:

const styles = StyleSheet.create({
  checkbox: {
    width: 42,
    height: 42,
    borderRadius: 21,
    borderWidth: 2,
    borderColor: '#c4c4c4',
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 8,
    marginVertical: 5
  },
  checkboxSelected: {
    borderColor: '#3bcb7e',
  },
  option: {
    fontSize: 16,
    color: '#656565'
  },
  optionSelected: {
    color: '#3bcb7e'
  },
});

Api

• style - {} custom style of the list
• optionStyle - {} custom style of the option element
• options - [] required array of options
• selectedOptions - [] optional array of initially selected options
• maxSelectedOptions - int optional maximum number of selectable options
• onSelection - function(option){} option selection callback
• renderIndicator - function(option) should return a selected/deselected indicator node, default: check mark image
• renderSeparator - function(option) should return a separator node that is displayed between the options, default: gray line
• renderText - function(option) should return a text node, default: text node
• renderRow - function(option) should return a option view
• disabled - bool if set to true component is disabled and can't be interacted with