[Android] Calling setValue on an Animated.Value has no effect

[sbeca]

With the following example code:

Example code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Animated, Button, Easing, StyleSheet, View } from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  _animatedValue1 = new Animated.Value(1);
  _animatedValue2 = new Animated.Value(1);

  render() {
    return (
      <View style={styles.container}>
        <Button title={'Start Animation'}
          onPress={() => { this._startAnimation(); }} />
        <Animated.View style={
          {
            ...styles.animatedViewBaseStyle,
            transform: [{
              scaleX: this._animatedValue1
            }]
          }
        } />
        <Animated.View style={
          {
            ...styles.animatedViewBaseStyle,
            transform: [{
              scaleX: this._animatedValue2
            }]
          }
        } />
      </View>
    );
  }

  _startAnimation() {
    this._animatedValue1.setValue(0);
    this._animatedValue2.setValue(0);

    Animated.sequence([
      Animated.timing(this._animatedValue1, {
        toValue: 1,
        delay: 0,
        duration: 1000,
        easing: Easing.back(),
        useNativeDriver: true,
      }),
      Animated.timing(this._animatedValue2, {
        toValue: 1,
        delay: 100,
        duration: 1000,
        easing: Easing.back(),
        useNativeDriver: true,
      })
    ]).start();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  animatedViewBaseStyle: {
    height: 50,
    width: 100,
    marginTop: 10,
    backgroundColor: 'purple'
  },
});

I see the following animation on iOS, which is what I would expect to see:

But on Android I see this animation, which looks incorrect:

Notice that on iOS, the scale values of both rectangles gets set to 0 at the start of the animation but on Android that is not the case. It looks to me like the calls to setValue(0) aren't working on Android.

React Native version:

info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
      Memory: 209.27 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.3.1 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 28
        Build Tools: 28.0.3
        System Images: android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.9 => 0.59.9 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-macos-cli: 2.0.1

Steps To Reproduce

1. Download attached example project
2. Run example project on iOS and observe how the boxes animate
3. Run example project on Android and observe how the boxes animate

Example project:
SetValueTest.zip

[sbeca]

As a follow up, it looks this works on Android:

    this._animatedValue1.setValue(0.00001);
    this._animatedValue2.setValue(0.00001);

But this doesn't work on Android:

    this._animatedValue1.setValue(0);
    this._animatedValue2.setValue(0);

Both work fine on iOS.

[cabelitos]

Hello everyone and @sbeca I created a fix for this issue.
Comments and suggestions are appreciated, please see: #25438

Thank you very much.