[tvOS] tab bar measures are incorrect

[douglowder]

Bug summary

This seems to be a regression introduced in #170 (so affects versions 0.7.2 and later). Before this, the app would occupy the entire screen as expected. After this, the app is restricted to an area around 1700 pixels wide (full screen width is 1920 pixels).

Behavior with latest bottom-tabs:

Behavior with version 0.7.1:

Library version

0.8.9

Environment info

RNTV 0.77.1-0, Expo 52.0.37

Steps to reproduce

1. …
2. …

Reproducible sample code

https://github.com/react-native-tvos/ExpoRouterTV

[douglowder]

Hi @okwasniewski I have a quick very hacky fix that solves the issue -- I can use this for now until we figure out the real problem. 😄 This seems to work correctly with and without sidebarAdaptable.

diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
index ad6de7d..2c9997f 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
@@ -26,7 +26,11 @@ struct TabViewImpl: View {
         renderTabItem(at: index)
       }
       .measureView(onLayout: { size in
+        #if os(tvOS)
+        onLayout(CGSize(width: 1920, height: 1080))
+        #else
         onLayout(size)
+        #endif
       })
     }
 #if !os(tvOS) && !os(macOS) && !os(visionOS)
@@ -294,6 +298,11 @@ extension View {
   func ignoresTopSafeArea(
     _ flag: Bool
   ) -> some View {
+    #if os(tvOS)
+    self
+     .ignoresSafeArea(.container, edges: .all)
+     .frame(idealWidth: 1920.0, idealHeight: 1080.0)
+    #else
     if flag {
       self
         .ignoresSafeArea(.container, edges: .vertical)
@@ -301,6 +310,7 @@ extension View {
       self
         .ignoresSafeArea(.container, edges: .bottom)
     }
+    #endif
   }
 
 #if !os(macOS)

[okwasniewski]

Hey, thanks for suggesting a fix @douglowder!

I'm wondering whether we need screen measurements at all on that platform. We need to measure the screen on iPad and macOS because their sidebars minimize the available space for the content.

I'll look into this and try to remove the measurements on that platform.

[okwasniewski]

Sorry for the delay @douglowder, I was on PTO. I found the root cause of this, turns out if was Safe Area kicking in 👀

Changing: .ignoresSafeArea(.container, edges: .vertical) -> .ignoresSafeArea(.container, edges: .all) fixes the issue! I will investigate if its okay to have this change in iOS as well and create a PR.