0

For different reasons I'm trying to reproduce the pan behaviour of a scroll view. I'm using Animated.decay in my PanResponder, but I need to clamp the values between 0 and the size of my content so it doesn't go out of bounds

I used Animated.diffClamp to do that, but it doesn't exactly clamp the values of the AnimatedValue, it just creates a new clamped AnimatedValue from that value.

The best solution for me would be to be able to specify bounds in the Animated.decay configuration, such as:

Animated.decay(this.state.animatedPos, {
  velocity: {vx: vx, vy: vy},
  bounds: [0, viewWidth, 0, viewHeight]
}).start();

But I didn't see anything like that in the doc. What would be the best way to achieve that?

Thanks!

Julien Fouilhé
  • 2,583
  • 3
  • 30
  • 56

1 Answers1

1

That's the point. The new clamped AnimatedValue is what you use to clamp stuff. I suggest that this.state.animatedPos would typically be used to for touch events and the Animated.decay, and the clamped AnimatedValue for interpolation, styling etc...

Mohamed Abo El Soud
  • 56
  • 3
  • Yes, but then I would like to be able to add a listener to the clamped AnimatedValue so I can get the real value used, and it doesn't seem to be possible... It says that `addListener` is undefined – Julien Fouilhé Nov 22 '16 at 04:32
  • lets say `temp = Animated.diffClamp(this.state.animatedPos,0,100)` then `temp.__getValue()` gets you the value – Mohamed Abo El Soud Nov 22 '16 at 04:39
  • Ok, I guess I did not understand that diffClamp was actually using a diff with the last value so that the value changes when you get closer to the bounds... Hence why it was acting strange when I was resetting the values of animatedPos to 0. Thanks – Julien Fouilhé Nov 22 '16 at 04:54