useReanimatedHeaderHeight() hook returns the wrong header height on initial screen render when used with largeTitle and no additional headers

[TowhidKashem]

Description

Noticing the following issue In iOS (I don't support Android so haven't checked there).

My nav structure looks like this:

<ReanimatedScreenProvider>
  <NavigationContainer
    ...
  >
    <NativeStack.Navigator
      id={undefined}
      screenOptions={{
        headerShown: false,
        headerBlurEffect: 'dark',
        gestureEnabled: true,
        fullScreenGestureEnabled: false,
        headerBackButtonDisplayMode: 'minimal',
        headerTitleStyle: {
          fontFamily: 'Lilita One'
        },
        animationDuration: 150
      }}
    >
      <NativeStack.Screen name="BottomTabs" component={BottomTabs} />
      .....
    </NativeStack.Navigator>
  </NavigationContainer>
</ReanimatedScreenProvider>

----

<BottomTab.Navigator
  initialRouteName="DiscoverTab"
  screenOptions={({ route }) => ({
    animation: 'fade',
    headerShown: false,
    freezeOnBlur: true,
    tabBarBackground: TabBarBackground,
    tabBarButton: (props) => getTabBarButton(props, route.name)
  })}
>
  <BottomTab.Screen name="DiscoverTab" component={DiscoverStack} />
  ...
</BottomTab.Navigator>

----

const DiscoverStack = (): React.ReactNode => (
  <NativeStack.Navigator id={undefined}>
    <NativeStack.Screen
      name="Discover"
      component={Discover}
      options={{
        // these are all large title styles
        headerShadowVisible: false,
        headerLargeTitle: true,
        headerLargeTitleShadowVisible: false,
        headerLargeTitleStyle: {
          fontFamily: 'Georgia',
          fontSize: 34
        },
        headerTitleStyle: {
          fontFamily: 'Georgia'
        },
        headerStyle: {
          backgroundColor: 'black'
        }
      }}
    />
  </NativeStack.Navigator>
);

Inside the Discover component I am doing this:

  const headerHeight = useReanimatedHeaderHeight();

  const animatedStyle = useAnimatedStyle(() => {
    console.log(headerHeight.value);

    return {
      transform: [{ translateY: headerHeight.value }]
    };
  });

this logs the following:

• 143
• 143
• 96

the correct value is actually 143 but for some reason it becomes 96 towards the end. The result is the sticky header which I am using this logic for is cut off and sitting above where it should be. Once I start to scroll everything is good, the correct value comes back from the hook and the logic to sticky the header works fine:

<StickyHeader
  style={[
    animatedStyle,
    {
      position: 'absolute',
      paddingVertical: 8,
      backgroundColor: platformColor('systemBackground'),
      zIndex: 1
    }
  ]}
>
...
</StickyHeader>

Could you please fix whatever bug is causing the wrong height to be returned towards the end during the initial screen render?

Steps to reproduce

...

Snack or a link to a repository

https://snack.expo.dev/404

Screens version

4.4.0

React Native version

0.76.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 13 pro max

Acknowledgements

Yes

[kkafar]

Hey @TowhidKashem thanks for the report. I'll look into this somewhere next week

[TowhidKashem]

I upgraded my app to new architecture and this problem doesn't exist anymore. So it seems to only effect the old arch, feel free to close if you think it's not worth fixing on the old arch. I personally don't need it fixed anymore.

[kkafar]

Thanks for the update! Glad that you are not affected anymore

[kkafar]

I think I'll close the issue. I might get back to it once I get some confirmation that more people are affected.

So in case anyone is reading this & has similar issue - please tag me, I'll reopen.