Animating ListView row deletions with React Native LayoutAnimation

Question

I'm having difficulty animating the deletion of a row from ListView using LayoutAnimation.

Since LayoutAnimation.spring preset animation handles view updates with a spring and view creations with a fade, I expected the bottom existing rows to spring upwards after the deletion. Instead, they fade in.

Using RN 0.18.1

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var movies = [movie1, movie2, movie3, movie4, movie5];

...

renderRow(row) {
  return <MovieRow key={row.movieId} />
}

...

// immutable delete of element in reducer (redux)
movies = movies.slice(0, 2).concat(movies.slice(3));

...

LayoutAnimation.spring();
this.setState({
  dataSource: ds.cloneWithRows(movies)
});

Answer 1

It seems like LayoutAnimation doesn't support deletion yet.

Note: LayoutAnimation works for Create and Update layout events. Deletion is not supported yet. Notice when circles are removed there is no animation.

Check this: https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.9cdaqazay

Edit: Deletion is supported now:

Android: 0.28 release notes

iOS: 0.26 release notes

Answer 2

The latest react-native already support animation on deletion. I did something like:

const CustomLayoutLinear = {
  duration: 300,
  create: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut
  },
  delete: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  }
};

Only create or delete will trigger opacity easing in and out. Update the component just do easeIn and ease out.

Then hook the customLayoutLinear when mounting the component

  LayoutAnimation.configureNext(CustomLayoutLinear);