How can I get Scroll Offset Y value with Animated.event in React Native?

How can I get Scroll Offset Y value with Animated.event in React Native? When useNativeDriver: false the code works properly. However, when useNativeDriver: true it outputs 0. I need to use useNativeDriver: true.

Snack Expo Dev Link

import React, {useRef} from 'react';
import {
  SafeAreaView,
  View,
  StyleSheet,
  Text,
  StatusBar,
  Button,
  Animated
} from 'react-native';

const DATA = [{id: 0},{id: 1},{id: 2},{id: 3},{id: 4},{id: 5},{id: 6},{id: 7},{id: 8},{id: 9}];

const Item = ({title}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {

    const contentOffsetY = useRef(new Animated.Value(0)).current;
    const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }], { useNativeDriver: false });

    function getY(){
      console.log(contentOffsetY._value)
    }

  return (
    <SafeAreaView style={styles.container}>

      <Button title="get Y" onPress={getY}/>

      <Animated.FlatList
        onScroll={onScroll}
        data={DATA}
        renderItem={({item}) => <Item title={item.id} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>

  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Leave a Comment