0

It is possible to get the current animated value using ._value while nativeDriver is false.

But is it possible to get current value when nativeDriver is turned to true ?

Do we have any work arounds ?

Andresh Singh
  • 104
  • 4
  • This sounds like an [XY Problem](http://xyproblem.info/). What are you actually trying to do? – Kraylog Apr 21 '19 at 15:57
  • @Kraylog I am trying to implement a snapping list. So need to calculate index using the real time value of the animated.value. So the animated value is bind with the scrollview. – Andresh Singh Apr 21 '19 at 18:01
  • Have to show title based on the item that is in center of the screen. – Andresh Singh Apr 21 '19 at 18:08

2 Answers2

1

use addListener like so:

this._animatedValue = new Animated.Value(0);

this._animatedValue.addListener(({value}) => this._value = value);

Animated.timing(this._animatedValue, {
   toValue: 100,
   duration: 500
}).start();
Konstantin Paulus
  • 1,943
  • 2
  • 10
  • 22
0

I figured out a workaround for scenarios like this, where the native driver spoils our offset and gives a jump in our animation towards the end.

Create a pseudo animated value (which will not be used for any animation) and keep updating it alongside your original animated value. Finally when your animation is over (like decay, spring, etc.) set the offsets and current angle with the pseudo value as below:

const angle = useRef(new Animated.Value(0)).current; //original value used in animation; will run on native side
const psuedoAngle = useRef(new Animated.Value(0)).current; //only to track the value on JS side

//using PanResponder
...
  onPanResponderMove: (evt, gestureState) => {
      angle.setValue(some_value);
      psuedoAngle.setValue(same_value);
  },
  onPanResponderRelease: (evt, {vx, vy}) => {
    // calculate your velocity 
    ...
    const decay1 = Animated.decay(angle,{
        velocity: velocity,
        deceleration: 0.997,
        useNativeDriver: true
      }
    );
    const decay2 = Animated.decay(psuedoAngle,{
        velocity: velocity,
        deceleration: 0.997,
        useNativeDriver: false //this will keep your pseudo value intact
      }
    );

    //set offset and current angle in callback as below

    Animated.parallel([decay1,decay2]).start(() => {
      psuedoAngle.flattenOffset();
      angle.setOffset(psuedoAngle._value);  //correct value passed to original value
      psuedoAngle.setOffset(psuedoAngle._value);
      angle.setValue(0);
      psuedoAngle.setValue(0);
    });
  }
Moid
  • 11
  • 1