<Group matrix={...(Matrix4)}/> not working
meftunca opened this issue · comments
Description
I am writing an image editor for react-native. My goal is to create an editor that anyone can use at a professional level. Currently, I can't drag and move the added paths and images. Absurdly, the "" component doesn't handle the "matrix" value in any way.
Version
0.1.220 <-> 0.1.241
Steps to reproduce
I keep drawings in a state with React Context
I am trying to move the added drawings with the gesture handler with the matrix value in the state
The component does not perform the migration in any way.
Snack, code example, screenshot, or link to a repository
I had an app running with normal react-native and it was working. I converted it to expo to make an external library but I'm having the following problems. I'm trying to create an example with Snack, but I probably won't be able to because of version incompatibility. Could you please review my repo
The simple example I created works :D. I'm trying to find the source of the error. I would like to ask you if there is a possibility of having a problem with values of type sharedValue passed with react-context. Is there a possibility of having such a problem?
I tried the snack and it appear to work properly.
Please be mindful when reporting such issues to clearly state what the bug appears to be, how to reproduce it as easily as possible and which platforms and versions of the package are affected by the issue.
I will close the issue for now. If you have a reproduction that we can confirm, we will re-open the issue.
Hi @wcandillon, I need to explain the problem in detail. I finally found the cause.
To explain the problem in its simplest form, SharedValue or any other Matrix4 value unfortunately does not work with the matrix={} prop of Skia components. This should be obvious in the Snack application I shared. If you can drag an element with a green background, this is the view of the gestureHandler. Skia path should have a white background.
What did I try to run Matrix4 ?
- with SharedValue
- React useState/useReducer/useSyncExternalStore
- EventEmitter
I found no other way to try :)
How did I solve it?
Matrix4 is definitely not working and I created it again with a value of type SkMatrix. It worked successfully the first time :) The solution to 3 days of tedious work for me was to switch back to SkMatrix from Matrix4 that you used in your examples. I don't know exactly why it didn't work but Matrix4 really didn't work.
Finally, I think we should complete the examples and missing documentation about this in the documentation.
By the way, my friend, you are a great guy and you share excellent examples. I am a bit new to canvas/svg. I apologize for advancing this issue in a way that will tire you out. I will continue to learn as much as I can and provide people with useful ideas, examples and products.
Good work
The problem is that on snack, you can only use RN Skia 0.1.221 support for Matrix4 arrived in 0.1.229.
Using SkMatrix on 0.1.221 is probably the best way or you can use expo devclient to run the latest version of Skia in your project.