I’m quiet a newbie in react-native mobile development. I’ve been struggling to find any solid resources or guidance on how to implement image annotations in either React Native or a React PWA. I’ve found some libraries, but they don’t seem to fully solve the problem:
- react-image-annotation: Works only on desktop browsers and requires
a mouse, which is not suitable for mobile or touch devices - react-native-image-annotation: This doesn’t seem to work for me at
all, and there isn’t much documentation available.
What I’m trying to achieve is a simple image annotation tool, where users can draw or highlight areas on an image and save those annotations to a database. Ideally, the image should allow for further editing or additional annotations after saving.
A good example of what I want to build is something similar to the annotation functionality in the Avalla app but now in my case, I want to annotate an image and also attach other form details to the post request with the annotated image.In that sense,I need something that is lighter than avalla or heavy . Technically how react image annotation library works.
Key Requirements:
- Image annotation should work across mobile and desktop devices.
- Annotations should be saved in a way that they can be edited later
(e.g., allowing users to add/remove annotations from an already
annotated image).
Even if there’s no out-of-the-box package, I’d appreciate some guidance on the theory or approach to build such a tool from scratch.
Again , I tried converting the react-image-annotation library to react native but that is something that cannot work since one uses the dom and the other doesn’t.
I’ve also tried to make the use of gestures and the panresponder but realized on saving the image I cannot undo the gestures neither doesn’t come out as expected.
If anyone has experience with this or can point me in the right direction, I’d be very grateful!