Animated.Value.stopAnimation(callback) always returns 0 as the callback value if useNativeDriver = true in Animated.timing

[cailenmusselman]

Description

With useNativeDriver: true in Animated.timing options, Animated.Value.stopAnimation((value) => void) receives 0 as a value, regardless of the animation's progress.

Reproduction

import React from 'react';

import {
  View,
  Animated
} from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
  	this.state = { 
    	translateY: new Animated.Value(0) 
    };
  }
  componentDidMount() { 
    Animated.timing(this.state.translateY, { 
      useNativeDriver: true, // <- with 'false' the correct value is returned in the callback
      delay: 0,
      duration: 5000,
      toValue: 1000
    }).start();
    setTimeout(() => { 
    	this.state.translateY.stopAnimation((value) => console.warn(value)); // 'value' always 0
    }, 2000);
  }
  render() {
    return (
      <View style={{
      	height: 20,
      	width: 20,
      	backgroundColor: 'red',
      	transform: [{
          translateY: this.state.translateY
      	}]
      }}>
      </View>
    );
  }
}

Solution

value should be the animation's current value when stopped, like it is with useNativeDriver: false. Or if this isn't possible with useNativeDriver the docs should be updated.

Additional Information

• React Native version: 0.39
• Platform: Android (maybe both)
• Operating System: Windows

[hramos]

We're cutting down on the number of outstanding issues, in order to allow us to focus. I'm closing this issue because it has been open for over 60 days with no activity. If you think it should still be opened let us know why. PRs are always welcome.

[renso3x]

how does the solution look like?

[mkraessig]

This is still a problem 👋 (all platforms, 0.55.2)