1 year ago

#386627

test-img

Chandra

React native FlatList Scroll item Animation start from bottom

FlatList Item scroll animation start Top to Bottom and Bottom to Top. Click me for to animation Image

There are two FlatList Scroll Item Animation First work when item reached almost top(Item Height) of the mobile and Second will start from bottom when Item appear

First Animation Code

const ItemComponent = ({item, index, scrollY}) =>{

    const ITEM_SIZE = 134+30;
        const inputRange = [-1 ,0,ITEM_SIZE * (index), ITEM_SIZE * (index+2)]
        
          const scale = scrollY.interpolate({
            inputRange,
            outputRange:[1,1,1, 0],
            extrapolate: "clamp",
          })
    return (
        <Animated.View style={[styles.overlayView, {transform:[{scale}]}]}>
        <View>.........</View>
        </Animated.View>
        )
}

export default ItemComponent;

Second Animation is not working Anyone have any Idea How it will work?

reactjs

react-native

animation

react-hooks

jquery-animate

0 Answers

Your Answer

Accepted video resources