React Native - Save image with overlay sticker

Question

I have a use case where I'd like to place a sticker on top of an image the user has chosen from his/her storage (or shot with camera), and upload the result to a webservice.

Ideally, the user can drag the sticker to place it on the image as needed, maybe even pinch-to-zoom and rotate, but the bare minimum would just be to overlay the sticker in a fixed position in the Image component and save the result to a file to be uploaded.

Does anyone know of a way to do this? I've searched quite a bit, and haven't been able to figure it out yet. My best bet so far is to show the result to the user with nested images

<Image source={[USER_IMAGE]} style...>
  <Image source={[STICKER]} />
</Image>

and then draw and save the result on a canvas on the backend.

Answer 1

So I ended up using react-native-gesture-handler for this, an example can be found here. I've updated it since then, but that snack should be enough to get anyone else going :-)