fix: fix useHeaderHeight in native-stack

[kacperkapusciak]

Motivation

useHeaderHeight should return the height of the closest header but in native-stack but it returns incorrect values.

Fixes #10333

iOS

Before

before-ios.mov

After

after-ios.mov

iPad

Before

before-ipad.mov

After

after-ipad.mov

Android

Before

before-android.mp4

After

after-android.mp4

Web

Same behavior before and after.

Screen.Recording.2022-09-08.at.16.04.35.mov

Test code

https://snack.expo.dev/@kacperkapusciak/native-stack-header-height

Code example:

import { useHeaderHeight } from '@react-navigation/elements';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

function FirstScreen({ navigation }: any) {
  const headerHeight = useHeaderHeight();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{headerHeight}</Text>
      <Button
        title="Go to second"
        onPress={() => navigation.navigate('second')}
      />
    </View>
  );
}

function SecondScreen({ navigation }: any) {
  const headerHeight = useHeaderHeight();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{headerHeight}</Text>
      <Button
        title="Go to third"
        onPress={() => navigation.navigate('nested', { screen: 'third' })}
      />
    </View>
  );
}

function ThirdScreen({ navigation }: any) {
  const headerHeight = useHeaderHeight();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{headerHeight}</Text>
      <Button
        title="Go to fourth"
        onPress={() => navigation.navigate('fourth')}
      />
    </View>
  );
}

function FourthScreen({ navigation }: any) {
  const headerHeight = useHeaderHeight();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{headerHeight}</Text>
      <Button
        title="Go to fifth"
        onPress={() => navigation.navigate('fifth')}
      />
    </View>
  );
}

function FifthScreen({ navigation }: any) {
  const headerHeight = useHeaderHeight();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{headerHeight}</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const SettingsStack = createNativeStackNavigator();
const NestedStack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <SettingsStack.Navigator>
        <SettingsStack.Screen
          name="first"
          component={FirstScreen}
          options={{
            headerShown: false,
          }}
        />
        <SettingsStack.Screen name="second" component={SecondScreen} />
        <SettingsStack.Screen name="nested">
          {() => (
            <NestedStack.Navigator>
              <NestedStack.Screen
                name="third"
                component={ThirdScreen}
                options={{ headerShown: false }}
              />
              <NestedStack.Screen name="fourth" component={FourthScreen} />
              <NestedStack.Screen
                name="fifth"
                component={FifthScreen}
                options={{ presentation: 'modal', headerTransparent: true }}
              />
            </NestedStack.Navigator>
          )}
        </SettingsStack.Screen>
      </SettingsStack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: 'bold',
  },
});

Added tests to accommodate this change.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	f2c7b59
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6324796a9d21950008a34212
😎 Deploy Preview	https://deploy-preview-10827--react-navigation-example.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

The Expo app for the example from this branch is ready!

expo.dev/@react-navigation/react-navigation-example?release-channel=pr-10827

[kacperkapusciak]

Also works on iPhone 14 Pro :)

[jstheoriginal]

Truly appreciate this fix. Thank you!

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.