react-native-tree-schema

Tree component for React Native apps.

Install

npm install react-native-tree-schema

Architecture

Components

Root Component

import React from 'react';
import { View } from 'react-native';

import { Icon } from 'react-native-elements';
import { Root } from 'react-native-tree-schema';

class App extends React.Component {

  Icon(color= 'red') {
    return (
      <Icon
        color={color}
        name='person'/>
    )
  }
  render() {
    return (
      <View>
        <Root childNodes={[
          { 
            name: 'React Team',
            opened: true ,
            childNodes: [
              { 
                name: 'Team Leader', 
                icon: this.Icon('#c3352c'),
                onLongPress: () => {console.log("React is wonderful :) ")},
                childNodes: [
                  { name: 'Abdurrahman EKER',
                    icon: this.Icon('#45a5c9'), 
                  },
                ]
              },
              {
                name: 'Developers', 
                icon: this.Icon('#f8bc40'),
                childNodes: [
                  { 
                    name: 'Kübra TURAN' ,
                    icon: this.Icon('#45a5c9'),
                  },
                  { 
                    name: 'Reyhan ÜNAL' ,
                    icon: this.Icon('#45a5c9'),
                  },
                  { 
                    name: 'Hamza Kürşat ŞİMŞEK' ,
                    icon: this.Icon('#45a5c9'),
                  },
                  { 
                    name: 'Osman PEKAYDIN' ,
                    icon: this.Icon('#45a5c9'),
                  },
                  { 
                    name: 'Aydın Emre ESEN(Yardımcı Talebe:))' ,
                    icon: this.Icon('#45a5c9'),
                  },
                ]
              },
            ]
          }
        ]}/>
      </View>
    )
  }
}

export default App;

Root props

| prop | default | type | description | | ---- | ---- | ---- | ---- | | name | none | string | Node title | | childNodes | none | array | Node items | | opened | false | boolean | visible nodes of the noden | | icon | none | object | icon of node | | onPress | none | function | Node on press | | onLongPress | none | function | Node on long press |

Child Node Item

| prop | default | type | description | | ---- | ---- | ---- | ---- | | name | none | string | Node title | | childNodes | none | array | Node items | | opened | false | boolean | visible nodes of the noden | | icon | none | object | icon of node | | onPress | none | function | Node on press | | onLongPress | none | function | Node on long press |