"Need Help with Partially Overlapping Images in React Native Skia"

[mysnykb]

Hello, I'm working on an application using React Native Skia and facing some challenges with layering images. Specifically, I have a silhouette of a woman and a dress image. I need to overlay the dress on the silhouette so that it appears below the waist, covering the legs, but the hands of the silhouette should appear over the dress.

Here's what I've tried so far:

Used different components with various opacity and blendMode settings.
Attempted to use a mask image to control the visibility of the dress and silhouette.
However, I haven't been successful in achieving the desired layering effect where the legs are covered by the dress and the hands are visible over it.

Questions:
How can I use an image as a mask to control the overlay?
Is it possible to use blend modes to achieve this specific layering effect? If so, how?
Are there any best practices or methods in React Native Skia to accomplish this?
Any guidance or suggestions would be greatly appreciated. Thank you!