Cannot draw even following every instruction

[brianso123]

On what kind of device are you using this library?

• Android
• iOS
• Web

Environment

- OS: IOS 15.5
- react-native: 0.66.3
- @benjeau/react-native-draw: 0.8.3

Current Behavior

Cannot draw on the Canvas and keep on getting the error: [ReferenceError: Can't find variable: t] for each touch events.

Expected Behavior

be able to draw

Steps To Reproduce

1. set up new typescript RN template
   npx react-native init draw --template react-native-template-typescript@6.6.4

2. install all the dependences
   npm i react-native-gesture-handler react-native-svg @benjeau/react-native-draw

3. install pod
   cd ios && pod install && cd ..

4. add <GestureHandlerRootView> wrapper at App.tsx

5. import "react-native-gesture-handler" in both App.tsx and index.js

6. modifiy App.tsx so that it matches the example

7. npm run ios

Anything else?

I have been reading all the documents again and again and I believe I followed every instructions.
I even tried going to the example package.json to copy all the dependencies and versions but that error still occurs.

Please help

[yatinSG]

Facing the same issue.

[ternaus]

The same on the Android simulator.

[victorcorreae]

Facing the same issue.

[vallezw]

Same iOS. Anyone have a fix yet?

[sanjaymhj]

The package works well in Expo. But for app using react-native-cli, I managed to make it work by doing 2 things

1. Remove index.min.js from node_modules/@luncheon/simplify-svg-path
2. In package.json of node_modules/@luncheon/simplify-svg-path, remove index.min.js from files and replace index.min.js with index.js

Please let me know if there is any other permanent solutions.

[sanjaymhj]

For build, I needed to change build script of @luncheon/simplify-svg-path.
Changed build command: tsc -p . && node build-iife.js && npm t

I have tested this on Android debug build and not on Android prod build and iOS builds(both).

[ahsan-abrar]

Same issue LOG ReferenceError: Can't find variable: t. Try both solutions but not work any.

[ph3rro]

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

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(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

Add the following in package.json dependencies:
"patch-package": "^6.5.0",
"postinstall-postinstall": "^2.1.0"

And the following in package.json scripts:
"postinstall": "patch-package"

[Eduardoleor]

@sickopickle hi, i follow your instruccionts, but not works

[ph3rro]

Are you sure you have installed all the dependencies and followed all the instructions? the patch file looks correct.

[idcuadrocodebranch]

For now, I updated the @luncheon/simplify-svg-path to 0.2.0. In package.json:

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

[hongdthaui]

update version 0.2.0 for @luncheon/simplify-svg-path on @benjeau/react-native-draw/node_moduls
i tried and ok

[bluesky0724]

I am using expo but still facing same issue.
I think it is not good idea to update node_modules directly.
Any other solutions?