Unable to draw anything on Canvas.

[mhumza37dev]

On what kind of device are you using this library?

• [X] Android
• [X] iOS
• [ ] Web

Environment

- OS:macOS (Monterey)
- react-native:0.66.0
- @benjeau/react-native-draw:0.7.0

Current Behavior

I have followed every installation steps mentioned in the docs, still not been able to draw anything on the canvas. Everytime i start dragging to draw a shape or line it shows me a dot where i start to drag from and then the dot vanishes.

I have also put gesture handler import on top or app.js and index.js.

@BenJeau can you help me out ?

https://user-images.githubusercontent.com/68570316/181069898-b994b9e1-8073-4ebd-ba52-9b77ef46527c.mp4

Expected Behavior

I need to be able to draw on Canvas.

Steps To Reproduce

I just simple installed the package following the documentation and sarted the project from the example project. That's all.

Anything else?

Here is my Component :

import React, {useRef, useState} from 'react'; import {Animated, StyleSheet, View} from 'react-native'; import {Canvas, CanvasRef, DrawingTool} from '@benjeau/react-native-draw';

import { BrushProperties, CanvasControls, DEFAULT_COLORS, } from '@benjeau/react-native-draw-extras'; import {height, SIZES, width} from '../constants';

export default React.forwardRef((props, ref) => { // const canvasRef = useRef(null); console.log('props ======= >>>>>> ', props); const [color, setColor] = useState(DEFAULT_COLORS[0][0][0]); const [thickness, setThickness] = useState(5); const [opacity, setOpacity] = useState(1); const [tool, setTool] = useState(DrawingTool.Brush); const [visibleBrushProperties, setVisibleBrushProperties] = useState(false);

const handleUndo = () => { ref.current?.undo(); };

const handleClear = () => { ref.current?.clear(); };

const handleToggleEraser = () => { setTool(prev => prev === DrawingTool.Brush ? DrawingTool.Eraser : DrawingTool.Brush, ); };

const [overlayOpacity] = useState(new Animated.Value(0));

const handleToggleBrushProperties = () => { if (!visibleBrushProperties) { setVisibleBrushProperties(true);

  Animated.timing(overlayOpacity, {
    toValue: 1,
    duration: 350,
    useNativeDriver: true,
  }).start();
} else {
  Animated.timing(overlayOpacity, {
    toValue: 0,
    duration: 350,
    useNativeDriver: true,
  }).start(() => {
    setVisibleBrushProperties(false);
  });
}

};

return ( <> <Canvas ref={ref} height={height 0.8} width={width 0.97} color={color} thickness={thickness} opacity={opacity} tool={tool} style={{ borderBottomWidth: StyleSheet.hairlineWidth, borderColor: '#ccc', alignSelf: 'center', }} />

{!props.toolsVisible && ( )} {!props.toolsVisible && visibleBrushProperties && ( )}

</>

); });

[batuayhan]

same

[rhalaly]

Same. In android it shows Can't find variable: t in the logs

[ongdetui]

same [ReferenceError: Can't find variable: t]

[batuayhan]

I solved. Go node_modules>@luncheon>simplify-svg-path>index.min.js. Change class name "t" to "T" and return new t to return new T It worked for me.

updated index.min.js at the path described above class T { constructor(t, e) { this.x=t, this.y=e } t() { return new T(-this.x, -this.y) } o(t=1) { return this.i(t/(this.h()||1/0)) } l(e) { return new T(this.x+e.x, this.y+e.y) } u(e) { return new T(this.x-e.x, this.y-e.y) } i(e) { return new T(this.xe, this.ye) } _(t) { return this.xt.x+this.yt.y } h() { return Math.sqrt(this.xthis.x+this.ythis.y) } M(t) { const e=this.x-t.x, r=this.y-t.y; return Math.sqrt(ee+rr) } }

class e { constructor(t, e) { this.g=t, this.v=e } }

const r=(t, e, i, c, u, f, a)=> { if(u-c==1) { const r=t[c], s=t[u], o=r.M(s)/3; return void n(e, [r, r.l(f.o(o)), s.l(a.o(o)), s]) } const w=h(t, c, u); let , d=Math.max(i, i*i), M= !0; for(let r=0; r<=4; r++) { const r=s(t, c, u, w, f, a), h=l(t, c, u, r, w); if(h.error<i&&M)return void n(e, r); if(=h.index, h.error>=d)break; M=o(t, c, u, w, r), d=h.error } const g=t[-1].u(t[+1]); r(t, e, i, c, , f, g), r(t, e, i, , u, g.t(), a) }

, n=(t, r)=> { t[t.length-1].m=r[1].u(r[0]), t.push(new e(r[3], r[2].u(r[3]))) }

, s=(t, e, r, n, s, o)=> { const i=1e-12, c=Math.abs, h=t[e], l=t[r], u=[[0, 0], [0, 0]], f=[0, 0]; for(let i=0, c=r-e+1; i<c; i++) { const r=n[i], c=1-r, a=3rc, w=ccc, =ac, d=ar, M=rrr, g=s.o(), v=o.o(d), b=t[e+i].u(h.i(w+)).u(l.i(d+M)); u[0][0]+=g.(g), u[0][1]+=g.(v), u[1][0]=u[0][1], u[1][1]+=v.(v), f[0]+=g.(b), f[1]+=v.(b) } const a=u[0][0]u[1][1]-u[1][0]u[0][1]; let w, ; if(c(a)>i) { const t=u[0][0]f[1]-u[1][0]f[0]; w=(f[0]u[1][1]-f[1]u[0][1])/a, =t/a } else { const t=u[0][0]+u[0][1], e=u[1][0]+u[1][1]; w==c(t)>i?f[0]/t: c(e)>i?f[1]/e:0 } const d=l.M(h), M=i*d; let g, v; if(w<M||<M)w==d/3; else { const t=l.u(h); g=s.o(w), v=o.o(), g.(t)-v.(t)>d*d&&(w==d/3, g=v=null) } return[h, h.l(g||s.o(w)), l.l(v||o.o()), l] }

, o=(t, e, r, n, s)=> { for(let o=e; o<=r; o++)n[o-e]=i(s, t[o], n[o-e]); for(let t=1, e=n.length; t<e; t++)if(n[t]<=n[t-1])return !1; return !0 }

, i=(t, e, r)=> { const n=[], s=[]; for(let e=0; e<=2; e++)n[e]=t[e+1].u(t[e]).i(3); for(let t=0; t<=1; t++)s[t]=n[t+1].u(n[t]).i(2); const o=c(3, t, r), i=c(2, n, r), h=c(1, s, r), l=o.u(e), u=i.(i)+l.(h); return(f=u)>=-112e-18&&f<=112e-18?r: r-l._(i)/u; var f }

, c=(t, e, r)=> { const n=e.slice(); for(let e=1; e<=t; e++)for(let s=0; s<=t-e; s++)n[s]=n[s].i(1-r).l(n[s+1].i(r)); return n[0] }

, h=(t, e, r)=> { const n=[0]; for(let s=e+1; s<=r; s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]); for(let t=1, s=r-e; t<=s; t++)n[t]/=n[s]; return n }

, l=(t, e, r, n, s)=> { let o=Math.floor((r-e+1)/2), i=0; for(let h=e+1; h<r; h++) { const r=c(3, n, s[h-e]).u(t[h]), l=r.xr.x+r.yr.y; l>=i&&(i=l, o=h) } return { error: i, index:o } }

; export default(n, s= {}

)=>0===n.length?"":((t, e, r)=> { const n=t.length, s=10*r, o=r<16?t=>Math.round(ts)/s: t=>t, i=(t, e)=>o(t)+","+o(e); let c, h, l, u, f= !0; const a=[], w=(t, e)=> { const r=t.g.x, n=t.g.y; if(f)a.push("M"+i(r, n)), f= !1; else { const s=r+(t.v?.x??0), f=n+(t.v?.y??0); if(s===r&&f===n&&l===c&&u===h) { if( !e) { const t=r-c, e=n-h; a.push(0===t?"v"+o(e): 0===e?"h"+o(t):"l"+i(t, e)) } } else a.push("c"+i(l-c, u-h)+" "+i(s-c, f-h)+" "+i(r-c, n-h)) } c=r, h=n, l=r+(t.m?.x??0), u=n+(t.m?.y??0) } ; if( !n)return""; for(let e=0; e<n; e++)w(t[e]); return e&&n>0&&(w(t[0], !0), a.push("z")), a.join("") }

)(((t, n, s)=> { n&&(t.unshift(t[t.length-1]), t.push(t[1])); const o=t.length; if(0===o)return[]; const i=[new e(t[0])]; return r(t, i, s, 0, o-1, t[1].u(t[0]), t[o-2].u(t[o-1])), n&&(i.shift(), i.pop()), i }

)(n.map("number"==typeof n[0].x?e=>new T(e.x, e.y):e=>new T(e[0], e[1])), s.closed, s.tolerance??2.5), s.closed, s.precision??5);

[mhumza37dev]

I solved. Go node_modules>@luncheon>simplify-svg-path>index.min.js. Change class name "t" to "T" and return new t to return new T It worked for me.

updated index.min.js at the path described above class T { constructor(t, e) { this.x=t, this.y=e } t() { return new T(-this.x, -this.y) } o(t=1) { return this.i(t/(this.h()||1/0)) } l(e) { return new T(this.x+e.x, this.y+e.y) } u(e) { return new T(this.x-e.x, this.y-e.y) } i(e) { return new T(this.x_e, this.ye) } (t) { return this.x_t.x+this.y_t.y } h() { return Math.sqrt(this.x_this.x+this.y_this.y) } M(t) { const e=this.x-t.x, r=this.y-t.y; return Math.sqrt(e_e+r_r) } }

class e { constructor(t, e) { this.g=t, this.v=e } }

const r=(t, e, i, c, u, f, a)=> { if(u-c==1) { const r=t[c], s=t[u], o=r.M(s)/3; return void n(e, [r, r.l(f.o(o)), s.l(a.o(o)), s]) } const w=h(t, c, u); let , d=Math.max(i, i*i), M= !0; for(let r=0; r<=4; r++) { const r=s(t, c, u, w, f, a), h=l(t, c, u, r, w); if(h.error<i&&M)return void n(e, r); if(=h.index, h.error>=d)break; M=o(t, c, u, w, r), d=h.error } const g=t[-1].u(t[+1]); r(t, e, i, c, , f, g), r(t, e, i, , u, g.t(), a) }

, n=(t, r)=> { t[t.length-1].m=r[1].u(r[0]), t.push(new e(r[3], r[2].u(r[3]))) }

, s=(t, e, r, n, s, o)=> { const i=1e-12, c=Math.abs, h=t[e], l=t[r], u=[[0, 0], [0, 0]], f=[0, 0]; for(let i=0, c=r-e+1; i<c; i++) { const r=n[i], c=1-r, a=3_r_c, w=c_cc, =a_c, d=a_r, M=r_rr, g=s.o(), v=o.o(d), b=t[e+i].u(h.i(w+)).u(l.i(d+M)); u[0][0]+=g.(g), u[0][1]+=g.(v), u[1][0]=u[0][1], u[1][1]+=v.(v), f[0]+=g.(b), f[1]+=v.(b) } const a=u[0][0]u[1][1]-u[1][0]u[0][1]; let w, ; if(c(a)>i) { const t=u[0][0]f[1]-u[1][0]f[0]; w=(f[0]u[1][1]-f[1]u[0][1])/a, =t/a } else { const t=u[0][0]+u[0][1], e=u[1][0]+u[1][1]; w=_=c(t)>i?f[0]/t: c(e)>i?f[1]/e:0 } const d=l.M(h), M=id; let g, v; if(w<M||<M)w==d/3; else { const t=l.u(h); g=s.o(w), v=o.o(), g.(t)-v.(t)>dd&&(w==d/3, g=v=null) } return[h, h.l(g||s.o(w)), l.l(v||o.o(_)), l] }

, o=(t, e, r, n, s)=> { for(let o=e; o<=r; o++)n[o-e]=i(s, t[o], n[o-e]); for(let t=1, e=n.length; t<e; t++)if(n[t]<=n[t-1])return !1; return !0 }

, i=(t, e, r)=> { const n=[], s=[]; for(let e=0; e<=2; e++)n[e]=t[e+1].u(t[e]).i(3); for(let t=0; t<=1; t++)s[t]=n[t+1].u(n[t]).i(2); const o=c(3, t, r), i=c(2, n, r), h=c(1, s, r), l=o.u(e), u=i.(i)+l.(h); return(f=u)>=-112e-18&&f<=112e-18?r: r-l._(i)/u; var f }

, c=(t, e, r)=> { const n=e.slice(); for(let e=1; e<=t; e++)for(let s=0; s<=t-e; s++)n[s]=n[s].i(1-r).l(n[s+1].i(r)); return n[0] }

, h=(t, e, r)=> { const n=[0]; for(let s=e+1; s<=r; s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]); for(let t=1, s=r-e; t<=s; t++)n[t]/=n[s]; return n }

, l=(t, e, r, n, s)=> { let o=Math.floor((r-e+1)/2), i=0; for(let h=e+1; h<r; h++) { const r=c(3, n, s[h-e]).u(t[h]), l=r.x_r.x+r.y_r.y; l>=i&&(i=l, o=h) } return { error: i, index:o } }

; export default(n, s= {}

)=>0===n.length?"":((t, e, r)=> { const n=t.length, s=10*r, o=r<16?t=>Math.round(ts)/s: t=>t, i=(t, e)=>o(t)+","+o(e); let c, h, l, u, f= !0; const a=[], w=(t, e)=> { const r=t.g.x, n=t.g.y; if(f)a.push("M"+i(r, n)), f= !1; else { const s=r+(t.v?.x??0), f=n+(t.v?.y??0); if(s===r&&f===n&&l===c&&u===h) { if( !e) { const t=r-c, e=n-h; a.push(0===t?"v"+o(e): 0===e?"h"+o(t):"l"+i(t, e)) } } else a.push("c"+i(l-c, u-h)+" "+i(s-c, f-h)+" "+i(r-c, n-h)) } c=r, h=n, l=r+(t.m?.x??0), u=n+(t.m?.y??0) } ; if( !n)return""; for(let e=0; e<n; e++)w(t[e]); return e&&n>0&&(w(t[0], !0), a.push("z")), a.join("") }

)(((t, n, s)=> { n&&(t.unshift(t[t.length-1]), t.push(t[1])); const o=t.length; if(0===o)return[]; const i=[new e(t[0])]; return r(t, i, s, 0, o-1, t[1].u(t[0]), t[o-2].u(t[o-1])), n&&(i.shift(), i.pop()), i }

)(n.map("number"==typeof n[0].x?e=>new T(e.x, e.y):e=>new T(e[0], e[1])), s.closed, s.tolerance??2.5), s.closed, s.precision??5);

[Guaynora]

Not work for me

[deflexable]

@Guaynora looks like the code @batuayhan replicated was wrongly pasted. just change the first class t to T, then change all occurrence of "new t" to "new T".

like below:

class T{constructor(t,e){this.x=t,this.y=e}t(){return new T(-this.x,-this.y)}o(t=1){return this.i(t/(this.h()||1/0))}l(e){return new T(this.x+e.x,this.y+e.y)}u(e){return new T(this.x-e.x,this.y-e.y)}i(e){return new T(this.x*e,this.y*e)}_(t){return this.x*t.x+this.y*t.y}h(){return Math.sqrt(this.x*this.x+this.y*this.y)}M(t){const e=this.x-t.x,r=this.y-t.y;return Math.sqrt(e*e+r*r)}}class e{constructor(t,e){this.g=t,this.v=e}}const r=(t,e,i,c,u,f,a)=>{if(u-c==1){const r=t[c],s=t[u],o=r.M(s)/3;return void n(e,[r,r.l(f.o(o)),s.l(a.o(o)),s])}const w=h(t,c,u);let _,d=Math.max(i,i*i),M=!0;for(let r=0;r<=4;r++){const r=s(t,c,u,w,f,a),h=l(t,c,u,r,w);if(h.error<i&&M)return void n(e,r);if(_=h.index,h.error>=d)break;M=o(t,c,u,w,r),d=h.error}const g=t[_-1].u(t[_+1]);r(t,e,i,c,_,f,g),r(t,e,i,_,u,g.t(),a)},n=(t,r)=>{t[t.length-1].m=r[1].u(r[0]),t.push(new e(r[3],r[2].u(r[3])))},s=(t,e,r,n,s,o)=>{const i=1e-12,c=Math.abs,h=t[e],l=t[r],u=[[0,0],[0,0]],f=[0,0];for(let i=0,c=r-e+1;i<c;i++){const r=n[i],c=1-r,a=3*r*c,w=c*c*c,_=a*c,d=a*r,M=r*r*r,g=s.o(_),v=o.o(d),b=t[e+i].u(h.i(w+_)).u(l.i(d+M));u[0][0]+=g._(g),u[0][1]+=g._(v),u[1][0]=u[0][1],u[1][1]+=v._(v),f[0]+=g._(b),f[1]+=v._(b)}const a=u[0][0]*u[1][1]-u[1][0]*u[0][1];let w,_;if(c(a)>i){const t=u[0][0]*f[1]-u[1][0]*f[0];w=(f[0]*u[1][1]-f[1]*u[0][1])/a,_=t/a}else{const t=u[0][0]+u[0][1],e=u[1][0]+u[1][1];w=_=c(t)>i?f[0]/t:c(e)>i?f[1]/e:0}const d=l.M(h),M=i*d;let g,v;if(w<M||_<M)w=_=d/3;else{const t=l.u(h);g=s.o(w),v=o.o(_),g._(t)-v._(t)>d*d&&(w=_=d/3,g=v=null)}return[h,h.l(g||s.o(w)),l.l(v||o.o(_)),l]},o=(t,e,r,n,s)=>{for(let o=e;o<=r;o++)n[o-e]=i(s,t[o],n[o-e]);for(let t=1,e=n.length;t<e;t++)if(n[t]<=n[t-1])return!1;return!0},i=(t,e,r)=>{const n=[],s=[];for(let e=0;e<=2;e++)n[e]=t[e+1].u(t[e]).i(3);for(let t=0;t<=1;t++)s[t]=n[t+1].u(n[t]).i(2);const o=c(3,t,r),i=c(2,n,r),h=c(1,s,r),l=o.u(e),u=i._(i)+l._(h);return(f=u)>=-112e-18&&f<=112e-18?r:r-l._(i)/u;var f},c=(t,e,r)=>{const n=e.slice();for(let e=1;e<=t;e++)for(let s=0;s<=t-e;s++)n[s]=n[s].i(1-r).l(n[s+1].i(r));return n[0]},h=(t,e,r)=>{const n=[0];for(let s=e+1;s<=r;s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]);for(let t=1,s=r-e;t<=s;t++)n[t]/=n[s];return n},l=(t,e,r,n,s)=>{let o=Math.floor((r-e+1)/2),i=0;for(let h=e+1;h<r;h++){const r=c(3,n,s[h-e]).u(t[h]),l=r.x*r.x+r.y*r.y;l>=i&&(i=l,o=h)}return{error:i,index:o}};export default(n,s={})=>0===n.length?"":((t,e,r)=>{const n=t.length,s=10**r,o=r<16?t=>Math.round(t*s)/s:t=>t,i=(t,e)=>o(t)+","+o(e);let c,h,l,u,f=!0;const a=[],w=(t,e)=>{const r=t.g.x,n=t.g.y;if(f)a.push("M"+i(r,n)),f=!1;else{const s=r+(t.v?.x??0),f=n+(t.v?.y??0);if(s===r&&f===n&&l===c&&u===h){if(!e){const t=r-c,e=n-h;a.push(0===t?"v"+o(e):0===e?"h"+o(t):"l"+i(t,e))}}else a.push("c"+i(l-c,u-h)+" "+i(s-c,f-h)+" "+i(r-c,n-h))}c=r,h=n,l=r+(t.m?.x??0),u=n+(t.m?.y??0)};if(!n)return"";for(let e=0;e<n;e++)w(t[e]);return e&&n>0&&(w(t[0],!0),a.push("z")),a.join("")})(((t,n,s)=>{n&&(t.unshift(t[t.length-1]),t.push(t[1]));const o=t.length;if(0===o)return[];const i=[new e(t[0])];return r(t,i,s,0,o-1,t[1].u(t[0]),t[o-2].u(t[o-1])),n&&(i.shift(),i.pop()),i})(n.map("number"==typeof n[0].x?e=>new T(e.x,e.y):e=>new T(e[0],e[1])),s.closed,s.tolerance??2.5),s.closed,s.precision??5);

[Gianbho]

@Guaynora looks like the code @batuayhan replicated was wrongly pasted. just change the first class t to T, then change all occurrence of "new t" to "new T".

like below:

class T{constructor(t,e){this.x=t,this.y=e}t(){return new T(-this.x,-this.y)}o(t=1){return this.i(t/(this.h()||1/0))}l(e){return new T(this.x+e.x,this.y+e.y)}u(e){return new T(this.x-e.x,this.y-e.y)}i(e){return new T(this.x*e,this.y*e)}_(t){return this.x*t.x+this.y*t.y}h(){return Math.sqrt(this.x*this.x+this.y*this.y)}M(t){const e=this.x-t.x,r=this.y-t.y;return Math.sqrt(e*e+r*r)}}class e{constructor(t,e){this.g=t,this.v=e}}const r=(t,e,i,c,u,f,a)=>{if(u-c==1){const r=t[c],s=t[u],o=r.M(s)/3;return void n(e,[r,r.l(f.o(o)),s.l(a.o(o)),s])}const w=h(t,c,u);let _,d=Math.max(i,i*i),M=!0;for(let r=0;r<=4;r++){const r=s(t,c,u,w,f,a),h=l(t,c,u,r,w);if(h.error<i&&M)return void n(e,r);if(_=h.index,h.error>=d)break;M=o(t,c,u,w,r),d=h.error}const g=t[_-1].u(t[_+1]);r(t,e,i,c,_,f,g),r(t,e,i,_,u,g.t(),a)},n=(t,r)=>{t[t.length-1].m=r[1].u(r[0]),t.push(new e(r[3],r[2].u(r[3])))},s=(t,e,r,n,s,o)=>{const i=1e-12,c=Math.abs,h=t[e],l=t[r],u=[[0,0],[0,0]],f=[0,0];for(let i=0,c=r-e+1;i<c;i++){const r=n[i],c=1-r,a=3*r*c,w=c*c*c,_=a*c,d=a*r,M=r*r*r,g=s.o(_),v=o.o(d),b=t[e+i].u(h.i(w+_)).u(l.i(d+M));u[0][0]+=g._(g),u[0][1]+=g._(v),u[1][0]=u[0][1],u[1][1]+=v._(v),f[0]+=g._(b),f[1]+=v._(b)}const a=u[0][0]*u[1][1]-u[1][0]*u[0][1];let w,_;if(c(a)>i){const t=u[0][0]*f[1]-u[1][0]*f[0];w=(f[0]*u[1][1]-f[1]*u[0][1])/a,_=t/a}else{const t=u[0][0]+u[0][1],e=u[1][0]+u[1][1];w=_=c(t)>i?f[0]/t:c(e)>i?f[1]/e:0}const d=l.M(h),M=i*d;let g,v;if(w<M||_<M)w=_=d/3;else{const t=l.u(h);g=s.o(w),v=o.o(_),g._(t)-v._(t)>d*d&&(w=_=d/3,g=v=null)}return[h,h.l(g||s.o(w)),l.l(v||o.o(_)),l]},o=(t,e,r,n,s)=>{for(let o=e;o<=r;o++)n[o-e]=i(s,t[o],n[o-e]);for(let t=1,e=n.length;t<e;t++)if(n[t]<=n[t-1])return!1;return!0},i=(t,e,r)=>{const n=[],s=[];for(let e=0;e<=2;e++)n[e]=t[e+1].u(t[e]).i(3);for(let t=0;t<=1;t++)s[t]=n[t+1].u(n[t]).i(2);const o=c(3,t,r),i=c(2,n,r),h=c(1,s,r),l=o.u(e),u=i._(i)+l._(h);return(f=u)>=-112e-18&&f<=112e-18?r:r-l._(i)/u;var f},c=(t,e,r)=>{const n=e.slice();for(let e=1;e<=t;e++)for(let s=0;s<=t-e;s++)n[s]=n[s].i(1-r).l(n[s+1].i(r));return n[0]},h=(t,e,r)=>{const n=[0];for(let s=e+1;s<=r;s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]);for(let t=1,s=r-e;t<=s;t++)n[t]/=n[s];return n},l=(t,e,r,n,s)=>{let o=Math.floor((r-e+1)/2),i=0;for(let h=e+1;h<r;h++){const r=c(3,n,s[h-e]).u(t[h]),l=r.x*r.x+r.y*r.y;l>=i&&(i=l,o=h)}return{error:i,index:o}};export default(n,s={})=>0===n.length?"":((t,e,r)=>{const n=t.length,s=10**r,o=r<16?t=>Math.round(t*s)/s:t=>t,i=(t,e)=>o(t)+","+o(e);let c,h,l,u,f=!0;const a=[],w=(t,e)=>{const r=t.g.x,n=t.g.y;if(f)a.push("M"+i(r,n)),f=!1;else{const s=r+(t.v?.x??0),f=n+(t.v?.y??0);if(s===r&&f===n&&l===c&&u===h){if(!e){const t=r-c,e=n-h;a.push(0===t?"v"+o(e):0===e?"h"+o(t):"l"+i(t,e))}}else a.push("c"+i(l-c,u-h)+" "+i(s-c,f-h)+" "+i(r-c,n-h))}c=r,h=n,l=r+(t.m?.x??0),u=n+(t.m?.y??0)};if(!n)return"";for(let e=0;e<n;e++)w(t[e]);return e&&n>0&&(w(t[0],!0),a.push("z")),a.join("")})(((t,n,s)=>{n&&(t.unshift(t[t.length-1]),t.push(t[1]));const o=t.length;if(0===o)return[];const i=[new e(t[0])];return r(t,i,s,0,o-1,t[1].u(t[0]),t[o-2].u(t[o-1])),n&&(i.shift(),i.pop()),i})(n.map("number"==typeof n[0].x?e=>new T(e.x,e.y):e=>new T(e[0],e[1])),s.closed,s.tolerance??2.5),s.closed,s.precision??5);

it still doesn't work. I mean, works well in expo dev build, but when it comes to the prod build the issue shows up again

[sickopickle]

My friend helped me solve it for me. I had been getting "Can't find variable: t", but I changed some stuff:

1. Add a patch file (mine's called @luncheon+simplify-svg-path+0.1.5.patch) with the following code (don't omit anything) :

diff --git a/node_modules/@luncheon/simplify-svg-path/index.min.js b/node_modules/@luncheon/simplify-svg-path/index.min.js index cbc2de0..01fe879 100644 --- a/node_modules/@luncheon/simplify-svg-path/index.min.js +++ b/nodemodules/@luncheon/simplify-svg-path/index.min.js @@ -1 +1 @@ -class t{constructor(t,e){this.x=t,this.y=e}t(){return new t(-this.x,-this.y)}o(t=1){return this.i(t/(this.h()||1/0))}l(e){return new t(this.x+e.x,this.y+e.y)}u(e){return new t(this.x-e.x,this.y-e.y)}i(e){return new t(this.xe,this.ye)}(t){return this.xt.x+this.yt.y}h(){return Math.sqrt(this.xthis.x+this.ythis.y)}M(t){const e=this.x-t.x,r=this.y-t.y;return Math.sqrt(ee+rr)}}class e{constructor(t,e){this.g=t,this.v=e}}const r=(t,e,i,c,u,f,a)=>{if(u-c==1){const r=t[c],s=t[u],o=r.M(s)/3;return void n(e,[r,r.l(f.o(o)),s.l(a.o(o)),s])}const w=h(t,c,u);let ,d=Math.max(i,i*i),M=!0;for(let r=0;r<=4;r++){const r=s(t,c,u,w,f,a),h=l(t,c,u,r,w);if(h.error<i&&M)return void n(e,r);if(=h.index,h.error>=d)break;M=o(t,c,u,w,r),d=h.error}const g=t[-1].u(t[+1]);r(t,e,i,c,,f,g),r(t,e,i,,u,g.t(),a)},n=(t,r)=>{t[t.length-1].m=r[1].u(r[0]),t.push(new e(r[3],r[2].u(r[3])))},s=(t,e,r,n,s,o)=>{const i=1e-12,c=Math.abs,h=t[e],l=t[r],u=[[0,0],[0,0]],f=[0,0];for(let i=0,c=r-e+1;i<c;i++){const r=n[i],c=1-r,a=3rc,w=ccc,=ac,d=ar,M=rrr,g=s.o(),v=o.o(d),b=t[e+i].u(h.i(w+)).u(l.i(d+M));u[0][0]+=g.(g),u[0][1]+=g.(v),u[1][0]=u[0][1],u[1][1]+=v.(v),f[0]+=g.(b),f[1]+=v.(b)}const a=u[0][0]u[1][1]-u[1][0]u[0][1];let w,;if(c(a)>i){const t=u[0][0]f[1]-u[1][0]f[0];w=(f[0]u[1][1]-f[1]u[0][1])/a,=t/a}else{const t=u[0][0]+u[0][1],e=u[1][0]+u[1][1];w==c(t)>i?f[0]/t:c(e)>i?f[1]/e:0}const d=l.M(h),M=i*d;let g,v;if(w<M||<M)w==d/3;else{const t=l.u(h);g=s.o(w),v=o.o(),g.(t)-v.(t)>dd&&(w==d/3,g=v=null)}return[h,h.l(g||s.o(w)),l.l(v||o.o()),l]},o=(t,e,r,n,s)=>{for(let o=e;o<=r;o++)n[o-e]=i(s,t[o],n[o-e]);for(let t=1,e=n.length;t<e;t++)if(n[t]<=n[t-1])return!1;return!0},i=(t,e,r)=>{const n=[],s=[];for(let e=0;e<=2;e++)n[e]=t[e+1].u(t[e]).i(3);for(let t=0;t<=1;t++)s[t]=n[t+1].u(n[t]).i(2);const o=c(3,t,r),i=c(2,n,r),h=c(1,s,r),l=o.u(e),u=i.(i)+l.(h);return(f=u)>=-112e-18&&f<=112e-18?r:r-l._(i)/u;var f},c=(t,e,r)=>{const n=e.slice();for(let e=1;e<=t;e++)for(let s=0;s<=t-e;s++)n[s]=n[s].i(1-r).l(n[s+1].i(r));return n[0]},h=(t,e,r)=>{const n=[0];for(let s=e+1;s<=r;s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]);for(let t=1,s=r-e;t<=s;t++)n[t]/=n[s];return n},l=(t,e,r,n,s)=>{let o=Math.floor((r-e+1)/2),i=0;for(let h=e+1;h<r;h++){const r=c(3,n,s[h-e]).u(t[h]),l=r.xr.x+r.y*r.y;l>=i&&(i=l,o=h)}return{error:i,index:o}};export default(n,s={})=>0===n.length?"":((t,e,r)=>{const n=t.length,s=10r,o=r<16?t=>Math.round(ts)/s:t=>t,i=(t,e)=>o(t)+","+o(e);let c,h,l,u,f=!0;const a=[],w=(t,e)=>{const r=t.g.x,n=t.g.y;if(f)a.push("M"+i(r,n)),f=!1;else{const s=r+(t.v?.x??0),f=n+(t.v?.y??0);if(s===r&&f===n&&l===c&&u===h){if(!e){const t=r-c,e=n-h;a.push(0===t?"v"+o(e):0===e?"h"+o(t):"l"+i(t,e))}}else a.push("c"+i(l-c,u-h)+" "+i(s-c,f-h)+" "+i(r-c,n-h))}c=r,h=n,l=r+(t.m?.x??0),u=n+(t.m?.y??0)};if(!n)return"";for(let e=0;e<n;e++)w(t[e]);return e&&n>0&&(w(t[0],!0),a.push("z")),a.join("")})(((t,n,s)=>{n&&(t.unshift(t[t.length-1]),t.push(t[1]));const o=t.length;if(0===o)return[];const i=[new e(t[0])];return r(t,i,s,0,o-1,t[1].u(t[0]),t[o-2].u(t[o-1])),n&&(i.shift(),i.pop()),i})(n.map("number"==typeof n[0].x?e=>new t(e.x,e.y):e=>new t(e[0],e[1])),s.closed,s.tolerance??2.5),s.closed,s.precision??5); \ No newline at end of file +class T{constructor(t,e){this.x=t,this.y=e}t(){return new T(-this.x,-this.y)}o(t=1){return this.i(t/(this.h()||1/0))}l(e){return new T(this.x+e.x,this.y+e.y)}u(e){return new T(this.x-e.x,this.y-e.y)}i(e){return new T(this.xe,this.ye)}_(t){return this.xt.x+this.yt.y}h(){return Math.sqrt(this.xthis.x+this.ythis.y)}M(t){const e=this.x-t.x,r=this.y-t.y;return Math.sqrt(ee+rr)}}class e{constructor(t,e){this.g=t,this.v=e}}const r=(t,e,i,c,u,f,a)=>{if(u-c==1){const r=t[c],s=t[u],o=r.M(s)/3;return void n(e,[r,r.l(f.o(o)),s.l(a.o(o)),s])}const w=h(t,c,u);let _,d=Math.max(i,ii),M=!0;for(let r=0;r<=4;r++){const r=s(t,c,u,w,f,a),h=l(t,c,u,r,w);if(h.error<i&&M)return void n(e,r);if(=h.index,h.error>=d)break;M=o(t,c,u,w,r),d=h.error}const g=t[-1].u(t[+1]);r(t,e,i,c,,f,g),r(t,e,i,,u,g.t(),a)},n=(t,r)=>{t[t.length-1].m=r[1].u(r[0]),t.push(new e(r[3],r[2].u(r[3])))},s=(t,e,r,n,s,o)=>{const i=1e-12,c=Math.abs,h=t[e],l=t[r],u=[[0,0],[0,0]],f=[0,0];for(let i=0,c=r-e+1;i<c;i++){const r=n[i],c=1-r,a=3rc,w=ccc,=ac,d=ar,M=rrr,g=s.o(),v=o.o(d),b=t[e+i].u(h.i(w+)).u(l.i(d+M));u[0][0]+=g.(g),u[0][1]+=g.(v),u[1][0]=u[0][1],u[1][1]+=v.(v),f[0]+=g.(b),f[1]+=v.(b)}const a=u[0][0]u[1][1]-u[1][0]u[0][1];let w,;if(c(a)>i){const t=u[0][0]f[1]-u[1][0]f[0];w=(f[0]u[1][1]-f[1]u[0][1])/a,=t/a}else{const t=u[0][0]+u[0][1],e=u[1][0]+u[1][1];w==c(t)>i?f[0]/t:c(e)>i?f[1]/e:0}const d=l.M(h),M=id;let g,v;if(w<M||<M)w==d/3;else{const t=l.u(h);g=s.o(w),v=o.o(),g.(t)-v._(t)>dd&&(w==d/3,g=v=null)}return[h,h.l(g||s.o(w)),l.l(v||o.o()),l]},o=(t,e,r,n,s)=>{for(let o=e;o<=r;o++)n[o-e]=i(s,t[o],n[o-e]);for(let t=1,e=n.length;t<e;t++)if(n[t]<=n[t-1])return!1;return!0},i=(t,e,r)=>{const n=[],s=[];for(let e=0;e<=2;e++)n[e]=t[e+1].u(t[e]).i(3);for(let t=0;t<=1;t++)s[t]=n[t+1].u(n[t]).i(2);const o=c(3,t,r),i=c(2,n,r),h=c(1,s,r),l=o.u(e),u=i.(i)+l.(h);return(f=u)>=-112e-18&&f<=112e-18?r:r-l._(i)/u;var f},c=(t,e,r)=>{const n=e.slice();for(let e=1;e<=t;e++)for(let s=0;s<=t-e;s++)n[s]=n[s].i(1-r).l(n[s+1].i(r));return n[0]},h=(t,e,r)=>{const n=[0];for(let s=e+1;s<=r;s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]);for(let t=1,s=r-e;t<=s;t++)n[t]/=n[s];return n},l=(t,e,r,n,s)=>{let o=Math.floor((r-e+1)/2),i=0;for(let h=e+1;h<r;h++){const r=c(3,n,s[h-e]).u(t[h]),l=r.xr.x+r.yr.y;l>=i&&(i=l,o=h)}return{error:i,index:o}};export default(n,s={})=>0===n.length?"":((t,e,r)=>{const n=t.length,s=10r,o=r<16?t=>Math.round(t*s)/s:t=>t,i=(t,e)=>o(t)+","+o(e);let c,h,l,u,f=!0;const a=[],w=(t,e)=>{const r=t.g.x,n=t.g.y;if(f)a.push("M"+i(r,n)),f=!1;else{const s=r+(t.v?.x??0),f=n+(t.v?.y??0);if(s===r&&f===n&&l===c&&u===h){if(!e){const t=r-c,e=n-h;a.push(0===t?"v"+o(e):0===e?"h"+o(t):"l"+i(t,e))}}else a.push("c"+i(l-c,u-h)+" "+i(s-c,f-h)+" "+i(r-c,n-h))}c=r,h=n,l=r+(t.m?.x??0),u=n+(t.m?.y??0)};if(!n)return"";for(let e=0;e<n;e++)w(t[e]);return e&&n>0&&(w(t[0],!0),a.push("z")),a.join("")})(((t,n,s)=>{n&&(t.unshift(t[t.length-1]),t.push(t[1]));const o=t.length;if(0===o)return[];const i=[new e(t[0])];return r(t,i,s,0,o-1,t[1].u(t[0]),t[o-2].u(t[o-1])),n&&(i.shift(),i.pop()),i})(n.map("number"==typeof n[0].x?e=>new T(e.x,e.y):e=>new T(e[0],e[1])),s.closed,s.tolerance??2.5),s.closed,s.precision??5); \ No newline at end of file

2. Add the following in package.json dependencies:

"patch-package": "^6.5.0", "postinstall-postinstall": "^2.1.0"

3. And the following in package.json scripts:

"postinstall": "patch-package"

Good luck!

[deflexable]

@sickopickle use the fork at https://github.com/heavenya/react-native-draw

[kdh0324]

If I'm not late, check PR.

[poPaTheGuru]

This issue is still reproducing with

"@benjeau/react-native-draw": "^0.8.3",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-svg": "^13.6.0"

This is how terminal looks when pressing on screen:

[log901108]

same issue til now

[kdh0324]

I think PR[#76] can solve this error. The error is caused by minified code in the library[@launcheon/simplify-svg-path]. However, its owner solved it by upgrading version to 0.2.0.

[AnKu9696]

Hi guys. Are u going to fix this issue? I use ur lib and it is really cool, but this bug ((

[sickopickle]

@AnKu9696 The reason for the error is the code in the library @luncheon simplify-svg-path, and benjeau has not used the updated version. So you have to do this manually:

Go into node-modules -> @benjeau react-native-draw -> node-modules -> @luncheon simplify-svg-path Replace the code in that folder with the code at https://github.com/luncheon/simplify-svg-path Make sure you're modifying the simplify-svg-path code INSIDE @benjeau react-native-draw.

[AnKu9696]

@sickopickle Thx. And if someone clone my project from my repo and make npm install this issue won’t appear again ?)

[poPaTheGuru]

@sickopickle this is a bad practice and it's working just locally until you clean your node_modules and have to install them again

[AnKu9696]

@poPaTheGuru That what’s I mean. Maybe someone knows another working lib that have ability to add Img in canvas and draw on it?

[Gguigre]

Otherwise, waiting for this PR to be merged, you can you patch-package to apply the fix. Doing so, it won't appear even if you clean your node_modules.

Apply the fix in @luncheon/simplify-svg-path then

npx patch-package @luncheon/simplify-svg-path

or

npx patch-package @luncheon/simplify-svg-path --use-yarn

depending on your package manager.

[BenJeau]

Sorry for the late comment, just merged #76 - can't release a new version right now, but specifying the commit hash in the package.json should work from looking online, e.g.:

"@benjeau/react-native-draw": "git://github.com/BenJeau/react-native-draw.git#13ff23ff0efebc63f1a2e0c6578cf1beb5ed84bf"

[sickopickle]

Do I have to add that to the package.json as well?

[donni106]

anyone has a working version? i cannot install the latest master version or specific commit hash with different tries and spellings in package.json.

---

edit:

i have added the following to package.json

  "resolutions": {
    "@luncheon/simplify-svg-path": "0.2.0"
  }

and ran npx patch-package @luncheon/simplify-svg-path --use-yarn

this combination made it work for me!

[MasonTyTran]

I can't install package with master branch, it said: invalid package version

[RayBans2111]

Would be good to get this patched without the work around. Looks like it's been broken for some time now.

[vsalguero]

This worked for me, only modify your package.json in the root folder, add the next line "overrides": { "@luncheon/simplify-svg-path": "0.2.0" }

Thank you https://github.com/BenJeau/react-native-draw/issues/63#issuecomment-1375691042

[n0t1s]

Okay hear me out, The only solution that worked for me is to write: "overrides": { "@luncheon/simplify-svg-path": "0.2.0" }, "resolutions": { "@luncheon/simplify-svg-path": "0.2.0" },

these both in package.json And then run yarn in terminal again.

[benjaminmerchin]

After some time the best solution I found :

I replaced this package with a fork that solved the issue : https://www.npmjs.com/package/@vcandou/react-native-draw Everything works fine, almost no change needed with this fork, you just need to replace the imports from

import {Canvas} from '@benjeau/react-native-draw'; to import {Canvas} from '@vcandou/react-native-draw'; and in the package.json to "@vcandou/react-native-draw": "0.8.3",

[rishabh1S]

@benjaminmerchin It works great, but there is this small issue, it feel slow and delayed to draw.