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: [email protected]

License

MIT