3

I'm new to React Native. I want to animate the deletion of FlatList Item on swiping to the left. I'm getting the values of swipe and able to delete the item but it is not smooth.

So, I'm using Animated API of react native and want to make the height of FlatList item 0 in 1000ms after swiping.

I'm using inputRange and outputRange. But I'm not able to get height of current element as height of all elements is dynamic.

Gourav Pokharkar
  • 1,568
  • 1
  • 11
  • 33

1 Answers1

5

You can get the height of a view using the onLayout prop.

<View onLayout={(event) => {
  const {x, y, width, height} = event.nativeEvent.layout;
  // do something here like set your initial animated value for the height
}} />

https://facebook.github.io/react-native/docs/view#onlayout

Animating height is not the best approach as height animations are not performant. You may wish to animate a transform instead and animate the vertical scale of the view.

If you can use the Native driver for animations then they will be very performant https://facebook.github.io/react-native/docs/animations#using-the-native-driver

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but flexbox and position properties will not.

This SO answer explain well how to perform a transform animation https://stackoverflow.com/a/45634834/5508175

My personal approach would be to fade out the contents of the view and then animate the vertical scale of the view to zero.

Andrew
  • 26,706
  • 9
  • 85
  • 101