@itsaladin/react-native-tree-menu NPM

react-native-tree-menu

React Native menu tree for nested menu or nested dropdown with selection box. 👈👈👈💖💖💖✌️✌️✌️

React/React Native App Screenshots

Install Peer Dependencies

Cherag UI uses reaact-native-vector-icons for icons. You must install it and configure it for your project. See its documentation for more information about setting it up for Android, IOS or Web.

Installation

Using Yarn:

yarn add @itsaladin/react-native-tree-menu

Using NPM:

npm install @itsaladin/react-native-tree-menu

Usage

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { MenuTree } from '@itsaladin/react-native-tree-menu';

const dataSet = [
  {
    label: 'Name A 1',
    checked: true,
    id: 1,
    childrenNodes: [
      {
        label: 'Name A 2',
        checked: true,
        id: 2,
        childrenNodes: [
          {
            label: 'Name A 3',
            checked: true,
            id: 3,
          },
        ],
      },
    ],
  },
  {
    label: 'Name B 1',
    checked: true,
    id: 4,
    childrenNodes: [
      {
        label: 'Name B 2',
        checked: true,
        id: 5,
        childrenNodes: [
          {
            label: 'Name B 3',
            checked: true,
            id: 6,
          },
        ],
      },
      {
        label: 'Name B 4',
        checked: true,
        id: 7,
        childrenNodes: [
          {
            label: 'Name B 5',
            checked: true,
            id: 8,
          },
        ],
      },
    ],
  },
];

const App = () => {
  const [data, setData] = useState(dataSet);

  return (
    <View>
      <MenuTree data={data} setData={setData} />
    </View>
  );
};