React Native Checkbox Field

React Native Checkbox Field

React Native Checkbox Field is a configurable React Native component which works on both iOS and Android with minimal dependencies.

• Installation
• Usage
• Props

Installation

npm install --save react-native-checkbox-field

Usage

import CheckboxField from 'react-native-checkbox-field'; // Field with label import { Checkbox } from 'react-native-checkbox-field'; // Checkbox only

import React, { Component } from 'react'; import { View, Text } from 'react-native'; import CheckboxField from 'react-native-checkbox-field'; import Icon from 'react-native-vector-icons/FontAwesome';  export default class Form extends Component {   state = {     selected: false,   };    selectCheckbox = () => {     this.setState({       selected: !this.state.selected,     });   };    render() {     const { selected } = this.state;      // Only onSelect prop is required     return (       <CheckboxField         onSelect={this.selectCheckbox}         selected={selected}         label="Accept terms and conditions"         labelSide="right"       >         <Icon name="check" color="#fff" />       </CheckboxField>     )   } }

Props

CheckboxField

• label (String) null - The label positioned next to the checkbox
• labelStyle (Object) - The style of the text label

{   flex: 1 } 

• containerStyle (Object) - The style of the container surrounding the label and checkbox

{   flex: 1,   flexDirection: 'row',   padding: 20,   alignItems: 'center' } 

• labelSide (enum('left', 'right')) left - The side the label will be positioned with the checkbox.

Checkbox

• onSelect (Function) null - The function that is run when the checkbox is selected
• selected (Boolean) false - The value representing the selected state
• disabled (Boolean) false - Whether the checkbox can receive user interactions
• disabledColor (String) null - The background color when the checkbox is disabled
• children (React.Component) null - The component within the checkbox
• defaultColor (String) #fff - The default color of the checkbox background
• selectedColor (String) #247fd2 - The selected color of the checkbox background
• checkboxStyle (Object)

{   borderWidth: 2,   borderColor: '#ddd',   borderRadius: 5 }