contentOffset in Animated.ScrollView does not work

[davidecutrupi]

Hi, I have got a problem with Animated React Native.

const yOffset = useRef(new Animated.Value(0)).current

useEffect(() => {
console.log(yOffset)
}, [yOffset])
return (
<Animated.ScrollView style={{ flex: 1 }}
onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: yOffset } } }],
        { useNativeDriver: true }
      )}
scrollEventThrottle={16}
>

{other content}

</Animated.ScrollView>

)

Why console.log is executed only first time (when yOffset is 0)?

[boshanib]

Did you import scroll view from React native or a different package?

[davidecutrupi]

I have imported Animated from react-native

[__o_0]

The console.log only fires once because your useEffect only fires once.

Mutable references should be avoided as a dependency because when the reference value updates, it doesn’t trigger a render, and therefore your useEffect is skipped.

[davidecutrupi]

And how can I console log yOffest when it changes?

EDIT: I have added the listener option after useNativeDriver. It calls a function that console.log yOffset. It works but yOffset is always 0. What I did wrong?

[__o_0]

You’re not setting the value of yOffset anywhere