Default selection not working

[abidhkm]

import {StyleSheet, View} from 'react-native';
import CheckboxTree from 'react-native-checkbox-tree';
import ArrowDown from './arrowDown';
import RightArrow from './rightArrow';
import Check from './check';
import Uncheck from './uncheck';

const recursiveData = [
  {
    shopReportName: 'Name 1',
    shopCode: '00001',
    shopType: '2',
    shopId: 1,
    shopName: 'Name 1',
  },
  {
    shopReportName: 'Name 11',
    shopCode: '00002',
    shopType: '2',
    shopId: 11,
    shopName: 'Name 11',
  },
];

const ApplyJobScreen = () => {
  const checkboxTreeRef = useRef();

  const intialSelect = () => {
    checkboxTreeRef.current.setSelectedItem([{shopName: 'Name 11'}]);
  };

  useEffect(() => {
    if (checkboxTreeRef.current) {
      intialSelect();
    }
  }, [checkboxTreeRef.current]);

  return (
    <View style={styles.treeContainer}>
      <View style={styles.container}>
        <CheckboxTree
          ref={checkboxTreeRef}
          data={recursiveData}
          textField="shopName"
          childField="childs"
          textStyle={{color: 'black'}}
          iconColor="black"
          openIcon={
            <ArrowDown
              style={{marginVertical: 8}}
              fill="#000"
              width="15"
              height="15"
            />
          }
          closeIcon={
            <RightArrow
              style={{marginVertical: 8}}
              fill="#000"
              width="15"
              height="15"
            />
          }
          checkIcon={
            <Check
              style={{marginHorizontal: 8}}
            />
          }
          unCheckIcon={
            <Uncheck
              fill="#000"
              style={{marginHorizontal: 8}}
            />
          }
          onSelect={item => {
            console.log(`Selected ${item.length} item`);
          }}
        />
      </View>
    </View>
  );
};

RN: 0.67.2 OS: Android

I am trying to make the checkbox Name 11 (the second item in the array) selected by default on the rendering, but it doesn't work. The default selection works only for the first item in the recursiveData array. Please advice if I am doing something wrong Thanks

[kweheliye1]

@hoaphantn7604 having same issue, please can you help

[hoaphantn7604]

Hi, I'm working on it.

[hoaphantn7604]

Hi , Please see this example code:

checkboxTreeRef.current.setSelectedItem([{{
    shopReportName: 'Name 1',
    shopCode: '00001',
    shopType: '2',
    shopId: 1,
    shopName: 'Name 1',
  }}]);

[hoaphantn7604]

Hi, Please install later version: Ex:

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,
  },
});

[abidhkm]

Hi Thanks for the reply I am using version 1.3.0 In my case, I have 2 items in the recursive data array like this.

  {
    shopReportName: 'Name 1',
    shopCode: '00001',
    shopType: '2',
    shopId: 1,
    shopName: 'Name 1',
  },
  {
    shopReportName: 'Name 11',
    shopCode: '00002',
    shopType: '2',
    shopId: 11,
    shopName: 'Name 11',
  },
]; 

It can have children too in a nested manner. In that case, the selection works only for the first item in the array. for example,

scrollableRef.current.setSelectedItem([
      {
        shopReportName: 'Name 1',
        shopCode: '00001',
        shopType: '2',
        shopId: 1,
        shopName: 'Name 1',
      },
      {
        shopReportName: 'Name 11',
        shopCode: '00002',
        shopType: '2',
        shopId: 11,
        shopName: 'Name 11',
      },
    ]);

this is not working

[abidhkm]

https://github.com/hoaphantn7604/react-native-checkbox-tree/pull/6/files Above scenario is covered in this PR, can u please test and verify

[hoaphantn7604]

hi @abidhkm , This issue is resolved. Please install later version.

[abidhkm]

Verified it and working fine Thanks!