Change the close animation of the <Swipeable />

[diegorodriguesvieira]

Hello everyone, I'm trying an animation, but no success so far:

I need to do the animation below when deleting a record: https://youtu.be/u6LfNXzJ7xk

What I have: https://youtu.be/z-mMVXxwOPI

My code: https://snack.expo.io/@diegorodriguesvieira/dcf0b0

I thought of using this.close() from <Swipeable />, but the animation is different. Is there any way to change this animation?

[diegorodriguesvieira]

I created a workaround but I don't know if it is the best solution. Any idea? https://snack.expo.io/@diegorodriguesvieira/last-swipable

[ShaMan123]

you need to implement Animated on the Swipeable before it's removed from the list. Once the animation ends remove it.

handleRemove = id => {
         Animated.timing(__a, config).start(()=>this.setState(prevState => ({ data: prevState.data.filter(item => item.id !== id) })))
  };

[diegorodriguesvieira]

@ShaMan123 can you take a look? https://snack.expo.io/@diegorodriguesvieira/last-swipable

[ShaMan123]

I did. Change handleRemove method as I mentioned in the previous comment. You must use Animated API

[diegorodriguesvieira]

done.

https://snack.expo.io/@diegorodriguesvieira/last-swipable

[shhhiiiii]

Hi, can someone help me. i tried the example project but when i tried to close the swipeable view but its not working. Am I missing or doing something.. Any help is really appreciated. Thank you so much. i called this onPress : updateRef = ref => { this._swipeableRow = ref; };

close = () => {
    this._swipeableRow.close();
};

this is the sample project link : https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/swipeable/AppleStyleSwipeableRow.js