Incorrect visual initialization of transform scale 0

[Cryszon]

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 using React Native 0.21.

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.

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>
    )
  }
}

[brentvatne]

@facebook-github-bot label Android

[brentvatne]

This works as expected on iOS, but indeed appears to be broken on Android.

iOS

Android

See: https://rnplay.org/apps/-NwWMw

[grabbou]

Also, same for height: 0 to height: 40 animation on Android, works normally on iOS. See http://stackoverflow.com/questions/35926051/why-does-rn-animated-timing-tovalue-of-0-not-animate for reference.

[9mm]

Have you found any workarounds? Setting it to 0.01 is the only thing I can find.

[grabbou]

The issue might lay somewhere deeper - height: 0 on a <View /> also does not seem to work (See closed #7133)

[m3vaz]

Still an issue as of 0.31

[m3vaz]

Setting scale to 0 seems to strip the component of other applied styles/transforms.
Modifying the original example:

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

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.timing(this.state.value1, {fromValue: 0, toValue: val, easing: Easing.linear}).start();
    Animated.timing(this.state.value2, {toValue: val}).start();
    Animated.timing(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}, {translateX: -50}, {rotate: '90deg'}]}
        ]}>
          Fixed scale: 0
        </Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 1}, {translateX: -50}, {rotate:'90deg'}]}
        ]}>
          Fixed scale: 1
        </Text>
      </View>
    )
  }
}

[LeoBakerHytch]

Still an issue as of 0.35

[funkysoul]

I'm experiencing a similar issue, bit different though.
I have an Image which I want to scale from 1 to 0 using an interpolation value on transform:[{scale:value}].

The scale animation runs through but as soon as it hits 0 the image is fully scaled again (back to scale: 1)

But setting the end value (0) to 0.0001 works fine.

This happens to me on Android and iOS with RN 0.40

[bsonntag]

Here is another example that doesn't even use Animated:

https://rnplay.org/apps/4O316Q

When a node has a scale set to 0, it seems to use it's last sibling's scale value.
As other people said, using values close to zero (e.g. 0.001), works fine.

Running the above example in the emulators has the same result:

iOS on the left, Android on the right: