fix(iOS): fix header height in modal, add TestHeaderHeight (#3393)

## Description

Fixes header height in modal with `headerShown: true`. Prior to this PR,
header height was sometimes incorrect and did not update dynamically,
e.g. when search bar was enabled with `hideWhenScrolling: true`.

Adds `TestHeaderHeight` test screen.

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/2fb62d71-91d8-41d1-9e21-d86e4fa8c19f"
/> | <video
src="https://github.com/user-attachments/assets/7e2b5431-fbc1-484a-9eb1-8bfcfab65f66"
/> |

## Changes

- pass `onHeaderHeightChange` callback to correct `Screen`
- create `TestHeaderHeight`
- extract `LongText` to shared components directory

## Test code and steps to reproduce

Run `TestHeaderHeight`. Set `headerTransparent: true`, `presentation:
modal`, `content: scrollView`, `searchBarPlacement: stacked`. Scroll up
to see the search bar. Note header height values being updated.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: kligarski

apps/src/shared/LongText.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed egestas felis. Proin laoreet eros a tellus elementum, quis euismod enim gravida. Morbi at arcu commodo, condimentum purus a, congue sapien. Nunc luctus molestie enim ut mattis. Pellentesque sollicitudin, arcu nec sodales gravida, tortor mauris dignissim urna, nec venenatis nibh ex ut odio. Donec rhoncus arcu eu pulvinar cursus. Sed id ullamcorper erat. Proin mollis a mi vitae posuere. Integer a pretium tellus, vel faucibus metus. Pellentesque non lorem ullamcorper, auctor tellus vulputate, eleifend metus. Aenean in semper erat. Ut arcu elit, semper et dolor eu, pharetra ornare dui. Donec ac condimentum tellus, sed consequat tortor. Etiam facilisis diam sit amet felis rhoncus aliquet. Vestibulum pharetra sapien in tellus pharetra, vel rhoncus ipsum pharetra. Mauris eget porttitor nulla. Vestibulum blandit neque in molestie laoreet. Aliquam semper risus sit amet augue hendrerit suscipit. Vivamus eleifend aliquam congue. Mauris id volutpat neque. Donec erat justo, dictum quis ultrices sit amet, fermentum vel augue. Donec ut velit sit amet mauris tincidunt tincidunt.';
+
+interface LongTextProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  wordCount?: number;
+}
+
+export default function LongText({ size = 'md', wordCount }: LongTextProps) {
+  const sizePresets = {
+    xs: 100,
+    sm: 250,
+    md: 500,
+    lg: 750,
+    xl: 900,
+  };
+
+  const baseWords = lorem.split(' ');
+  const desiredCount = wordCount ?? sizePresets[size];
+
+  const repeatedWords = Array(Math.ceil(desiredCount / baseWords.length))
+    .fill(baseWords)
+    .flat()
+    .slice(0, desiredCount);
+
+  const text = repeatedWords.join(' ');
+
+  return <Text>{text}</Text>;
+}

apps/src/tests/TestBottomTabs/tabs/Tab4.tsx

@@ -4,7 +4,8 @@ import {
   NativeStackNavigationProp,
   createNativeStackNavigator,
 } from '@react-navigation/native-stack';
-import { Button, ScrollView, Text } from 'react-native';
+import { Button, ScrollView } from 'react-native';
+import LongText from '../../../shared/LongText';
 
 type RouteParamList = {
   Screen1: undefined;
@@ -20,56 +21,6 @@ type StackNavigationProp = NavigationProp<RouteParamList>;
 
 const Stack = createNativeStackNavigator<RouteParamList>();
 
-export function LongText() {
-  return (
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed egestas
-      felis. Proin laoreet eros a tellus elementum, quis euismod enim gravida.
-      Morbi at arcu commodo, condimentum purus a, congue sapien. Nunc luctus
-      molestie enim ut mattis. Pellentesque sollicitudin, arcu nec sodales
-      gravida, tortor mauris dignissim urna, nec venenatis nibh ex ut odio.
-      Donec rhoncus arcu eu pulvinar cursus. Sed id ullamcorper erat. Proin
-      mollis a mi vitae posuere. Integer a pretium tellus, vel faucibus metus.
-      Pellentesque non lorem ullamcorper, auctor tellus vulputate, eleifend
-      metus. Aenean in semper erat. Ut arcu elit, semper et dolor eu, pharetra
-      ornare dui. Donec ac condimentum tellus, sed consequat tortor. Etiam
-      facilisis diam sit amet felis rhoncus aliquet. Vestibulum pharetra sapien
-      in tellus pharetra, vel rhoncus ipsum pharetra. Mauris eget porttitor
-      nulla. Vestibulum blandit neque in molestie laoreet. Aliquam semper risus
-      sit amet augue hendrerit suscipit. Vivamus eleifend aliquam congue. Mauris
-      id volutpat neque. Donec erat justo, dictum quis ultrices sit amet,
-      fermentum vel augue. Donec ut velit sit amet mauris tincidunt tincidunt.
-      Mauris et neque ipsum. Aenean vitae eros in risus aliquam dignissim
-      efficitur at nisl. Duis eu mi mauris. Quisque sodales convallis velit, a
-      mollis quam dictum a. Phasellus iaculis tempus orci, ac ultrices lorem
-      faucibus at. Aliquam bibendum nibh eu nisi ultrices, at faucibus purus
-      imperdiet. Proin eu enim porttitor, hendrerit risus quis, sagittis neque.
-      Sed ligula lacus, placerat non erat vitae, porta sagittis ligula. Nam
-      egestas malesuada lectus, vitae auctor lorem hendrerit in. Maecenas
-      hendrerit porta leo et fringilla. Praesent scelerisque arcu at sapien
-      convallis, eget maximus purus malesuada. Praesent malesuada, justo at
-      suscipit ullamcorper, massa turpis laoreet velit, in vulputate urna felis
-      at odio. Suspendisse vehicula pretium purus, sit amet egestas nisl
-      malesuada eu. Sed sed rhoncus sapien, id porta nisl. Sed non mi tortor.
-      Nullam risus ipsum, ullamcorper eu ligula a, ullamcorper molestie augue.
-      Donec eu purus vel quam ultricies egestas eu vel lectus. Nullam ac nunc
-      augue. Cras dolor mi, mollis rhoncus eros non, condimentum pretium sem.
-      Suspendisse vehicula enim a metus aliquet consectetur. Curabitur vehicula
-      gravida risus in facilisis. Ut eget sapien nisi. Sed pulvinar mi nec
-      volutpat ullamcorper. Aenean vulputate justo nec sapien consectetur
-      sagittis. Nunc pellentesque a arcu ac mattis. Mauris nec turpis nec erat
-      dignissim commodo. Vivamus porta mollis ipsum non rutrum. Sed facilisis
-      ante cursus nunc suscipit, non tristique mauris posuere. Donec eget nisi
-      facilisis, fermentum quam ut, imperdiet sem. Sed sit amet metus ligula.
-      Vestibulum placerat dignissim libero, sit amet semper justo vestibulum ut.
-      Etiam eget sagittis elit. Fusce lobortis enim urna, a molestie nulla
-      bibendum sit amet. Sed tellus sem, sodales nec tellus eget, eleifend
-      finibus purus. Proin sollicitudin dolor a luctus elementum. Proin eu dui
-      vestibulum arcu venenatis rutrum.
-    </Text>
-  );
-}
-
 function Screen1({ navigation }: StackNavigationProp) {
   return (
     <ScrollView>