React Native PanResponder Offset not working

Question

I am trying to keep the pans Y offset when the user releases for the first time - I have looked around at how to accomplish this using the following methods but the offset is being ignored:

constructor(props) {
super(props);

this._pan = new Animated.ValueXY();

this._pan.addListener(value => {
  this._value = value;
  const {height: windowHeight} = Dimensions.get('window');
  this.props.onZoomProgress(
    Math.min(Math.max((value.y * -1) / windowHeight, 0), 0.5),
  );
});

this._panResponder = PanResponder.create({
  onMoveShouldSetResponderCapture: () => true,
  onMoveShouldSetPanResponderCapture: () => true,

  onPanResponderGrant: (e, gestureState) => {
    this._pan.setOffset({x: 0, y: gestureState.dy});
    this._pan.setValue({x: 0, y: 0});
  },

  onPanResponderMove: (e, gestureState) => {
    this._pan.setValue({y: gestureState.dy, x: 0});
    console.log(this._pan.y);
  },

  onPanResponderRelease: (e, gestureState) => {
    this._pan.extractOffset();
  },
});
}

This is a seperate component for this functionality so I am using this.props.onZoomProgress() to pass the value to use as the zoom state in my main component.

Cheers!

bmovement · Accepted Answer · 2020-05-12T03:35:57.013

1

I'm not sure that this is your issue, but the part where you're directly accessing the internal value of your Animated.ValueXY looks suspect to me. Usually you'd add a listener to that if you want to get an actual number instead of just letting the animated value do the work.

Something like this:

this._pan.addListener(value => {
  this._value = value;
  const {height: windowHeight} = Dimensions.get('window');
  this.props.onZoomProgress(Math.min(Math.max((value.y * -1) / windowHeight, 0), 0.5))
});

The important thing to note is that you don't get the value of an Animated Value directly, you either assign the object to an Animated component and it updates magically, or you set up a listener, and get the value as it's passed in to you.

edited May 12 '20 at 03:35

answered May 11 '20 at 20:02

bmovement

827
7
11

I think you'd call onZoomProgress from your listener, using the value that was passed in. – bmovement May 12 '20 at 03:15
I'm not quite sure what you mean - like outside of the onPanResponderMove()? – hugger May 12 '20 at 03:18
When I have the listener and console log the value it is showing correctly, however when I pass it with onZoomProgress I am getting an error saying it is NAN – hugger May 12 '20 at 03:20
Check my addition. – bmovement May 12 '20 at 03:36
Thank you, this is great and feels a lot cleaner, but my Y Offset is still being ignored and the zoom / panresponder is resetting after the first go – hugger May 12 '20 at 03:49
It works - my problem at the end was using onPanResponderGrant. I had to simply get rid of it completely. Thank you for the help! Now I have to figure out how to stop the value from going below zero – hugger May 12 '20 at 04:43

React Native PanResponder Offset not working

1 Answers1