React-Native ListView row animation on the y axis

Question

Running into some trouble animating rows on the y axis in my ListView. x axis is fine, y axis is a no go.

This is a stripped down version of what I'm doing: Style:

var animateStyle = {transform:[{translateX: this.state.position.x, translateY: this.state.position.y}]}

Animated View:

<Animated.View ref={(row) => main[userId] = row} style={[animateStyle]}>
  <TouchableHighlight onPress={() => this._move()}>
    <Text>hello</Text>
  </TouchableHighlight>
</Animated.View>

The example below sets the x value and moves the row perfectly fine but if you switch out the values to animate on the y axis nothing happens.

_move: function() {
  var newValue = this.state.position.x._value+1;
  this.state.position.x.setValue(newValue);
  var thisUserComponent = this.props.main[this.props.user.id];
  thisUserComponent.refs.node.measure((x, y) => {
    console.log(x, y);
  });
}

Any ideas? It might simply not be possible - which is why I'm here, cheers!

I don't have the answer, but check out how others have done it. This might help as it animated the y axis github.com/dancormier/react-native-swipeout — Chris Geirman
Thank you for offering some help, Chris! However, it looks like this component only animates on the x axis (horizontally). — thisbejim
On, man... I totally blew that one! I must have been tired. Sorry for wasting your time and literally adding no value. When Spencer Ahrens announced animate, he showed some fairly complex examples. Maybe there's something in there that will help? I haven't played with animate yet myself, so this is as helpful as I can be unfortunately. Here's that link reactnative.com/react-native-animated — Chris Geirman

thisbejim thisbejim · Accepted Answer · 2015-11-17T06:41:47

To get everything working I had to change how I was loading the transform.

Before I was doing:

var animateStyle = {transform:[{translateX: this.state.position.x, translateY: this.state.position.y}]}

You've got to separate each transform with curly braces:

var animateStyle = {transform:[{translateY: this.state.position.y}, {translateX: this.state.position.x}]}

<Animated.View style={[containerStyle, animateStyle]}>

Which will make everything work as expected.

React-Native ListView row animation on the y axis

1 Answers