react-native-tree-graph

1.0.1 • Public • Published

react-native-tree-graph

An implementation of d3 graph to construct flow chart(d3 topological graph(tree)).

Getting Started

  • Step 1- yarn add react-native-tree-graph react-native-svg
  • Step 2- react-native link react-native-svg
  • Step 3- Build the project and watch the beauty.

import AwesomeHierarchyGraph from 'react-native-tree-graph'

var root = {
  name: "Root",
  id: 1,
  hidden: true,
  children: [
    {
      name: "Node 1",
      id: 16,
      no_parent: true,
      children: [
        {
          name: "Sub Node 1",
          id: 3,
          no_parent: true
        },
        {
          name: "Sub Node 2",
          id: 4,
          no_parent: true
        }
      ]
    }
  ]
}

var siblings = [
  {
    source: {
        id: 3,
        name: "Sub Node 1"
    },
    target: {
        id: 4,
        name: "Sub Node 2"
    }
  }
]

export default class Home extends Component {
  render() {
    return (
        <View style={styles.container}>
        <AwesomeHierarchyGraph
          root = {root}
          siblings = {siblings}
        />
        </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Properties

Name Type
root object
siblings array

Todo list:-

  • Props to handle styling of nodes.

  • Callbacks.

  • Add animation to the graph

  • Add test


Author

Name: LuanLuu Email: luanluuhaui@gmail.com

License

MIT

Package Sidebar

Install

npm i react-native-tree-graph

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

12.1 kB

Total Files

13

Last publish

Collaborators

  • luanluu