I have a with the following structure:
const [headerHeight, setHeaderHeight] = useState(undefined)
...
<ScrollView onScroll={({nativeEvent}) => {
console.log(nativeEvent.contentOffset.y)
}}>
<HeaderComponent
onLayout={({nativeEvent}) => {
setHeaderHeight(nativeEvent.layout.height)
}}
/>
<OtherComponent1 />
<OtherComponent2 />
<OtherComponent3 />
</ScrollView>
After everything has rendered, headerHeight would become 300. If I start scrolling, the console.log function from the onScroll prop in the ScrollView would log at around a 150+ and the would be gone from the screen.
Am I missing something? Since the height of the header is at 300 (based on the onLayout function), shouldn't be the nativeEvent.contentOffset.y value reach 300 first before the is gone from the screen? Why is it already gone at around 150+?
