React Native: Animation not working properly on android

Question

I have been trying to fix issue for the past 2 days, it works fine on iOS

constructor(){
  super();

  this.animation = new Animated.Value(0)

  this.state = {
    expanded: false,
  };
}
toggle(){
  let initialValue = this.state.expanded? 1 : 0 ,
     finalValue = this.state.expanded? 0 : 1

  this.setState({
     expanded: !this.state.expanded,
  });

  this.animation.setValue(initialValue)
  Animated.timing(
    this.animation,
    {
      toValue: finalValue,
    }
  ).start();
}

render(){
  return(
    <Animated.View style={{{flex: 1, marginTop: 28, paddingLeft: 25, transform: [{ scale: this.animation }, {perspective: 1000 }]}}}>
     ....
    </Animated.View>

  );
}

This component is child , used in parent like this: <FeedBack ref={ref => this.feedback = ref}/> without any conditions to check to show or not (because animation scale is set to Zero in the constructor, so no need)

the toggle() method is being called from parent when a button pressed.

Now this works fine on iOS , when component loads, the view is not there until a button is pressed (then scaled). but on android when the component loads, the view already there. When I press the button, the animated view disappears and re-appears (with animation scaling) and subsequent toggles work fine. The problem in android is that even though initialValue of the scale is Zero, the view is still there when it first loads.

Answer 1

This has been an issue with react-native on the android side for a while now (sigh). It seems that setting the value to 0 strips it of its characteristics, basically deeming it as null and then reverting to using its actual value once it had animated to > 0

A work around is to set animation like so this.animation = new Animated.Value(0.01);

You can follow the issue here