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
.
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;