LayoutAnimation doesn't play well with justifyContent: 'space-between'

Question

Something is really annoying me with LayoutAnimation. See the video and notice the jump on the counters.

Also, here's a repository on RNPlay: https://rnplay.org/apps/atSZAA

I'm using a simple config here:

componentWillUpdate() {
   LayoutAnimation.easeInEaseOut();
}

Here's my component:

<View style={{flexDirection: "row"}}>

    {
        this.props.editMode &&
        <TouchableHighlight style={[styles.listItemDeleteButton]} onPress={this.props.onPressDelete}>
            <Text style={{color: "white"}}>Delete</Text>
        </TouchableHighlight>
    }

    <TouchableHighlight style={styles.liRowContainer} onPress={this.props.onPress}>
        <View style={styles.li}>
            <Text style={styles.liText}>{this.props.ower.name}</Text>
            <Text style={styles.liCounter}>{this.props.ower.total}</Text>
        </View>
    </TouchableHighlight>
</View>

And here's my styles:

  li: {
    backgroundColor: '#fff',
    borderBottomColor: '#eee',
    borderColor: 'transparent',
    borderWidth: 1,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 14,
    paddingBottom: 16,
    flexDirection: "row",
    flex: 1,
    justifyContent: 'space-between',
  },
  liRowContainer: {
    flexDirection: "row",
    justifyContent: "center",
    flex: 1,
  },
  liText: {
    color: '#333',
    fontSize: 16,
  },
  liCounter: {
    color: '#333',
    fontSize: 16,
    textAlign: "right",
  },
  listItemDeleteButton: {
      backgroundColor: "#FF4500",
      justifyContent: "center",
      flexDirection: "column",
      paddingRight: 10,
      paddingLeft: 10,
    borderBottomColor: "#F33F03",
    borderColor: 'transparent',
    borderWidth: 1,
  },

What am I doing wrong?