0

I've been using the react-native-camera library to handle camera views in the app I'm building, and I've also been asked to add some shapes like rectangles, crosses and circles on top of it as a guide to help the user frame the image correctly. I implemented a component called Frame by combining some overlapping (position: 'absolute') View components together, then I displayed it as a child of RNCamera, and now it covers most of the camera view, but the pinch-to-zoom feature (enabled through the useNativeZoom prop) doesn't work anymore on the covered area.

Moving Frame after RNCamera has the same final graphical result but doesn't seem to solve the issue. I also tried to tinker with the pointerEvents prop in Frame, but without success.

What's the best way to fix this? Should I somehow propagate events upwards so that they are processed by RNCamera? Or maybe there's a way to make Frame "invisible" to touch events, so to speak?

React Native version: 0.62.2
React Native Camera version: 3.27.0

apgsn
  • 681
  • 8
  • 17

1 Answers1

2

It turns out the solution was rather simple and I probably missed it by pure chance: include Frame in RNCamera, and set pointerEvents="none" on the outermost frame View.
I also upgraded my RN version to 0.63.2, but I don't think that played a role.

apgsn
  • 681
  • 8
  • 17