react-native flatlist animate on item remove/slide up

Question

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?

score 1 · Answer 1 · answered Jul 23 '20 at 09:57

I have achieved using the following logic.

I have applied below animations on my card component/renderItem in flatlist.

There are two animation 1- fading 2- sliding
fading is via opacity
Sliding Animation achieved through Aninated,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.

react-native flatlist animate on item remove/slide up

1 Answers1