Irfan wani
Irfan wani

Reputation: 5094

Is there any way to set a limit on sharedvalue in react native reanimated

I am adding some gestures in my app to an image (same as we have in whatsapp, open any contact's profile picture in full mode and see the pinch, translation and other gestures).

I already applied single tag, double tap and also pinch gestures and pan gestures to get the desired results.

Now here is my problem. When I use pinch gesture, I am also adding some transformation to the image to center it where the pinch was performed (as we usually have in different apps). But what I want is, there should be some limit on the translations so that the edge of image will never leave the edge of the screen (e.g, if we are moving towards left, once we reached the end of the image, it should be further movable and should not leave the edge anymore).

So I think one solution is to set a limit on translations which I can do manually too but I wanted to know if there is any way to directly set a limit on the shared values.

Please let me know if any code is needed.

EDIT:

I tried to manually clamp the values using this formulla (width * scale.value - width) / 2 as this gives us the offset, but it is not working and by some tries, I came up with this formulla ;

(width / (2 * scale)) * (scale - 1)

Note that this only works for the x-axis. For y-axis nothing is working to clamp the translation values.

Upvotes: 1

Views: 270

Answers (0)

Related Questions