Comments (8)
@hoaphantn7604 having same issue, please can you help
from react-native-checkbox-tree.
Hi,
I'm working on it.
from react-native-checkbox-tree.
Hi ,
Please see this example code:
checkboxTreeRef.current.setSelectedItem([{{
shopReportName: 'Name 1',
shopCode: '00001',
shopType: '2',
shopId: 1,
shopName: 'Name 1',
}}]);
from react-native-checkbox-tree.
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,
},
});
from react-native-checkbox-tree.
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
from react-native-checkbox-tree.
https://github.com/hoaphantn7604/react-native-checkbox-tree/pull/6/files
Above scenario is covered in this PR, can u please test and verify
from react-native-checkbox-tree.
hi @abidhkm ,
This issue is resolved. Please install later version.
from react-native-checkbox-tree.
Verified it and working fine
Thanks!
from react-native-checkbox-tree.
Related Issues (10)
- I'd like to deal with the checkbox in detail. HOT 2
- support method to select all data
- Not compatible with React@18 and React-Native@72 HOT 1
- Customize item HOT 2
- add onlyLeafCheckboxes and hideAllCheckboxes params HOT 2
- Checkbox tree not rendering HOT 3
- onSelect function does not working HOT 1
- using in javascript
- Local api data is not rendering in data field
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-checkbox-tree.