React Navigation v6 stack navigator with headerLargeTitle collapsing too fast

Question

In my app I am trying to use React Navigation's stack navigator with headerLargeTitle and headerTransparent enabled.

My implementation looks like this:

Navigator.tsx

<HomeStack.Navigator
  initialRouteName="ScreenA"
  screenOptions={({ navigation, route }) => ({
    title: 'My app',
    headerTransparent: true,
    headerBlurEffect: 'light',
    headerLargeTitleShadowVisible: false,
    headerLargeTitle: true,
    headerSearchBarOptions: {
      autoCapitalize: 'none',
      obscureBackground: false,
    },
  })}
>
  <HomeStack.Screen
    name="ScreenA"
    component={ScreenA}
  />
</HomeStack.Navigator>

ScreenA returns:

const headerHeight = useHeaderHeight();

return (
<>
  {isReady && (
    <ScrollView
      contentInset={{
        top: headerHeight * 2,
      }}
      style={{
        backgroundColor: 'red',
      }}
    >
      <View.Base
        style={{
          height: 900,
          width: '100%',
          backgroundColor: 'yellow',
        }}
      />
    </ScrollView>
  )}
</>
);

This currently produces the following output:

Video example

As you can see, the header collapses way too fast and I am unable to figure out why, sadly.

When setting headerTransparent to false, it has an issue with the collapsing effect to not "snap", so something's off here.

Also, the headerHeight doesn't seem to return the correct height for large title-headers. Not sure of that has something to do with this.

Answer 1

Also, the headerHeight doesn't seem to return the correct height for large title-headers. Not sure of that has something to do with this.

Yes, the value returned by useHeaderHeight() does not seem to take large headers into account.

Both of your issues should be solved by setting the property contentInsetAdjustmentBehavior on the ScrollView to "automatic" . Like this:

const headerHeight = useHeaderHeight();

return (
<>
  {isReady && (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      style={{
        backgroundColor: 'red',
      }}
    >
      <View.Base
        style={{
          height: 900,
          width: '100%',
          backgroundColor: 'yellow',
        }}
      />
    </ScrollView>
  )}
</>
);