Screenshots

How To Use

Install

npm i react-native-node-view

Import

import NodeView from 'react-native-node-view';

Examples

Simple

<NodeView
	nodesGroups={[
		{ nodes: [{ id: '1', lineTo: ['2', '3'], onPress: id => console.log(id) }] },
		{ nodes: [{ id: '2' }, { id: '3' }] },
	]}
/>

Inside view

<View style={{ width: 300, height: 300, alignSelf: 'center', borderWidth: 1, borderRadius: 10, borderColor: 'gray' }}>
	<NodeView
		nodesGroups={[
			{ nodes: [{ id: '1', lineTo: ['2', '3'], onPress: id => console.log(id) }] },
			{ nodes: [{ id: '2' }, { id: '3' }] },
		]}
	/>
</View>

With delete operation

const [nodesGroups, setNodesGroups] = useState([
	{
		nodes: [{ id: '1', lineTo: ['2', '3'], onPress: (id: string) => console.log(id) }],
	},
	{
		nodes: [{ id: '2' }, { id: '3' }],
	},
]);

return (
	<View
		style={{
			flex: 1,
			justifyContent: 'center',
			backgroundColor: 'white',
		}}>
		<NodeView
			enablePan={true}
			enableZoom={true}
			containerStyle={{ borderWidth: 0 }}
			onDeleteNode={(id, oldState, newState) => setNodesGroups(newState)}
			nodesGroups={nodesGroups}
		/>
	</View>
);

API

nodesGroups Object

| Prop Name | Description | Type | required | | ------------------- | ------------------------------------ | ---------------------------------------------------------------------------- | -------- | | nodesGroups | List of Node objects | Array | true | | containerStyle | Style of the node view container | ViewStyle | false | | lineStyle | Style for each line of the node view | LineProps | false | | onDeleteNode | On deleting node | (id: string, oldState: Array, newState: Array) => void | false | | onLongPress | Listener for node long press | (id: string) => void | false | | maxZoom | Max zoom | number | 1.5 | | minZoom | Min zoom | number | 0.5 | | maxPan | Max movement for pan gesture | number | 100 | | minPan | Min movement for pan gesture | number | -100 | | enablePan | Enable pan gesture | boolean | false | | enableZoom | Enable pinch gesture | boolean | false | | deleteNodeViewStyle | Delete node container style | ViewStyle | false | | deleteNodeLineStyle | Delete node line container style | ViewStyle | false | | enableDeleteMode | Style for each line of the node view | boolean | true |

Node Object

| Prop Name | Description | Type | required | | --------- | ------------------------------------------------ | -------------------- | -------- | | id | The id of the node | string | true | | lineTo | List of all the lines to draw to each node by id | list | false | | child | Custom component to use | JSX.Element | false | | onPress | On press listener | (id: string) => void | false |

Supported

Tested on Android and IOS with expo sdk 41