[Android] Incorrect visual initialization of transform scale 0

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra Node: 8.7.0 Yarn: 1.3.2 npm: 5.5.1 Xcode: Xcode 9

Packages: (wanted => installed) react-native: 0.49.3 => 0.49.3 react: 16.0.0

Target Platform: Android (7)

Initializing a component with transform: [{scale: 0}] visually initializes it as transfrom: [{scale: 1}]. However, when animating the component it animates as if the initial value was actually 0. Using a float (0.0) doesn’t work either.

The example code below demonstrates this problem. Tested on Android.

Initially pressing “Animate to 0” doesn’t animate the first box at all because its “real” scale is 0. Pressing the other two texts makes it jump to 0 and animate to x from there.

The example also shows how normal components look visually identical when given scales of 0 and 1.

Expected Behavior

Initializing a component with scale: 0 should result in an invisible component

Actual Behavior

Component is visualized with scale: 1

Reproducible Demo

import React, {
  Animated,
  Component,
  StyleSheet,
  Text,
  View,
} from "react-native";

export default class TransformExample extends Component {
  constructor() {
    super(arguments[0]);
    this.state = {
      value1: new Animated.Value(0),
      value2: new Animated.Value(0.5),
      value3: new Animated.Value(1),
    }
  }

  animateTo(val) {
    Animated.spring(this.state.value1, {toValue: val}).start();
    Animated.spring(this.state.value2, {toValue: val}).start();
    Animated.spring(this.state.value3, {toValue: val}).start();
  };

  render() {
    const boxStyle = {
      width: 150,
      height: 50,
      backgroundColor: "#3fc6ae",
      margin: 10,
    }

    return (
      <View style={{alignItems: "center"}}>
        <Text onPress={() => this.animateTo(0)}>Animate to 0</Text>
        <Text onPress={() => this.animateTo(1)}>Animate to 1</Text>
        <Text onPress={() => this.animateTo(1.2)}>Animate to 1.2</Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value1}]}
        ]}>
          Initial scale: 0
        </Animated.Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value2}]}
        ]}>
          Initial scale: 0.5
        </Animated.Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value3}]}
        ]}>
          Initial scale: 1
        </Animated.Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 0}]}
        ]}>
          Fixed scale: 0
        </Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 1}]}
        ]}>
          Fixed scale: 1
        </Text>
      </View>
    )
  }
}

Reopened from #6278

[Annihil]

Issue still there in v0.53.0

[chrismllr]

I am also experiencing the issue - adding opacity to pair with the transform seems to fix the issue for the time being.