@archireport/react-native-svg-draw 1.0.3 → 1.1.0

package/lib/module/components/DrawWithOptions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["React","useCallback","useEffect","useRef","useState","Pressable","View","StyleSheet","Keyboard","DrawCore","DoubleHeadSvg","CircleSvg","SquareSvg","ArrowSvg","TextSvg","CloseSvg","ThrashSvg","SendSvg","styles","create","container","flex","backgroundColor","option","width","height","justifyContent","alignItems","marginHorizontal","toolbar","flexDirection","paddingBottom","paddingTop","paddingHorizontal","drawOptions","sendButton","borderRadius","marginLeft","bottomToolBar","DrawWithOptions","close","takeSnapshot","linearGradient","image","drawRef","drawingMode","setDrawingMode","selectedItem","setSelectedItem","onPressSend","current","showToolbar","setShowToolbar","sudDidHide","addListener","sudDidShow","event","endCoordinates","remove","deleteSelectedItem"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,EAAgDC,QAAhD,QAAgE,OAAhE;AACA,SACEC,SADF,EAEEC,IAFF,EAGEC,UAHF,EAOEC,QAPF,QAQO,cARP;AASA,OAAOC,QAAP,MAAqB,aAArB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,OAAP,MAAoB,WAApB;AAEA,MAAMC,MAAM,GAAGX,UAAU,CAACY,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,eAAe,EAAE;AAA5B,GADoB;AAE/BC,EAAAA,MAAM,EAAE;AACNC,IAAAA,KAAK,EAAE,EADD;AAENC,IAAAA,MAAM,EAAE,EAFF;AAGNC,IAAAA,cAAc,EAAE,QAHV;AAINC,IAAAA,UAAU,EAAE,QAJN;AAKNC,IAAAA,gBAAgB,EAAE;AALZ,GAFuB;AAS/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,aAAa,EAAE,KADR;AAEPH,IAAAA,UAAU,EAAE,QAFL;AAGPD,IAAAA,cAAc,EAAE,eAHT;AAIPK,IAAAA,aAAa,EAAE,EAJR;AAKPC,IAAAA,UAAU,EAAE,EALL;AAMPC,IAAAA,iBAAiB,EAAE;AANZ,GATsB;AAiB/BC,EAAAA,WAAW,EAAE;AACXJ,IAAAA,aAAa,EAAE,KADJ;AAEXH,IAAAA,UAAU,EAAE;AAFD,GAjBkB;AAqB/BQ,EAAAA,UAAU,EAAE;AACVb,IAAAA,eAAe,EAAE,SADP;AAEVE,IAAAA,KAAK,EAAE,EAFG;AAGVC,IAAAA,MAAM,EAAE,EAHE;AAIVW,IAAAA,YAAY,EAAE,EAJJ;AAKVT,IAAAA,UAAU,EAAE,QALF;AAMVD,IAAAA,cAAc,EAAE,QANN;AAOVW,IAAAA,UAAU,EAAE;AAPF,GArBmB;AA8B/BC,EAAAA,aAAa,EAAE;AACbR,IAAAA,aAAa,EAAE,KADF;AAEbJ,IAAAA,cAAc,EAAE,UAFH;AAGbC,IAAAA,UAAU,EAAE,QAHC;AAIbI,IAAAA,aAAa,EAAE,EAJF;AAKbC,IAAAA,UAAU,EAAE,EALC;AAMbC,IAAAA,iBAAiB,EAAE;AANN;AA9BgB,CAAlB,CAAf;AAwCA,eAAe,SAASM,eAAT,CAAyB;AACtCC,EAAAA,KADsC;AAEtCC,EAAAA,YAFsC;AAGtCC,EAAAA,cAHsC;AAItCC,EAAAA;AAJsC,CAAzB,EAUZ;AACD,QAAMC,OAAO,GAAGzC,MAAM,CAAgB,IAAhB,CAAtB;AAEA,QAAM,CAAC0C,WAAD,EAAcC,cAAd,IAAgC1C,QAAQ,CAAe,SAAf,CAA9C;AAEA,QAAM,CAAC2C,YAAD,EAAeC,eAAf,IAAkC5C,QAAQ,CAAC,KAAD,CAAhD;AAEA,QAAM6C,WAAW,GAAGhD,WAAW,CAAC,MAAM;AACpC,QAAI2C,OAAO,CAACM,OAAZ,EAAqB;AACnBT,MAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGG,OAAO,CAACM,OAAR,CAAgBT,YAAhB,EAAH,CAAZ;AACD;AACF,GAJ8B,EAI5B,CAACA,YAAD,CAJ4B,CAA/B;AAMA,QAAM,CAACU,WAAD,EAAcC,cAAd,IAAgChD,QAAQ,CAAC,IAAD,CAA9C;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMmD,UAAU,GAAG7C,QAAQ,CAAC8C,WAAT,CAAqB,iBAArB,EAAwC,MAAM;AAC/DF,MAAAA,cAAc,CAAC,IAAD,CAAd;AACD,KAFkB,CAAnB;AAIA,UAAMG,UAAU,GAAG/C,QAAQ,CAAC8C,WAAT,CAAqB,iBAArB,EAAyCE,KAAD,IAAW;AACpE;AACA,UAAIA,KAAK,CAACC,cAAN,CAAqBhC,MAArB,GAA8B,GAAlC,EAAuC;AACrC2B,QAAAA,cAAc,CAAC,KAAD,CAAd;AACD;AACF,KALkB,CAAnB,CALc,CAYd;;AACA,WAAO,MAAM;AACXG,MAAAA,UAAU,CAACG,MAAX;AACAL,MAAAA,UAAU,CAACK,MAAX;AACD,KAHD;AAID,GAjBQ,EAiBN,EAjBM,CAAT;AAmBA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAExC,MAAM,CAACE;AAApB,kBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEF,MAAM,CAACW;AAApB,kBACE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEX,MAAM,CAACK,MAAzB;AAAiC,IAAA,OAAO,EAAEiB;AAA1C,kBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAE,EAAlB;AAAsB,IAAA,KAAK,EAAE,EAA7B;AAAiC,IAAA,IAAI,EAAC;AAAtC,IADF,CADF,eAIE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEtB,MAAM,CAACgB;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAEhB,MAAM,CAACK,MADhB;AAEE,IAAA,OAAO,EAAE,MAAM;AACbuB,MAAAA,cAAc,CAAC,YAAD,CAAd;AACD;AAJH,kBAME,oBAAC,aAAD;AACE,IAAA,MAAM,EAAE,EADV;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,IAAI,EAAC,SAHP;AAIE,IAAA,OAAO,EAAED,WAAW,KAAK,YAAhB,GAA+B,CAA/B,GAAmC;AAJ9C,IANF,CADF,eAcE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE3B,MAAM,CAACK,MADhB;AAEE,IAAA,OAAO,EAAE,MAAM;AACbuB,MAAAA,cAAc,CAAC,YAAD,CAAd;AACD;AAJH,kBAME,oBAAC,QAAD;AACE,IAAA,MAAM,EAAE,EADV;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,IAAI,EAAC,SAHP;AAIE,IAAA,OAAO,EAAED,WAAW,KAAK,YAAhB,GAA+B,CAA/B,GAAmC;AAJ9C,IANF,CAdF,eA2BE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE3B,MAAM,CAACK,MADhB;AAEE,IAAA,OAAO,EAAE,MAAM;AACbuB,MAAAA,cAAc,CAAC,WAAD,CAAd;AACD;AAJH,kBAME,oBAAC,SAAD;AACE,IAAA,MAAM,EAAE,EADV;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,IAAI,EAAC,SAHP;AAIE,IAAA,OAAO,EAAED,WAAW,KAAK,WAAhB,GAA8B,CAA9B,GAAkC;AAJ7C,IANF,CA3BF,eAwCE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE3B,MAAM,CAACK,MADhB;AAEE,IAAA,OAAO,EAAE,MAAM;AACbuB,MAAAA,cAAc,CAAC,SAAD,CAAd;AACD;AAJH,kBAME,oBAAC,SAAD;AACE,IAAA,IAAI,EAAC,SADP;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,KAAK,EAAE,EAHT;AAIE,IAAA,OAAO,EAAED,WAAW,KAAK,SAAhB,GAA4B,CAA5B,GAAgC;AAJ3C,IANF,CAxCF,eAsDE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE3B,MAAM,CAACK,MADhB;AAEE,IAAA,OAAO,EAAE,MAAM;AACbuB,MAAAA,cAAc,CAAC,MAAD,CAAd;AACD;AAJH,kBAME,oBAAC,OAAD;AACE,IAAA,MAAM,EAAE,EADV;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,IAAI,EAAC,SAHP;AAIE,IAAA,OAAO,EAAED,WAAW,KAAK,MAAhB,GAAyB,CAAzB,GAA6B;AAJxC,IANF,CAtDF,CAJF,CADF,eA0EE,oBAAC,QAAD;AACE,IAAA,GAAG,EAAED,OADP;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,KAAK,EAAEF,KAHT;AAIE,IAAA,cAAc,EAAED,cAJlB;AAKE,IAAA,iBAAiB,EAAEM;AALrB,IA1EF,EAkFGG,WAAW,gBACV,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjC,MAAM,CAACoB;AAApB,KACGS,YAAY,gBACX,oBAAC,SAAD;AACE,IAAA,KAAK,EAAE7B,MAAM,CAACK,MADhB;AAEE,IAAA,OAAO,EAAE,MAAM;AAAA;;AACb,0BAAAqB,OAAO,CAACM,OAAR,sEAAiBS,kBAAjB;AACD;AAJH,kBAME,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAE,EAAlB;AAAsB,IAAA,MAAM,EAAE,EAA9B;AAAkC,IAAA,IAAI,EAAC;AAAvC,IANF,CADW,GAST,IAVN,eAWE,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEzC,MAAM,CAACiB,UAAzB;AAAqC,IAAA,OAAO,EAAEc;AAA9C,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,MAAd;AAAqB,IAAA,KAAK,EAAE,EAA5B;AAAgC,IAAA,MAAM,EAAE;AAAxC,IADF,CAXF,CADU,GAgBR,IAlGN,CADF;AAsGD","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Pressable,\n  View,\n  StyleSheet,\n  ViewProps,\n  ImageRequireSource,\n  ImageURISource,\n  Keyboard,\n} from 'react-native';\nimport DrawCore from '../DrawCore';\nimport type { DrawItemType, DrawCoreProps } from '../../types';\nimport DoubleHeadSvg from './DoubleHeadSvg';\nimport CircleSvg from './CircleSvg';\nimport SquareSvg from './SquareSvg';\nimport ArrowSvg from './ArrowSvg';\nimport TextSvg from './TextSvg';\nimport CloseSvg from './CloseSvg';\nimport ThrashSvg from './ThrashSvg';\nimport SendSvg from './SendSvg';\n\nconst styles = StyleSheet.create({\n  container: { flex: 1, backgroundColor: '#000000' },\n  option: {\n    width: 30,\n    height: 30,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginHorizontal: 4,\n  },\n  toolbar: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    paddingBottom: 30,\n    paddingTop: 15,\n    paddingHorizontal: 15,\n  },\n  drawOptions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  sendButton: {\n    backgroundColor: '#3a6cff',\n    width: 48,\n    height: 48,\n    borderRadius: 24,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 20,\n  },\n  bottomToolBar: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    paddingBottom: 30,\n    paddingTop: 30,\n    paddingHorizontal: 20,\n  },\n});\n\nexport default function DrawWithOptions({\n  close,\n  takeSnapshot,\n  linearGradient,\n  image,\n}: {\n  close?: () => void;\n  takeSnapshot?: (snap: Promise<string | undefined>) => void;\n  linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n  image?: ImageRequireSource | ImageURISource;\n}) {\n  const drawRef = useRef<DrawCoreProps>(null);\n\n  const [drawingMode, setDrawingMode] = useState<DrawItemType>('ellipse');\n\n  const [selectedItem, setSelectedItem] = useState(false);\n\n  const onPressSend = useCallback(() => {\n    if (drawRef.current) {\n      takeSnapshot?.(drawRef.current.takeSnapshot());\n    }\n  }, [takeSnapshot]);\n\n  const [showToolbar, setShowToolbar] = useState(true);\n\n  useEffect(() => {\n    const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {\n      setShowToolbar(true);\n    });\n\n    const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {\n      // avoid events triggered by InputAccessoryView\n      if (event.endCoordinates.height > 100) {\n        setShowToolbar(false);\n      }\n    });\n\n    // cleanup function\n    return () => {\n      sudDidShow.remove();\n      sudDidHide.remove();\n    };\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.toolbar}>\n        <Pressable style={styles.option} onPress={close}>\n          <CloseSvg height={20} width={20} fill=\"#ffffff\" />\n        </Pressable>\n        <View style={styles.drawOptions}>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('doubleHead');\n            }}\n          >\n            <DoubleHeadSvg\n              height={20}\n              width={20}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'doubleHead' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('singleHead');\n            }}\n          >\n            <ArrowSvg\n              height={23}\n              width={23}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'singleHead' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('rectangle');\n            }}\n          >\n            <SquareSvg\n              height={27}\n              width={27}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'rectangle' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('ellipse');\n            }}\n          >\n            <CircleSvg\n              fill=\"#ffffff\"\n              height={26}\n              width={26}\n              opacity={drawingMode === 'ellipse' ? 1 : 0.5}\n            />\n          </Pressable>\n\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('text');\n            }}\n          >\n            <TextSvg\n              height={28}\n              width={28}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'text' ? 1 : 0.5}\n            />\n          </Pressable>\n        </View>\n      </View>\n      <DrawCore\n        ref={drawRef}\n        drawingMode={drawingMode}\n        image={image}\n        linearGradient={linearGradient}\n        onSelectionChange={setSelectedItem}\n      />\n\n      {showToolbar ? (\n        <View style={styles.bottomToolBar}>\n          {selectedItem ? (\n            <Pressable\n              style={styles.option}\n              onPress={() => {\n                drawRef.current?.deleteSelectedItem();\n              }}\n            >\n              <ThrashSvg width={28} height={28} fill=\"white\" />\n            </Pressable>\n          ) : null}\n          <Pressable style={styles.sendButton} onPress={onPressSend}>\n            <SendSvg fill=\"#fff\" width={20} height={20} />\n          </Pressable>\n        </View>\n      ) : null}\n    </View>\n  );\n}\n"]}
+{"version":3,"sources":["index.tsx"],"names":["React","useCallback","useEffect","useRef","useState","Pressable","View","StyleSheet","Keyboard","DrawCore","PenSvg","DoubleHeadSvg","CircleSvg","SquareSvg","ArrowSvg","TextSvg","CloseSvg","ThrashSvg","SendSvg","CancelSvg","styles","create","container","flex","backgroundColor","option","width","height","justifyContent","alignItems","marginHorizontal","toolbar","flexDirection","paddingBottom","paddingTop","paddingHorizontal","drawOptions","sendButton","borderRadius","marginLeft","bottomToolBar","DrawWithOptions","close","takeSnapshot","linearGradient","image","drawRef","drawingMode","setDrawingMode","selectedItem","setSelectedItem","cancelEnabled","setCancelEnabled","onPressSend","current","showToolbar","setShowToolbar","sudDidHide","addListener","sudDidShow","event","endCoordinates","remove","deleteSelectedItem","cancelLastAction"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Pressable,\n  View,\n  StyleSheet,\n  ViewProps,\n  ImageRequireSource,\n  ImageURISource,\n  Keyboard,\n} from 'react-native';\nimport DrawCore from '../DrawCore';\nimport type { DrawItemType, DrawCoreProps } from '../../types';\nimport PenSvg from './PenSvg';\nimport DoubleHeadSvg from './DoubleHeadSvg';\nimport CircleSvg from './CircleSvg';\nimport SquareSvg from './SquareSvg';\nimport ArrowSvg from './ArrowSvg';\nimport TextSvg from './TextSvg';\nimport CloseSvg from './CloseSvg';\nimport ThrashSvg from './ThrashSvg';\nimport SendSvg from './SendSvg';\nimport CancelSvg from './CancelSvg';\n\nconst styles = StyleSheet.create({\n  container: { flex: 1, backgroundColor: '#000000' },\n  option: {\n    width: 30,\n    height: 30,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginHorizontal: 4,\n  },\n  toolbar: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    paddingBottom: 30,\n    paddingTop: 15,\n    paddingHorizontal: 15,\n  },\n  drawOptions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  sendButton: {\n    backgroundColor: '#3a6cff',\n    width: 48,\n    height: 48,\n    borderRadius: 24,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 20,\n  },\n  bottomToolBar: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    paddingBottom: 30,\n    paddingTop: 30,\n    paddingHorizontal: 20,\n  },\n});\n\nexport default function DrawWithOptions({\n  close,\n  takeSnapshot,\n  linearGradient,\n  image,\n}: {\n  close?: () => void;\n  takeSnapshot?: (snap: Promise<string | undefined>) => void;\n  linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n  image?: ImageRequireSource | ImageURISource;\n}) {\n  const drawRef = useRef<DrawCoreProps>(null);\n\n  const [drawingMode, setDrawingMode] = useState<DrawItemType>('ellipse');\n\n  const [selectedItem, setSelectedItem] = useState(false);\n\n  const [cancelEnabled, setCancelEnabled] = useState(false);\n\n  const onPressSend = useCallback(() => {\n    if (drawRef.current) {\n      takeSnapshot?.(drawRef.current.takeSnapshot());\n    }\n  }, [takeSnapshot]);\n\n  const [showToolbar, setShowToolbar] = useState(true);\n\n  useEffect(() => {\n    const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {\n      setShowToolbar(true);\n    });\n\n    const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {\n      // avoid events triggered by InputAccessoryView\n      if (event.endCoordinates.height > 100) {\n        setShowToolbar(false);\n      }\n    });\n\n    // cleanup function\n    return () => {\n      sudDidShow.remove();\n      sudDidHide.remove();\n    };\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.toolbar}>\n        <Pressable style={styles.option} onPress={close}>\n          <CloseSvg height={20} width={20} fill=\"#ffffff\" />\n        </Pressable>\n        <View style={styles.drawOptions}>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('pen');\n            }}\n          >\n            <PenSvg\n              height={23}\n              width={22}\n              stroke=\"#ffffff\"\n              strokeWidth=\"2\"\n              opacity={drawingMode === 'pen' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('doubleHead');\n            }}\n          >\n            <DoubleHeadSvg\n              height={20}\n              width={20}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'doubleHead' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('singleHead');\n            }}\n          >\n            <ArrowSvg\n              height={23}\n              width={23}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'singleHead' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('rectangle');\n            }}\n          >\n            <SquareSvg\n              height={27}\n              width={27}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'rectangle' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('ellipse');\n            }}\n          >\n            <CircleSvg\n              fill=\"#ffffff\"\n              height={26}\n              width={26}\n              opacity={drawingMode === 'ellipse' ? 1 : 0.5}\n            />\n          </Pressable>\n\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('text');\n            }}\n          >\n            <TextSvg\n              height={28}\n              width={28}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'text' ? 1 : 0.5}\n            />\n          </Pressable>\n        </View>\n      </View>\n      <DrawCore\n        ref={drawRef}\n        drawingMode={drawingMode}\n        image={image}\n        linearGradient={linearGradient}\n        onSelectionChange={setSelectedItem}\n        onCancelChange={setCancelEnabled}\n      />\n\n      {showToolbar ? (\n        <View style={styles.bottomToolBar}>\n          {selectedItem ? (\n            <Pressable\n              style={styles.option}\n              onPress={() => {\n                drawRef.current?.deleteSelectedItem();\n              }}\n            >\n              <ThrashSvg width={28} height={28} fill=\"white\" />\n            </Pressable>\n          ) : null}\n          {cancelEnabled ? (\n            <Pressable\n              style={styles.option}\n              onPress={() => {\n                drawRef.current?.cancelLastAction();\n              }}\n            >\n              <CancelSvg\n                width={27}\n                height={27}\n                stroke=\"#ffffff\"\n                strokeWidth={2}\n              />\n            </Pressable>\n          ) : null}\n          <Pressable style={styles.sendButton} onPress={onPressSend}>\n            <SendSvg fill=\"#fff\" width={20} height={20} />\n          </Pressable>\n        </View>\n      ) : null}\n    </View>\n  );\n}\n"]}

package/lib/typescript/components/DrawCore/ColorSlider.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import { ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import type { hslColor } from '../../types';
-declare const ColorSlider: ({ color, linearGradient: LinearGradient, }: {
+declare const ColorSlider: ({ color, linearGradient: LinearGradient, onColorChange, }: {
     color: Animated.SharedValue<hslColor>;
     linearGradient: React.ComponentType<{
         colors: any[];
     } & ViewProps>;
+    onColorChange: () => void;
 }) => JSX.Element;
 export default ColorSlider;

package/lib/typescript/components/DrawCore/CurrentAnimatedItem.d.ts

@@ -1,5 +1,6 @@
 import Animated from 'react-native-reanimated';
-import type { DrawItem } from '../../types';
+import type { DrawItem, Point } from '../../types';
+export declare const pointsToPath: (points: Point[]) => string;
 export default function CurrentAnimatedItem({ currentItem, }: {
     currentItem: Animated.SharedValue<DrawItem | null>;
 }): JSX.Element;

package/lib/typescript/components/DrawCore/StrokeSlider.d.ts

@@ -1,7 +1,8 @@
 import Animated from 'react-native-reanimated';
-declare const StrokeSlider: ({ minValue, maxValue, stroke, }: {
+declare const StrokeSlider: ({ minValue, maxValue, stroke, onStrokeChange, }: {
     minValue: number;
     maxValue: number;
     stroke: Animated.SharedValue<number>;
+    onStrokeChange: () => void;
 }) => JSX.Element;
 export default StrokeSlider;

package/lib/typescript/components/DrawCore/index.d.ts

@@ -8,5 +8,6 @@ declare const DrawCore: React.ForwardRefExoticComponent<{
         colors: any[];
     } & ViewProps>;
     onSelectionChange?: ((selected: boolean) => void) | undefined;
+    onCancelChange?: ((cancel: boolean) => void) | undefined;
 } & React.RefAttributes<DrawCoreProps>>;
 export default DrawCore;

package/lib/typescript/components/DrawWithOptions/CancelSvg.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export default function CancelSvg(props: SvgProps): JSX.Element;

package/lib/typescript/components/DrawWithOptions/PenSvg.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export default function PenSvg(props: SvgProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archireport/react-native-svg-draw",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "React Native drawing component based on SVG with editable annotations",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -65,12 +65,12 @@
     "react": "17.0.2",
     "react-native": "^0.68.2",
     "react-native-builder-bob": "^0.18.2",
-    "react-native-gesture-handler": "^2.4.2",
-    "react-native-reanimated": "^2.8.0",
+    "react-native-gesture-handler": "^2.5.0",
+    "react-native-reanimated": "^2.9.1",
     "react-native-svg": "^12.3.0",
-    "react-native-view-shot": "^3.1.2",
+    "react-native-view-shot": "^3.3.0",
     "release-it": "^15.0.0",
-    "typescript": "^4.4.0"
+    "typescript": "^4.6.4"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/DrawCore/ColorSlider.tsx

@@ -6,6 +6,7 @@ import {
   PanGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
 import Animated, {
+  runOnJS,
   useAnimatedGestureHandler,
   useAnimatedStyle,
   useDerivedValue,
@@ -55,9 +56,11 @@ const styles = StyleSheet.create({
 const ColorSlider = ({
   color,
   linearGradient: LinearGradient,
+  onColorChange,
 }: {
   color: Animated.SharedValue<hslColor>;
   linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;
+  onColorChange: () => void;
 }) => {
   const sliderHeight = useSharedValue(0);
 
@@ -119,7 +122,9 @@ const ColorSlider = ({
           }, 100%, 50%)`;
         }
       },
-      onEnd: () => {},
+      onEnd: () => {
+        runOnJS(onColorChange)();
+      },
     },
     []
   );

package/src/components/DrawCore/CurrentAnimatedItem.tsx

@@ -11,12 +11,62 @@ const AnimatedRectangle = Animated.createAnimatedComponent(Rect);
 
 const AnimatedLine = Animated.createAnimatedComponent(Line);
 
-const pointsToPath = (points: Point[]) => {
+// properties of a line
+const line = (pointA: Point, pointB: Point) => {
+  'worklet';
+  const lengthX = pointB.x - pointA.x;
+  const lengthY = pointB.y - pointA.y;
+  return {
+    length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+    angle: Math.atan2(lengthY, lengthX),
+  };
+};
+
+// position of a control point
+const controlPoint = (
+  current: Point,
+  previous: Point,
+  next: Point,
+  reverse: boolean
+): Point => {
+  'worklet';
+  // When 'current' is the first or last point of the array, 'previous' or 'next' don't exist --> replace with 'current'
+  const p = previous || current;
+  const n = next || current;
+  const smoothing = 0.2;
+  // Properties of the opposed-line
+  const o = line(p, n);
+  // If is end-control-point, add PI to the angle to go backward
+  const angle = o.angle + (reverse ? Math.PI : 0);
+  const length = o.length * smoothing;
+
+  const x = current.x + Math.cos(angle) * length;
+  const y = current.y + Math.sin(angle) * length;
+
+  return { x: x, y: y };
+};
+
+// create the bezier curve command
+const bezierCommand = (point: Point, i: number, a: Point[]) => {
+  'worklet';
+  const endPoint: Point = controlPoint(point, a[i - 1], a[i + 1], true);
+  if (i === 1) {
+    const startPoint: Point = controlPoint(a[i - 1], a[i - 2], point, true);
+    return `C ${startPoint.x},${startPoint.y} ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+  } else {
+    return `S ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+  }
+};
+
+export const pointsToPath = (points: Point[]) => {
   'worklet';
   return points.length > 0
     ? points.reduce(
-        (acc, point) => `${acc} L ${point.x},${point.y}`,
-        `M ${points[0].x},${points[0].y}`
+        (acc, point, i, a) =>
+          i === 0
+            ? `M ${point.x},${point.y}`
+            : `${acc} ${bezierCommand(point, i, a)}`,
+        ''
       )
     : '';
 };
@@ -158,12 +208,13 @@ export default function CurrentAnimatedItem({
   }, [currentItem.value]);
 
   const penAnimatedProps = useAnimatedProps(() => {
+    const d = pointsToPath(
+      currentItem.value?.type === 'pen'
+        ? currentItem.value.data
+        : [{ x: -10, y: -10 }]
+    );
     return {
-      d: pointsToPath(
-        currentItem.value?.type === 'pen'
-          ? currentItem.value.data
-          : [{ x: -10, y: -10 }]
-      ),
+      d: d,
       strokeWidth:
         currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,
       stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),

package/src/components/DrawCore/DrawPad.tsx

@@ -78,11 +78,11 @@ const DrawPad = ({
           </Marker>
         </Defs>
 
-        <CurrentAnimatedItem currentItem={currentItem} />
-
         {doneItems.map((item, index) => (
           <Item key={index} item={item} onPress={onPressItem(item, index)} />
         ))}
+
+        <CurrentAnimatedItem currentItem={currentItem} />
       </Svg>
 
       <CurrentAnimatedText

package/src/components/DrawCore/Item.tsx

@@ -1,16 +1,8 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { G, Line, Ellipse, Rect, Path, ForeignObject } from 'react-native-svg';
-import type { DrawItem, Point } from '../../types';
-
-const transformPointsToPath = (points: Point[]) => {
-  return points.length > 0
-    ? points.reduce(
-        (acc, point) => `${acc} L ${point.x},${point.y}`,
-        `M ${points[0].x},${points[0].y}`
-      )
-    : '';
-};
+import type { DrawItem } from '../../types';
+import { pointsToPath } from './CurrentAnimatedItem';
 
 const styles = StyleSheet.create({
   textZone: {
@@ -83,7 +75,7 @@ export default function Item({
     case 'pen':
       return (
         <Path
-          d={transformPointsToPath(item.data)}
+          d={pointsToPath(item.data)}
           stroke={item.color}
           fill="none"
           strokeWidth={item.strokeWidth}

package/src/components/DrawCore/StrokeSlider.tsx

@@ -46,10 +46,12 @@ const StrokeSlider = ({
   minValue,
   maxValue,
   stroke,
+  onStrokeChange,
 }: {
   minValue: number;
   maxValue: number;
   stroke: Animated.SharedValue<number>;
+  onStrokeChange: () => void;
 }) => {
   const sliderHeight = useSharedValue(0);
 
@@ -81,7 +83,9 @@ const StrokeSlider = ({
           )
         );
       },
-      onEnd: () => {},
+      onEnd: () => {
+        runOnJS(onStrokeChange)();
+      },
     },
     []
   );