Example configuration

[colelogan]

I’ve been trying to run your code on my emulator for a while.

I’m trying to run the CanvasExample synced canvas. I tried following your directions but would not run on the emulator. Then I copied some files over to a ngx-create-react-native-app project and I still can’t figure it out.

I’m familiar with react but I just don’t know how to get all the configs done right. I really like your code too. I would really appreciate help if any.

[ShaMan123]

What errors are you getting? What are the values of the file example.config.json? What steps did you do?

[colelogan]

the values of example.config.json are.

{
	"useBaseImplementation": false,
	"useLocalReanimatedModule": true
}

The same version of reanimated pulled from your github and RN-reanimated-canvas are in the same folder:

Here is the error code I'm getting:

I don't know what do about that at the moment.

[ShaMan123]

I want to see your CanvasExample/package.json

[ShaMan123]

Ohh and try to run npm run android -- --reset-cache from the example folder

[colelogan]

ok I'll try that

[ShaMan123]

If that doesn't work try updating yarn add react-native-gesture-handler. The error seems to surface there but not sure if it's the origin.

[colelogan]

It's working hurrayy!

[colelogan]

I have one more question. How would you configure base path? I tried playing with it for a couple minutes setting localpath to false and base path to true. Is there something I'm missing?

[ShaMan123]

Great! Important notice: There a 3 approaches to handle touch in this repo:

1. JS - bad performance (terrylinla's approach)
2. reanimated - works only on android (my PR), reanimated are moving to a different approach in their v2 so it seems a waste to support iOS...
3. native - needs to be implemented (android requires a little tweak to get it working). However, the last time I tested it, it didn't play nicely with heavy customization but a fix I pushed to RNGH might make the difference.

[ShaMan123]

I have one more question. How would you configure base path? I tried playing with it for a couple minutes setting localpath to false and base path to true. Is there something I'm missing?

Yes. You must re-build the app npm run android -- --reset-cache for it to make an affect.

[ShaMan123]

The base impl tests the repo without reanimated or RNGH as deps

[ShaMan123]

closing

[colelogan]

Oh those are really interesting points. And yes your project is mostly working but there are some errors on two screens synced canvas and the updating screen. I would have to check your RNGH push out. I thought base config was running animated from node_modules but I understand now.

It's seems like you really know what you are doing with react & react-native like alot... thats very cool.

Are you a contractor or do you work for a company?

[ShaMan123]

Thanks. It was hard and frustrating getting this to work. I guess you could say I'm a contractor. Could you share the errors?

[colelogan]

This error is from the synced canvas screen:

This error is from the imperative updating screen:

[ShaMan123]

both of the errors seem to be caused by a path that is undefined

[ShaMan123]

Do you have any apps published on the app store?

I worked on an app called Autodidact but abandoned it after a major pivot. It is open for testers and is quite basic but uses this repo.

[ShaMan123]

both of the errors seem to be caused by a path that is undefined

Some logic error I believe - perhaps in the example, but not sure about it

[ShaMan123]

What are you working on?

[ShaMan123]

The major design consideration would be how live you need/want it to be. 2 options depending on your needs:

1. Live to the touch - meaning that you need to stream the touches as they occur and display them immediately.
2. Live to the path - meaning that you will stream an entire path after the touch has ended and perhaps display it to the other user with some kind of animation.

Viability:

1. Possible, will require more work on native (I would create a component that handles everything in native including the database updates, this way you won't need to cross the js bridge at all) or alternatively reanimated V2 might be a feasible option for drawing imperatively on both platforms. I was testing V2 a while back in order to migrate this repo to V2, it was still very new.... I don't know it's state nowadays. If it's in good shape and shows good results migrating should be easy.
2. Sounds easier to implement but may be harmful to the UX/UI (may seem laggy) and to the main purpose of the app. In order to create an animation you could use reanimated V2 (or my fork or common js - depending on performance) or you could add a small native method or prop that handles it (will be better for perf and more stable in case reanimated changes dramatically).

[ShaMan123]

combining the 2 approaches sounds powerful

[ShaMan123]

Anyways make sure to run stress tests before you move on or make a decision because this is a flaky piece of UI.

[colelogan]

Synced Canvas quick fix...

pathIDMem isn't an export anymore in RCanvasModule due to a change in the git version.

what I did to fix this issue is change the id variable a new Value

and changed the logic in the condition block, createPathID() doesn't work like it should so I did set(id, add(id, 1)),

and it works

[colelogan]

Just to confirm sha, you said this build cannot be supported in iOS?

[ShaMan123]

Good job! It isn't supported in iOS but eith work it can be.

בתאריך יום ג׳, 2 בפבר׳ 2021, 06:07, מאת Cole L. ‏[email protected]:

Just to confirm sha, you said this build cannot be supported in iOS?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-reanimated-canvas/issues/14#issuecomment-771341887, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4NN7NGDPNGSUHXFPEDS453BRANCNFSM4W27J2MQ .

[colelogan]

And thats with native support like written in Xcode for the iOS app to handle react right? It's like a Xcode module handler right?

[colelogan]

I just looked into the iOS folder and saw the code that seems like a ton of work. What else must be done?

[ShaMan123]

You are right. For someobe who is fluent in iOS it ahouldn't take more than a day's work

בתאריך יום ג׳, 2 בפבר׳ 2021, 11:29, מאת Cole L. ‏[email protected]:

I just looked into the iOS folder and saw the code that seems like a ton of work. What else must be done?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/ShaMan123/react-native-reanimated-canvas/issues/14#issuecomment-771497344, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4JKD42IPO4F4GTIC6TS47AWLANCNFSM4W27J2MQ .

[colelogan]

Ok I appreciate the feedback. I'm going to remove the unnecessary comments on this thread for easy readability.

[colelogan]

And I will reach out to you in the future because you're good and you give good feedback on certain points. Anyways I appreciate the help I really do