Android: Initial render with scale 0 does not work

React Native version: 0.61.4 (also tried with 0.61.2)

Steps To Reproduce

1. On Android, render a component with scale 0

Describe what you expected to happen: The item should not be visible. This works fine on iOS.

What actually happens: The item renders normal size. Changing the value to something like 0.0001 works, but too many zeros will break it. Also the threshold for the number of zeros that break it seems to be related to how complex the children are but I’m not 100% sure with this one. I just know that some of my views break even with scale set to 0.1.

This seems very similar to https://github.com/facebook/react-native/issues/6278 but it looks like that issue was supposedly fixed by https://github.com/facebook/react-native/commit/ab80001c905dbfb9354232c7a6c7e887736642b5

Snack, code example, screenshot, or link to a repository: I have been unable to reproduce this in a basic example so I will paste one of the use cases along with some gifs.

Component being rendered:

import React, { Component } from 'react';
import { Animated } from 'react-native';

import style from './loading.style';

const dotKeys = ['dotOne', 'dotTwo', 'dotThree'];
const dotMin = 1;
const dotMax = 1.5;
const duration = 250;

const flatten = arr => [].concat(...arr);

export class Loading extends Component {
  private timeout: any;

  state = {
    hidden: true,
    width: new Animated.Value(0.00001),
    dotOne: new Animated.Value(1),
    dotTwo: new Animated.Value(1),
    dotThree: new Animated.Value(1),
  };

  componentDidMount() {
    this.timeout = setTimeout(() => {
      this.setState({ hidden: false });
    }, 2000);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
  }

  componentDidUpdate(_, { hidden: prevHidden }) {
    if (prevHidden && !this.state.hidden) {
      const appear = Animated.timing(this.state.width, {
        toValue: 1,
        duration: 100,
        useNativeDriver: true,
      });
      const animations = dotKeys.map(dotKey => [
        Animated.timing(this.state[dotKey], {
          toValue: dotMax,
          duration,
          useNativeDriver: true,
        }),
        Animated.timing(this.state[dotKey], {
          toValue: dotMin,
          duration,
          useNativeDriver: true,
        }),
      ]);
      appear.start(() => {
        Animated.loop(Animated.sequence(flatten(animations))).start();
      });
    }
  }

  render() {
    return (
      <Animated.View style={[style.container, { transform: [{ scaleX: this.state.width }] }]}>
        {dotKeys.map(dotKey => (
          <Animated.View key={dotKey} style={[style.dot, { transform: [{ scale: this.state[dotKey] }] }]} />
        ))}
      </Animated.View>
    );
  }
}

============================================ Gifs

Working:

Broke - Scale 0:

Broke - Scale Nearly 0:

[wodin]

The workaround is basically to use 0.01 or 0.001 etc. instead of 0.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.