Hide header based on useScrollViewOffset

[lsarni]

I'm new to reanimated, but can't figure out how to hide the header and/or change the style of the StatusBar based on the value I get from useScrollViewOffset

const CARD_HEIGTH = 375;

const scrollViewRef = useAnimatedRef<Animated.ScrollView>();
const scrollHandler = useScrollViewOffset(scrollViewRef);

const isShowingHeader = scrollHandler.value > CARD_HEIGTH;

return (
  <>
      <StatusBar style={isShowingHeader ? 'dark' : 'light'} />

      <Stack.Screen
        options={{
          title: 'Screen'
          headerShown: isShowingHeader,
        }}
      />

    <Animated.ScrollView ref={scrollViewRef} scrollEventThrottle={8}>
       ...
    </Animated.ScrollView>
  </>
)

I have tried useAnimatedProps but they are undefined. I tried using createAnimatedComponent to create an animated version of this components but that doesn't work.

What is the way of deal with this?

I also will do some actual styling animating to the content of the scroll view, but that seems straight forward from the documentation.

Thanks!