react-native: Incorrect visual initialization of transform scale 0

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