react-native-checkbox-tree icon indicating copy to clipboard operation
react-native-checkbox-tree copied to clipboard

Published 20 hours ago • verified publisher icon hoaphantn7604
→

Metadata

A simple and elegant checkbox tree for React Native.

react-native-checkbox-tree

A simple and elegant checkbox tree for React Native. Implemented using react-native-vector-icons

Getting started

    npm install react-native-checkbox-tree --save

or

    yarn add react-native-checkbox-tree

Now we need to install react-native-vector-icons.

    npm install react-native-vector-icons --save

or

    yarn add react-native-vector-icons

Source code demo

react-native-template-components A beautiful template for React Native.

Demo

Props

Props Params isRequire Description
data Array Yes Data is a plain array
textField String Yes Extract the lable from the data item
childField String Yes Extract the field children from the data item
onSelect (item[])=> void Yes Selection callback
style ViewStyle No Styling for container view
textStyle TextStyle No Styling for text
iconSize Number No Customize icon size
iconColor String No Customize icon color
autoSelectChilds Boolean No Automatically select childs when selecting an item, default is true
autoSelectParents Boolean No Automatically select parent when all childs are selected, default is true
openIcon Element No Customize open icon. Only using react-native-vector-icons
closeIcon Element No Customize close icon. Only using react-native-vector-icons
checkIcon Element No Customize check icon. Only using react-native-vector-icons
unCheckIcon Element No Customize uncheck icon. Only using react-native-vector-icons
renderItem (item, isSelect, isOpen, onOpen, onClose, onSelect)=> Element No Takes an item from data and renders it into the list

Method

API Description
clear Refresh data
setSelectedItem The input value is the result returned from onSelect

Example 1

import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import CheckboxTree from 'react-native-checkbox-tree';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';

const recursiveData = [
  {
    shopReportName: 'Name 1',
    shopCode: '00001',
    shopType: '2',
    shopId: 1,
    shopName: 'Name 1',
    childs: [
      {
        shopReportName: 'Name 2',
        shopCode: '00002',
        shopType: '3',
        shopId: 2,
        shopName: 'Name 2',
        childs: [
          {
            shopReportName: 'Name 3',
            shopCode: '00003',
            shopType: '4',
            shopId: 3,
            shopName: 'Name 3',
            childs: [
              {
                shopReportName: 'Name 4',
                shopCode: '00004',
                shopType: '4',
                shopId: 4,
                shopName: 'Name 4',
              },
              {
                shopReportName: 'Name 5',
                shopCode: '00005',
                shopType: '4',
                shopId: 5,
                shopName: 'Name 5',
                childs: [
                  {
                    shopReportName: 'Name 6',
                    shopCode: '00006',
                    shopType: '4',
                    shopId: 7,
                    shopName: 'Name 6',
                    childs: [
                      {
                        shopReportName: 'Name 7',
                        shopCode: '00007',
                        shopType: '4',
                        shopId: 7,
                        shopName: 'Name 7',
                      },
                    ],
                  },
                ],
              },
              {
                shopReportName: 'Name 8',
                shopCode: '00008',
                shopType: '4',
                shopId: 8,
                shopName: 'Name 8',
              },
            ],
          },
        ],
      },
    ],
  },
];

export interface Props {}

const CheckboxTreeScreen: React.FC<Props> = _props => {
  const [data] = useState<any[]>(recursiveData);
  const ref: any = useRef();

  useEffect(() => {
    if (ref && ref.current) {
      ref.current.setSelectedItem([
        {
          shopReportName: 'Name 1',
          shopCode: '00001',
          shopType: '2',
          shopId: 1,
          shopName: 'Name 1',
        },
        {
          shopReportName: 'Name 2',
          shopCode: '00002',
          shopType: '3',
          shopId: 2,
          shopName: 'Name 2',
        },
      ]);
    }
  }, [ref]);

  return (
    <View style={styles.container}>
      <CheckboxTree
        ref={ref}
        data={data}
        textField="shopName"
        childField="childs"
        textStyle={{ color: 'black' }}
        iconColor="black"
        iconSize={26}
        openIcon={<AntDesign name="arrowdown" size={26} />}
        closeIcon={<AntDesign name="arrowright" size={26} />}
        renderItem={({ item, isSelect, isOpen, onOpen, onClose, onSelect }) => (
          <View style={styles.wrapItem}>
            {isOpen ? (
              <TouchableOpacity onPress={onClose}>
                <AntDesign size={30} name="arrowright" />
              </TouchableOpacity>
            ) : (
              <TouchableOpacity onPress={onOpen}>
                <AntDesign size={30} name="arrowdown" />
              </TouchableOpacity>
            )}
            <TouchableOpacity onPress={onSelect}>
              <Ionicons
                size={26}
                name={isSelect ? 'checkbox-outline' : 'square-outline'}
              />
            </TouchableOpacity>
            <Text style={styles.name}>{item.shopName}</Text>
          </View>
        )}
        onSelect={item => {
          console.log(`Selected ${item.length} item`);
        }}
      />
    </View>
  );
};

export default CheckboxTreeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  wrapItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 8,
  },
  icon: {
    marginHorizontal: 8,
  },
  name: {
    fontSize: 20,
    marginLeft: 8,
  },
});

Example 2

  import React from 'react';
  import { StyleSheet, View } from 'react-native';
  import CheckboxTree from 'react-native-checkbox-tree';
  import AntDesign from 'react-native-vector-icons/AntDesign';

  const recursiveData = [
    {
      shopReportName: 'Name 1',
      shopCode: '00001',
      shopType: '2',
      shopId: 1,
      shopName: 'Name 1',
      childs: [
        {
          shopReportName: 'Name 2',
          shopCode: '00002',
          shopType: '3',
          shopId: 2,
          shopName: 'Name 2',
          childs: [
            {
              shopReportName: 'Name 3',
              shopCode: '00003',
              shopType: '4',
              shopId: 3,
              shopName: 'Name 3',
              childs: [
                {
                  shopReportName: 'Name 4',
                  shopCode: '00004',
                  shopType: '4',
                  shopId: 4,
                  shopName: 'Name 4',
                },
                {
                  shopReportName: 'Name 5',
                  shopCode: '00005',
                  shopType: '4',
                  shopId: 5,
                  shopName: 'Name 5',
                  childs: [
                    {
                      shopReportName: 'Name 6',
                      shopCode: '00006',
                      shopType: '4',
                      shopId: 7,
                      shopName: 'Name 6',
                      childs: [
                        {
                          shopReportName: 'Name 7',
                          shopCode: '00007',
                          shopType: '4',
                          shopId: 7,
                          shopName: 'Name 7',
                        },
                      ],
                    },
                  ],
                },
                {
                  shopReportName: 'Name 8',
                  shopCode: '00008',
                  shopType: '4',
                  shopId: 8,
                  shopName: 'Name 8',
                },
              ],
            },
          ],
        },
      ],
    },
  ];

  const CheckboxTreenScreen = _props => {
    return (
      <View style={styles.container}>
        <CheckboxTree
          data={recursiveData}
          textField="shopName"
          childField="childs"
          textStyle={{ color: 'black' }}
          iconColor="black"
          iconSize={26}
          openIcon={<AntDesign name="arrowdown" size={26} />}
          closeIcon={<AntDesign name="arrowright" size={26} />}
          checkIcon={<View />}
          unCheckIcon={<View />}
          renderItem={item => (
            <View style={styles.wrapItem}>
              <AntDesign
                style={styles.iconItem}
                name="folderopen"
                size={20}
              />
              <Text style={styles.text}>{item.shopName}</Text>
            </View>
          )}
          onSelect={item => {
            console.log(`Selected ${item.length} item`);
          }}
        />
      </View>
    );
  };

  export default CheckboxTreenScreen;

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingVertical: 40,
    },
    wrapItem: {
      flexDirection: 'row',
      marginVertical: 8
    },
    text: {
      fontSize: 18
    },
    iconItem:{
      marginHorizontal: 8
    }
  });

← Metadata

25
Stars
6
Forks
Watchers

Owner

verified publisher icon hoaphantn7604

Metadata

A simple and elegant checkbox tree for React Native.

Back