Rename props. Add Readme.

README.md

@@ -0,0 +1,150 @@
+<div align="center">
+
+<h1>React Native Collapsible Tree</h1>
+
+</div>
+
+# Install
+
+```sh
+yarn add @productbrew/react-native-collapsible-tree
+
+npm i @productbrew/react-native-collapsible-tree
+```
+
+# Usage
+
+./Button.tsx
+```js
+import React from "react";
+import { Text, TouchableHighlight, View } from "react-native";
+
+type ButtonProps = {
+    onPress: () => void;
+    isSelected: boolean;
+    title: string;
+};
+
+export default function Button(props: ButtonProps) {
+    return (
+        <TouchableHighlight
+            onPress={props.onPress}
+            underlayColor="white"
+        >
+            <View
+                style={{
+                    backgroundColor: props.isSelected ? "orange" : "white",
+                    flexDirection: "column",
+                    margin: 5,
+                    padding: 15,
+                    borderRadius: 50,
+                    shadowColor: "#000",
+                    shadowOffset: {
+                        width: 0,
+                        height: 2,
+                    },
+                    shadowOpacity: 0.25,
+                    shadowRadius: 3.84,
+                    elevation: 5,
+                }}
+            >
+                <Text>{props.title}</Text>
+            </View>
+        </TouchableHighlight>
+    );
+}
+```
+
+./App.tsx
+```js
+import React, { useState } from "react";
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, View } from 'react-native';
+
+import Pill, { DataStructure } from '@productbrew/react-native-collapsible-tree';
+
+import Button from "./Button";
+
+const dataStructure: DataStructure[] = [
+    {
+        id: 1,
+        name: "Parent1",
+        children: [
+            { id: 11, name: "child1" },
+            { id: 12, name: "child2" },
+            { id: 13, name: "child3" },
+            { id: 14, name: "child4" },
+        ],
+    },
+    {
+        id: 2,
+        name: "Parent2",
+        children: [
+            { id: 21, name: "child1" },
+            { id: 22, name: "child2" },
+            { id: 23, name: "child3" },
+            { id: 24, name: "child4" },
+        ],
+    }
+];
+
+export default function App() {
+    const [selected, setSelected] = useState<number[]>([]);
+
+    return (
+        <View style={styles.container}>
+            <Pill<{ id: number; name: string }>
+            treeData={dataStructure}
+            selectedItemId={selected}
+            buttonComponent={(itemData: DataStructure, level: number) => {
+            const isSelected = !!(selected.find(s => s === itemData.id));
+
+            return (
+                <Button
+                    onPress={() => {
+                        setSelected(isSelected ? selected.filter(s => s !== itemData.id) : [...selected, itemData.id]);
+                    }}
+                    isSelected={isSelected}
+                    title={`${itemData?.name} + ${itemData.children?.length ?? 0}`}
+                />
+            );
+        }}
+            />
+            <StatusBar style="auto"/>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+```
+
+## :wrench: Props
+
+| Name        | Description                             | Required | Type          | Default |
+| ----------- | --------------------------------------- | -------- | ------------- | ------- |
+| treeData    | Tree elements to render              | YES       | Generic Type        | -    |
+| selectedItems        | List with selected items  | YES      | Generic Type List        | -       |
+| buttonComponent      | Button rendered as tree element | YES       | Function => React.ReactNode    | -     |
+| containerStyle       | Container Style                         | NO       | Function => StyleProp<ViewStyle>     | -       |
+| level       | Level of current elements           | NO      | Number | -       |
+
+
+## :camera: Screenhots
+
+| iOS | Android |
+|-----|---------|
+|<img width="auto" height="500" src="./gif/ios.gif">|<img width="auto" height="500" src="./gif/android.gif">|
+
+# Try it out
+
+You can also try out the [example app](https://snack.expo.io/@pzatorski/react-native-flip-example) with Expo.
+
+The source code for the example app is under [/example](https://github.com/productbrew/react-native-collapsible-tree/tree/main/example) folder.

example/App.tsx

@@ -1,6 +1,6 @@
-import React, {useState} from "react";
-import {StatusBar} from 'expo-status-bar';
-import {StyleSheet, View} from 'react-native';
+import React, { useState } from "react";
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, View } from 'react-native';
 
 import Pill, { DataStructure } from '@productbrew/react-native-collapsible-tree';
 
@@ -14,7 +14,7 @@ export default function App() {
         <View style={styles.container}>
             <Pill<{ id: number; name: string }>
                 treeData={dataStructure}
-                selectedItemId={selected}
+                selectedItems={selected}
                 buttonComponent={(itemData: DataStructure, level: number) => {
                     const isSelected = !!(selected.find(s => s === itemData.id));
 

src/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { SafeAreaView, ScrollView, StyleProp, StyleSheet, View, ViewStyle, Text } from "react-native";
+import { SafeAreaView, ScrollView, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 
 export type DataStructure = {
     id: number;
@@ -8,11 +8,11 @@ export type DataStructure = {
 };
 
 type PillProps<T extends DataStructure> = {
-    level?: number;
-    selectedItemId: T["id"][] | null | undefined;
+    treeData: T[];
+    selectedItems: T["id"][] | null | undefined;
     buttonComponent: (data: DataStructure, level: number) => React.ReactNode;
     containerStyle?: (level: number) => StyleProp<ViewStyle>
-    treeData: T[];
+    level?: number;
 };
 
 export default function Pill<T extends DataStructure>(props: PillProps<T>) {
@@ -47,8 +47,8 @@ export default function Pill<T extends DataStructure>(props: PillProps<T>) {
             <ScrollView>
                 <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
                     {props.treeData.map((item, index, array) => {
-                        const lastSelected = getLastIndex(array, props.selectedItemId);
-                        const isSelectedId = props.selectedItemId?.find(s => s === item.id);
+                        const lastSelected = getLastIndex(array, props.selectedItems);
+                        const isSelectedId = props.selectedItems?.find(s => s === item.id);
                         const hasChildren = item.children && item.children.length;
                         const isSelected: boolean = !!(isSelectedId && hasChildren && lastSelected === index);
 
@@ -90,7 +90,7 @@ export default function Pill<T extends DataStructure>(props: PillProps<T>) {
                                             {item.children ? (
                                                 <Pill
                                                     level={props.level ?? level + 1}
-                                                    selectedItemId={props.selectedItemId}
+                                                    selectedItems={props.selectedItems}
                                                     buttonComponent={props.buttonComponent}
                                                     treeData={item.children}
                                                 />