use animated flatlist
// to use animated flatlist use this syntax
import {FlatList} from 'react-native';
import Animated, {
withSpring,
useAnimatedStyle,
useSharedValue,
useAnimatedGestureHandler,
withDecay,
useAnimatedScrollHandler,
} from 'react-native-reanimated';
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const translateY = useSharedValue(0);
const scrollHandler = useAnimatedScrollHandler((event) => {
console.log(translateY);
translateY.value = event.contentOffset.y;
});
<AnimatedFlatList
data={DATA}
onScroll={scrollHandler}
ListHeaderComponent={FlatListHeader}
renderItem={RenderIteam}
scrollEventThrottle={16} // <-- Use 1 here to make sure no events are ever missed
contentContainerStyle={{
paddingTop: 60,
paddingHorizontal: 25,
paddingBottom: 60,
width: Screen.width,
}}
/>
// All this will be wrap inside your function componet