Encapsulate the multi selection box control in react native

1. Installation of third party components

GitHub: https://github.com/crazycodeboy/react-native-check-box

Install under the command line of ReactNative project

npm i react-native-check-box –save

2. Encapsulation of local control

2.1 import and constant definitions, which can be adjusted according to the project

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
} from 'react-native';

import CheckButton from 'react-native-check-box';
import { setSpText, scaleSize } from './../core/screen-util';
import { textFontSize, textColor } from './../config/genericStyle';

const ICON_CHECKED = require('./../../image/icon_checkedbox.png');
const ICON_UNCHECKED = require('./../../image/icon_uncheckedbox.png');

2.2 component code

The used styles can be added by themselves, which can support left text and right text. Currently, they are right text

export default class CheckBox extends Component {
    constructor(props) {

    onClick(data) {
        data.checked = !data.checked;

    renderRightText(data) {
        return (<Text style={styles.rightText}>{data.text}</Text>);

    render() {
        let data = this.props.data;
        return (
                style={{ padding: scaleSize(8) }}
                onClick={() => this.onClick(data)}
                checkedImage={<Image source={ICON_CHECKED} style={styles.image} />}
                unCheckedImage={<Image source={ICON_UNCHECKED} style={styles.image} />}

3. Demo

Using the currently encapsulated CheckBox component, the necessary parameters are as follows

parameter type describe
data object Example: {'text': 'testcheckbox', 'checked': false}
onClick function Click the callback of multiple selection box, and the data object after the checked switch will be returned when the callback is executed

A simple example:

import CheckBox from './../../lib/component/checkbox';
    onChecked(data) {
        console.log('click : ' + JSON.stringify(data));

    render() {
        let data = [{ 'text': 'testcheckbox', 'checked': false }, { 'text': 'checkbox2', 'checked': false }];
        return (
            <View style={{ flexDirection: 'row' }}>
                <CheckBox data={data[0]} onClick={this.onChecked.bind(this, data[0])} />
                <CheckBox data={data[1]} onClick={this.onChecked.bind(this, data[1])} />

Keywords: React github npm JSON

Added by r00tk1LL on Mon, 04 May 2020 11:16:46 +0300