The image attached is a single screen, with different scroll positions. At frame A, thats the default, when the scroll position contentOffset.y is at 0, The second frame shows when the contentOffset.y === >200. I want to save the scroll position to my React state, and animate the view base on the scroll position.

I am using this function to get the scroll position and save it into the component state.

const handleOnScroll = (event: any) => {
    const { contentOffset } = event.nativeEvent
    const { y } = contentOffset
    if (y > 200) {
        setShowScreenTitle(true)
        setScrollPosition(y)
    } else {
        setShowScreenTitle(false)
        setScrollPosition(y)`
    }
}

The problem facing now is a performance problem as anytime the scrollPosition changes, The app refreshes, making the app looks like there's a glitch. How can I smoothly, update the states with the scroll position smoothly with better performance.