Malformed calls from JS: field sizes are different. React Native Error. Expo

I'm trying to create an expandable banner based of this:

https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/

It seems to be when I add this code for Animations:

<Animated.View
  style={[styles.container, { height: this.state.animation }]}>

From what I can tell the problem has something to do with the animation and is linked with the max or min height but I cannot work out how to do it.

The full code is:

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  Animated,
} from "react-native";

export default class Banner extends Component {
  constructor(props) {
    super(props);

    this.icons = {
      "up": require("../assets/glyph/arrow-up.png"),
      "down": require("../assets/glyph/arrow-down.png"),
    };

    this.state = {
      title: this.props.title,
      expanded: true,
      animation: new Animated.Value(),
    };
  }

  toggle() {
    let initialValue = this.state.expanded
        ? this.state.maxHeight + this.state.minHeight
        : this.state.minHeight,
      finalValue = this.state.expanded
        ? this.state.minHeight
        : this.state.maxHeight + this.state.minHeight;

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

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

  _setMaxHeight(event) {
    this.setState({
      maxHeight: event.nativeEvent.layout.height,
    });
  }

  _setMinHeight(event) {
    this.setState({
      minHeight: event.nativeEvent.layout.height,
    });
  }

  render() {
    let icon = this.icons["down"];

    if (this.state.expanded) {
      icon = this.icons["up"];
    }

    return (
      <Animated.View
        style={[styles.container, { height: this.state.animation }]}
      >
        <View
          style={styles.titleContainer}
          onLayout={this._setMinHeight.bind(this)}
        >
          <Text style={styles.title}>{this.state.title}</Text>
          <TouchableHighlight
            style={styles.button}
            onPress={this.toggle.bind(this)}
            underlayColor="#f1f1f1"
          >
            <Image style={styles.buttonImage} source={icon}></Image>
          </TouchableHighlight>
        </View>

        <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
          {this.props.children}
        </View>
      </Animated.View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    margin: 10,
    overflow: "hidden",
  },
  titleContainer: {
    flexDirection: "row",
  },
  title: {
    flex: 1,
    padding: 10,
    color: "#2a2f43",
    fontWeight: "bold",
  },
  button: {},
  buttonImage: {
    width: 18,
    margin: 5,
    marginRight: 18,
    height: 18,
  },
  body: {
    padding: 10,
    paddingTop: 0,
  },
});

I'm currently using the latest version of expo for react-native.