moving the image (Animated.Image) only within the view react native

Question

I want to move images inside the view but the images should not go beyond the boundaries of the view(screen)

like that:

https://snack.expo.dev/@aisylu24/draggable-image-within-parent-boundaries-

click to see screenshot - i want to move only inside gray view

but I need to use Animated or Reanimated with gesture-handler and Functional component

Maybe I need to use layout for view but I don't know how to do it?

this is my snack where I need to do like that:

https://snack.expo.dev/@aisylu24/lookbook

Click on one of the pictures to see it

Answer 1

You can use a React-native gesture handler for capturing events.

https://docs.swmansion.com/react-native-gesture-handler/docs/gesture-handlers/api/pan-gh/

For animated value you can use default Animated from react-native

and for boundary fixing, you need to learn the concept of interpolation,

translateX.interpolate({
  inputRange: [0, 100], 
  outputRange: [0, 100],
}),

translateY.interpolate({
  inputRange: [0, 100],
  outputRange: [0, 100],
}),

instead of [0,100] you need to add a range based on the area you want.