Fixing Position and Enforcing Object Alignment Before Capture with React Native

Question

I am developing a React Native mobile application that requires a fixed shape overlay (a top-down view of an apple) on the camera preview. The user must adjust the phone’s position to align a real object with the fixed shape.

Additionally, the app must restrict the user from taking a photo unless the object is perfectly aligned with the overlay.

---

What I have tried:

1. Using react-native-camera

   • Successfully displayed the camera preview and overlaid a <View> with an SVG shape (using react-native-svg).
   • The overlay was not correctly transparent, and the performance was not optimal.

2. Using react-native-vision-camera

   • Implemented the camera preview with a transparent overlay.
   • Used react-native-reanimated to animate minor adjustments, but keeping the overlay fixed at the center was problematic.
   • Did not find a straightforward way to validate the object alignment and restrict photo-taking accordingly.

---

What I need help with:

1. Ensuring the overlay remains perfectly fixed at the center of the camera view while the user moves the phone.
2. Implementing alignment validation so the shutter button is only enabled when the object is correctly aligned with the overlay.

Any guidance or examples would be greatly appreciated!