CODEWITHSUNDEEP
react-nativereact-native-flatlistreact-native-animatable
praveen seela
praveen seela

Reputation: 528

react-native flatlist animate on item remove/slide up

I want to animate removal of items on removal from FlatList.

I have a custom card component as item in a FlatList. I am showing it vertically.

now, I want to animate the removal of item. item can be removed from any place/index.

Animation on removal is, item should hide and the items below should slide-up slowly. It should be smooth, I have done normal its not smooth. I am able to do the animation of opacity but the translateY is not working as required on card.

using below animation for hiding the deleted card:

Animated.timing(this.animation, {
    toValue: 1,
    duration: 600,
    // easing: Easing.linear,
    delay: this.props.index * 1000,
}).start();

const animatedStyle = {
    opacity: this.animation,
    // transform: [
    //     {
    //         translateY: this.animation.interpolate({
    //             inputRange: [0, 1],
    //             outputRange: [0, 300],
    //         }),
    //     },
    // ],
}

in card render()

<Animated.View style={[animatedStyle]}>
    ......
    // mycode
</Animated.View>

not able to control/animate the FlatList re-render/scroll/scroll-up behavior.

Can someone help me?

Upvotes: 4

Views: 6210

Answers (1)

praveen seela
praveen seela

Reputation: 528

I have applied the below animations on my card component/renderItem in FlatList with two animations: 1- fading 2- sliding.

  • Fading is via opacity
  • Sliding Animation is achieved through Animated, timing on height of card. Haven't used transform-translateY as the FlatList moving elements faster than animation & not getting proper sliding effect.
//initialize two animated variables
this.animation = new Animated.Value(1);
this.slide = new Animated.Value(1);

const cardAnimationHeight = AppSizes.isTablet ? 194 : 360;
//interpolating height to get slide animation 
const animatedStyle = {
  opacity: this.animation,
  height: this.slide.interpolate({
    inputRange: [0, 1],
    outputRange: [0, cardAnimationHeight],
  }),
};

render() {
  return (
    <Animated.View style={this.state.isThisCardSelected ? [animatedStyle] : null}>
       //  rest of card
    </Animated.View>
)}

//start animation
startAnimation = () => {
  this.setState({ isThisCardSelected: true }, () => {
  //setting isThisCardSelected to true to apply the above style which will trigger fade & after fading is done, applying height animation which will give the slide effect. 
  Animated.timing(this.animation, {
    toValue: 0,
    timing: 1000,
  }).start(() => {
    Animated.timing(this.slide, {
      toValue: 0,
      duration: 500,
    }).start(() => {
      //do you logic/actions
      this.setState({ isThisCardSelected: false }, () => {
        this.slide.setValue(1);
      });
    });
  });
 });
};

Call the startAnimation() whenever you need the fading+sliding animation.

Upvotes: 1

Related Questions