React-native: [Android] Incorrect visual initialization of transform scale 0

[peterjuras]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[peterjuras]

well this is still happening, it can be reopened again, but closing it is not helpful.

[chrismllr]

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

[jamesreggio]

Seeing the same problem, too.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[Annihil]

Issue still there in v0.53.0

[snlove]

The issue still there in v0.56.0

[giomv]

Try setting up value1, value2 and value3 outside the state. Just declare the variables like these:

this.value1 = new Animated.Value(0),
this.value2 = new Animated.Value(0.5),
this.value3 = new Animated.Value(1),

And change all the references to those variables to avoid the unnecessary use of the state.

[VinceBT]

Let's reopen this ticket, this problem has been there for a ridiculously long time

[ionTea]

Still an issue in v0.57.7

[kyle-ssg]

This ticket needs to be reopened, this affects most animations and has done for a long time. Writer of a duplicate ticket https://github.com/facebook/react-native/issues/6278 in 2016 was told to create a new ticket and here it is.

Initialising values to 0.0001 is a workaround (albeit a horrid hack)