1.0.20 • Published 2 years ago
react-native-node-view v1.0.20
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
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.11
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.9
3 years ago
1.0.10
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago