A simple checkbox’s component works on Android and iOS

react-native-checkbox-form

react-native-checkbox-form is a simple checkbox’s component, it works on Android and iOS, The Icon is used in the checkbox-form depends on react-native-vector-icons.

Installation

npm install react-native-checkbox-form --save

The part of checkbox-form depends on react-native-vector-icons, so if your application haven't link react-native-vector-icons, still must run following commond:

react-native link react-native-vector-icons

In addition, you can alse redirect to react-native-vector-icons, learn more about how to link it

Note: The checkbox-form is based on ECMAScript6, if you use React Native < v0.13, maybe it don't run

Usage

1.General Use

import React, { Component } from 'react';
import { View } from 'react-native';
import CheckboxFormX from 'react-native-checkbox-form';
const mockData = [
    {
        label: 'label1',
        value: 'one'
    },
    {
        label: 'label2',
        value: 'two'
    },
    {
        label: 'label3',
        value: 'three'
    },
];

export default class PRNRadioForm extends Component {
    _onSelect = ( item ) => {
      console.log(item);
    };

  render() {
    return (
      <View style={styles.container}>
          <View style={{ marginVertical: 10, backgroundColor: "#E7E7E7" }} >
              <CheckboxFormX
                  style={{ width: 350 - 30 }}
                  dataSource={mockData}
                  itemShowKey="label"
                  itemCheckedKey="RNchecked"
                  iconSize={16}
                  formHorizontal={true}
                  labelHorizontal={false}
                  onChecked={(item) => this._onSelect(item)}
              />
          </View>
     </View>
    );
  }
}

2.Set default checked value

import React, { Component } from 'react';
import { View } from 'react-native';
import CheckboxFormX from 'react-native-checkbox-form';
const mockData = [
    {
        label: 'label1',
        RNchecked: true
    },
    {
        label: 'label2',
        RNchecked: false
    }
];

export default class PRNRadioForm extends Component {
    _onSelect = ( item ) => {
      console.log(item);
    };

  render() {
    return (
      <View style={styles.container}>
          <View style={{ marginVertical: 10, backgroundColor: "#E7E7E7" }} >
              <CheckboxFormX
                  style={{ width: 350 - 30 }}
                  dataSource={mockData}
                  itemShowKey="label"
                  itemCheckedKey="RNchecked"
                  iconSize={16}
                  formHorizontal={true}
                  labelHorizontal={false}
                  onChecked={(item) => this._onSelect(item)}
              />
          </View>
     </View>
    );
  }
}

As shown above, add the attribute corresponding to the value of itemCheckedKey in the datasource.Thus whether active control is selected

Properties

GitHub