fix(iOS, Tabs): tab screen height when tabs are rendered dynamically (#3425)

## Description

Fixes incorrect tab screen frame, assigned by UIKit when tabs are
rendered dynamically & available space is less that window size.

We enable auto-layout and add constraints so that
`tabBarController.view`'s dimensions match
`RNSBottomTabsHostComponentView`.

Closes
software-mansion/react-native-screens-labs#588.

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/8cd02a27-aa52-46aa-90af-469d2f877887"
/> | <video
src="https://github.com/user-attachments/assets/ccb37d69-a9a4-4dc9-801d-ce8415b2e610"
/> |
| --- | --- |
| <img width="409" height="814" alt="before3425_vh"
src="https://github.com/user-attachments/assets/0e173b56-420c-4bb0-a36a-264e48464921"
/> | <img width="511" height="829" alt="after3425_vh"
src="https://github.com/user-attachments/assets/c042ef0f-7bf3-4f98-88b5-ee1cdf01b9ed"
/> |

We might want to investigate in more detail why we receive the incorrect
frame. I created an issue for this:
software-mansion/react-native-screens-labs#596.

## Changes

- add layout constraints for  `tabBarController.view`.

## Test code and steps to reproduce

Run `Test3425`.

## Checklist

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

Author: kligarski

apps/src/tests/Test3425.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Button, View } from 'react-native';
+import Colors from '../shared/styling/Colors';
+import { TestBottomTabs } from '.';
+
+export default function App() {
+  const [index, setIndex] = useState(0);
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 20,
+        paddingVertical: 100,
+        backgroundColor: Colors.BlueLight40,
+      }}>
+      {index === 0 ? (
+        <View
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <Button title="Go to Bottom Tabs" onPress={() => setIndex(1)} />
+        </View>
+      ) : (
+        <TestBottomTabs />
+      )}
+    </View>
+  );
+}

apps/src/tests/index.ts

@@ -163,6 +163,7 @@ export { default as Test3342 } from './Test3342';
 export { default as Test3346 } from './Test3346';
 export { default as Test3369 } from './Test3369';
 export { default as Test3379 } from './Test3379';
+export { default as Test3425 } from './Test3425';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';

ios/bottom-tabs/host/RNSBottomTabsHostComponentView.mm

@@ -146,6 +146,17 @@ - (void)reactAddControllerToClosestParent:(UIViewController *)controller
       if (parentView.reactViewController) {
         [parentView.reactViewController addChildViewController:controller];
         [self addSubview:controller.view];
+
+        // Enable auto-layout to ensure valid size of tabBarController.view.
+        // In host tree, tabBarController.view is the only child of HostComponentView.
+        controller.view.translatesAutoresizingMaskIntoConstraints = NO;
+        [NSLayoutConstraint activateConstraints:@[
+          [controller.view.topAnchor constraintEqualToAnchor:self.topAnchor],
+          [controller.view.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
+          [controller.view.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+          [controller.view.trailingAnchor constraintEqualToAnchor:self.trailingAnchor]
+        ]];
+
         [controller didMoveToParentViewController:parentView.reactViewController];
         break;
       }