react-native-match-sketchpad v1.4.1

Installation

npm install react-native-match-sketchpad --save

How To Use

import { Sketchpad } from "react-native-match-sketchpad";

let sketchData = '{"background":[{"image":"/sap/sports/fnd/appsvc/resources/service/resources.xsjs/SKETCHPAD_BACKGROUND","scaleFactor":1}],"items":[{"y":372,"x":474,"scale":0.15,"image":"/sap/sports/trm/ui/catalog/images/cone_red_big.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape16-rp8x0o0c"},{"image":"/sap/sports/trm/ui/catalog/images/cone_red_big.png","scale":0.15,"x":705,"y":377,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape16-rp8x0o0c-cc706tuh"},{"y":792,"x":472,"scale":0.15,"image":"/sap/sports/trm/ui/catalog/images/cone_red_big.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape16-rp8x0o0c-cc706tuh-ysxzxprs"},{"image":"/sap/sports/trm/ui/catalog/images/cone_red_big.png","scale":0.15,"x":925,"y":793,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape16-rp8x0o0c-cc706tuh-ysxzxprs-kabfxrld"},{"y":380,"x":942,"scale":0.15,"image":"/sap/sports/trm/ui/catalog/images/cone_red_big.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape16-rp8x0o0c-cc706tuh-ysxzxprs-kabfxrld-cvo3x9xf"},{"image":"/sap/sports/trm/ui/catalog/images/cone_red_big.png","scale":0.15,"x":721,"y":791,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape16-rp8x0o0c-cc706tuh-ysxzxprs-kabfxrld-cvo3x9xf-xbgaqnux"},{"y":711,"x":498,"scale":0.3,"image":"/sap/sports/trm/ui/catalog/images/blue4.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape17-6dn1veqr"},{"image":"/sap/sports/trm/ui/catalog/images/blue4.png","scale":0.3,"x":499,"y":440,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape17-6dn1veqr-hm01s8tj"},{"y":447,"x":706,"scale":0.3,"image":"/sap/sports/trm/ui/catalog/images/blue4.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape17-6dn1veqr-hm01s8tj-55te1h4n"},{"image":"/sap/sports/trm/ui/catalog/images/blue4.png","scale":0.3,"x":725,"y":718,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape17-6dn1veqr-hm01s8tj-55te1h4n-c1f26d58"},{"y":439,"x":930,"scale":0.3,"image":"/sap/sports/trm/ui/catalog/images/blue4.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape17-6dn1veqr-hm01s8tj-55te1h4n-c1f26d58-jmaz3phb"},{"y":721,"x":916,"scale":0.3,"image":"/sap/sports/trm/ui/catalog/images/blue4.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape17-6dn1veqr-hm01s8tj-55te1h4n-c1f26d58-8cc0fery"},{"y":504,"x":546,"scale":0.3,"image":"/sap/sports/trm/ui/catalog/images/red5.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape18-170eb1aa"},{"image":"/sap/sports/trm/ui/catalog/images/red5.png","scale":0.3,"x":573,"y":643,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape18-170eb1aa-vo3v3mhi"},{"y":636,"x":768,"scale":0.3,"image":"/sap/sports/trm/ui/catalog/images/red5.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape18-170eb1aa-vo3v3mhi-7kytvtug"},{"image":"/sap/sports/trm/ui/catalog/images/red5.png","scale":0.3,"x":715,"y":545,"z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape18-170eb1aa-vo3v3mhi-7kytvtug-cioad70c"},{"y":715,"x":530,"scale":0.08,"image":"/sap/sports/trm/ui/catalog/images/football.png","z":0,"visible":true,"showSelection":true,"rotation":0,"mirror":false,"className":"sap.sports.ui.controls.sketchpad.SketchpadShape","id":"__shape19-inaltocl"}]}';

let width = Dimension.get("window").width;

let isEditMode = true;

<View>
...
<Sketchpad fullMode={false} data={sketchData} isEditable={isEditMode} width={width} />
...
</View>