Answers for "react native flatlist scroll animation"

react native flatlist horizontal scroll

<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}
  legacyImplementation={false}
  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}
  style={{width: SCREEN_WIDTH + 5, height:'100%'}}
/>

flatlist scroll animation

import {Animated } from 'react-native'
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
  
  
  render() {
    return (
      <AnimatedFlatList
        refreshing={this.state.isLoading}
        onRefresh={this.onRefresh}
        contentContainerStyle={{ paddingTop: 200 }}
        scrollEventThrottle={16} // <-- Use 1 here to make sure no events are ever missed
        onScroll={this.props.onScroll}
        data={data}
        renderItem={this._renderItem}
        keyExtractor={(item, i) => i}
      />
    );
  }
}


onScroll={
Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
{ useNativeDriver: false }
)}