React Native Network Graph

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

$3

``
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.

$3

`bash
npm install react-native-network-graph
`

Then run
`bash
rnpm link
`

Usage

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

And then in your component:

`jsx
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 (

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)}/>

);
}
``
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