React Native Network Graph

Component for displaying connections between entities, in the form of a network graph.

Dependencies

react-native-svg
prop-types

The prop-types library was used for checking the component's PropTypes as recommended by Facebook here. The other library(react-native-svg) was used for drawing the entities.

Installation

npm install react-native-network-graph

Then run

rnpm link

Usage

import NetworkGraph from 'react-native-network-graph';

And then in your component:

  constructor(props) {
    super(props);
    this.state = {
      selectedCircleIndex:0  //this can also be stored in redux store.
    };
  }
 
  onCircleClick(index) {  //or an action can be dispatched as well.
    this.setState({
      selectedCircleIndex:index
    })
  }
 
  render() {
    let connections = {
      "1":[2,4], //node at index 1 is connected to nodes at index 2 and 4 respectively.
      "2":[6,7] //node at index 2 is connected to nodes at index 6 and 7 respectively.
    };
    let circleTitles = ['C1','C2', 'C3', 'C4', 'C5','C6', 'C7', 'C8', 'C9'];
    return (
      <View style={styles.container}>
        <NetworkGraph
          selectedCircleIndex={this.state.selectedCircleIndex} //so that clicks on the circles reflect results in real time.
          circleTitles={circleTitles}
          connections={connections}
          containerHeight={300}
          containerWidth={300}
          centralCircleRadius={30}
          otherCircleLinesColor="black"
          otherCirclesRadius={20}
          distanceFromCenter={100}
          onCircleClick={this.onCircleClick.bind(this)}/>
      </View>
    );
  }

For more content like this, check out my blogs.

Props

Name	PropType	Required	Default Value	Description
selectedCircleIndex	Number	Yes	None	index of the selected circle which is drawn in the center
circleTitles	Array	Yes	None	titles of all the circles.
onCircleClick	Function	Yes	None	function that is invoked on clicking the circle
connections	Object	Yes	None	See the example usage for the data structure of the connections Object.
containerHeight	Number	No	500	height of content container inside which the graph is drawn
containerWidth	Number	No	500	height of content container inside which the graph is drawn
centralCircleRadius	Number	No	60	radius of the selected circle that is to be drawn in the center
otherCirclesRadius	Number	No	35	radius of all the unselected circles.
distanceFromCenter	Number	No	200	distance of other circles from the central one. If this exceeds containerHeight and containerWidth, the graph will be cropped to fit inside the content container view.
selectedCircleLinesColor	String	No	#f59f02	color of the lines emitting from the selected circle
otherCircleLinesColor	String	No	black	color of the lines emitting from unselected circles
centralCircleStrokeColor	String	No	#24a195	border color of the selected circle
centralCircleFillColor	String	No	#18B0A2	background color of the selected circle
centralCircleTextColor	String	No	white	color of the text rendered inside the selected circle
otherCircleTextColor	String	No	white	color of the text rendered inside the unselected circles
otherCircleFillColor	String	No	black	background color of the unselected circles

License

MIT