React native android animation

Question

I'm trying to animate the height of a View in react native. The animation is working as expected in iOS but is not working in Android. The animated View seems to always be full height regardless of the animation value. Relevant code is below:

var Facets = React.createClass({
  getInitialState: function() {
    return {
      h: new Animated.Value(0),
    };
  },

  _animate: function(newHeight) {
    Animated.timing(this.state.h, {
      duration: 300,
      toValue: newHeight
    }).start();
  },

  render: function() {
    var facetComponents = [];

    if (this.props.shown) {
      this._animate(MAX_HEIGHT);
    }
    else {
      this._animate(0);
    }

    facets.map( (facet, idx) => {
      facetComponents.push(
        <Facet
          key={idx}
          facet={facet}
          filterBy={this.props.filterBy} />);
    });

    return (
      <Animated.View style={{ maxHeight: this.state.h }}>
        {facetComponents}
      </Animated.View>
    );
  }
});

Answer 1

Try moving your Animated Value out of state:

componentDidMount() {
  this.h = new Animated.Value(0)
}

Then, refer to it as this.h as opposed to this.state.h