I would like to track finger gestures in a React Native app while a person searches for items in a blurred image (see below screen capture from Mouseview.js). Gestures will be recorded (i.e., screen coordinates where the person has "searched" the image, "dwell time", etc.) for data analysis.

As the person moves their finger across the screen, the portion of the mask that reveals the underlying image changes (e.g., see below).

For gesture tracking, I am thinking of using PanResponder, but I do not know how to achieve the blurred image / dynamic mask effect. Any suggestions for how to do this efficiently?

Thank you in advance.