Unable to draw anything on Canvas.

[mhumza37dev]

On what kind of device are you using this library?

• Android
• 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 ?

screen-20220726-064108.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 && (
<CanvasControls
onUndo={handleUndo}
onClear={handleClear}
onToggleEraser={handleToggleEraser}
onToggleBrushProperties={handleToggleBrushProperties}
tool={tool}
color={color}
opacity={opacity}
thickness={thickness}
buttonStyle={{elevation: 0}}
/>
)}
{!props.toolsVisible && visibleBrushProperties && (
<BrushProperties
color={color}
thickness={thickness}
opacity={opacity}
onColorChange={setColor}
onThicknessChange={setThickness}
onOpacityChange={setOpacity}
style={{
position: 'absolute',
bottom: 80,
left: 0,
right: 0,
padding: SIZES.fifteen,
backgroundColor: '#15',
borderTopEndRadius: SIZES.fifteen,
borderTopStartRadius: SIZES.fifteen,
paddingTop: SIZES.twenty,
borderWidth: StyleSheet.hairlineWidth,
borderBottomWidth: 0,
borderTopColor: '#ccc',
opacity: overlayOpacity,
}}
/>
)}

</>
);
});

[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=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=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);

[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.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);

[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

[ph3rro]

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/node_modules/@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=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(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