wqs-react-native-collapsible
v0.0.4
Published
Animated collapsible component for React Native using ListView.
Downloads
7
Maintainers
Readme
wqs-react-native-collapsible
Animated collapsible component for React Native using ListView.
Installation
npm install --save wqs-react-native-collapsible
Collapsible Component Usage
Default
import Collapsible from 'wqs-react-native-collapsible';
<Collapsible
data={jsonData}
onSelectAll={onSelectAll}
onSingleSelect={onSingleSelect}
badgeCountVisible={true}
/>
Blue
<Collapsible
data={jsonData}
onSelectAll={onSelectAll}
onSingleSelect={onSingleSelect}
badgeCountVisible={true}
checkedImage={'BLUE_CHECK'}
uncheckedImage={'BLUE_UNCHECK'}
badgeCountStyle={{backgroundColor: '#55ACEE'}}
/>
Custom Icon & Style
<Collapsible
data={jsonData}
onSelectAll={onSelectAll}
onSingleSelect={onSingleSelect}
badgeCountVisible={true}
checkedImage={require('./../assets/purple-check.png')}
uncheckedImage={require('./../assets/purple-uncheck.png')}
badgeCountStyle={{backgroundColor: '#7F59E0'}}
/>
Properties
Data
It is an object array and should be something like i.e
[{
id:77,
isAllChecked: false,
title: 'React-Native',
children:[{
id: 11,
isChecked: false,
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. '
},{
id: 22,
isChecked: false,
description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
}]
}
]
onSelectAll
onSelectAll = (updatedData, id) => {
console.log(updatedData, id);
}
- updatedData: Wil contain all updated checked/unchecked values.
- id: It will show which id is select or deselect.
onSingleSelect
onSingleSelect = (updatedData, parentId, id) => {
console.log(updatedData, parentId, id);
}
- updatedData: Wil contain all updated checked/unchecked values.
- parentId: It will return the parent id of selected id i.e in the above example our parent id is 77 if we select checkbox for id 22 or 11.
- id: It will show which id is select or deselect.
badgeCountVisible
badgeCountVisible={true}
OR
badgeCountVisible={false}
checkedImage
checkedImage={require('./../assets/purple-check.png')}
uncheckedImage
uncheckedImage={require('./../assets/purple-uncheck.png')}
badgeCountStyle
badgeCountStyle={{backgroundColor: '#7F59E0'}}
Sample Code
import React from 'react';
import { View } from 'react-native';
import Collapsible from 'wqs-react-native-collapsible';
const App = () => {
onSelectAll = (updatedData, id) => {
console.log(updatedData,id);
}
onSingleSelect = (updatedData, parentId, selectedId) => {
console.log(updatedData, parentId, selectedId);
}
return (
<View style={{ flex: 1 }}>
<Collapsible
data={jsonData}
onSelectAll={onSelectAll}
onSingleSelect={onSingleSelect}
badgeCountVisible={true}
checkImage={require('./../assets/purple-check.png')}
uncheckImage={require('./../assets/purple-uncheck.png')}
badgeCountStyle={{backgroundColor: '#7F59E0'}}
/>
</View>
);
};
export default App;