fix: measure available space for views on iOS

Author: okwasniewski

packages/react-native-bottom-tabs/ios/Events/OnNativeLayoutEvent.swift

@@ -0,0 +1,37 @@
+import React
+
+@objc public class OnNativeLayoutEvent: NSObject, RCTEvent {
+  private var size: CGSize
+  @objc public var viewTag: NSNumber
+  @objc public var coalescingKey: UInt16
+
+  @objc public var eventName: String {
+    return "onNativeLayout"
+  }
+
+  @objc public init(reactTag: NSNumber, size: CGSize, coalescingKey: UInt16) {
+    self.viewTag = reactTag
+    self.size = size
+    self.coalescingKey = coalescingKey
+    super.init()
+  }
+
+  @objc public func canCoalesce() -> Bool {
+    return false
+  }
+
+  @objc public class func moduleDotMethod() -> String {
+    return "RCTEventEmitter.receiveEvent"
+  }
+
+  @objc public func arguments() -> [Any] {
+    return [
+      viewTag,
+      RCTNormalizeInputEventName(eventName) ?? eventName,
+      [
+        "width": size.width,
+        "height": size.height
+      ]
+    ]
+  }
+}

packages/react-native-bottom-tabs/ios/Extensions.swift

@@ -50,4 +50,23 @@ extension View {
         customize: closure
       )
   }
+  
+  
+  @MainActor
+  @ViewBuilder
+  func measureView(onLayout: @escaping (_ size: CGSize) -> Void) -> some View {
+    self
+      .background (
+        GeometryReader { geometry in
+          Color.clear
+            .onChange(of: geometry.size) { newValue in
+              onLayout(newValue)
+            }
+            .onAppear {
+              onLayout(geometry.size)
+            }
+        }
+          .ignoresSafeArea(.container, edges: .vertical)
+      )
+  }
 }

packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm

@@ -232,6 +232,16 @@ - (void)onTabBarMeasuredWithHeight:(NSInteger)height reactTag:(NSNumber *)reactT
   }
 }
 
+- (void)onLayoutWithSize:(CGSize)size reactTag:(NSNumber *)reactTag {
+  auto eventEmitter = std::static_pointer_cast<const RNCTabViewEventEmitter>(_eventEmitter);
+  if (eventEmitter) {
+    eventEmitter->onNativeLayout(RNCTabViewEventEmitter::OnNativeLayout {
+      .height = size.height,
+      .width = size.width
+    });
+  }
+}
+
 @end
 
 Class<RCTComponentViewProtocol> RNCTabViewCls(void)

packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm

@@ -65,6 +65,11 @@ - (void)onTabBarMeasuredWithHeight:(NSInteger)height reactTag:(NSNumber *)reactT
   [self.bridge.eventDispatcher sendEvent:event];
 }
 
+- (void)onLayoutWithSize:(CGSize)size reactTag:(NSNumber *)reactTag {
+  auto event = [[OnNativeLayoutEvent alloc] initWithReactTag:reactTag size:size coalescingKey:_coalescingKey++];
+  [self.bridge.eventDispatcher sendEvent:event];
+}
+
 - (UIView *)view
 {
   return [[TabViewProvider alloc] initWithDelegate:self];

packages/react-native-bottom-tabs/ios/TabViewImpl.swift

@@ -59,13 +59,17 @@ struct TabViewImpl: View {
 
   var onSelect: (_ key: String) -> Void
   var onLongPress: (_ key: String) -> Void
+  var onLayout: (_ size: CGSize) -> Void
   var onTabBarMeasured: (_ height: Int) -> Void
 
   var body: some View {
     TabView(selection: $props.selectedPage) {
       ForEach(props.children.indices, id: \.self) { index in
         renderTabItem(at: index)
       }
+      .measureView(onLayout: { size in
+        onLayout(size)
+      })
     }
 #if !os(tvOS)
     .onTabItemEvent({ index, isLongPress in
@@ -326,13 +330,10 @@ extension View {
   ) -> some View {
     if flag {
       self
-        .ignoresSafeArea(.container, edges: .all)
-        .frame(idealWidth: frame.width, idealHeight: frame.height)
+        .ignoresSafeArea(.container, edges: .vertical)
     } else {
       self
-        .ignoresSafeArea(.container, edges: .horizontal)
         .ignoresSafeArea(.container, edges: .bottom)
-        .frame(idealWidth: frame.width, idealHeight: frame.height)
     }
   }
 

packages/react-native-bottom-tabs/ios/TabViewProvider.swift

@@ -4,15 +4,15 @@ import React
 import SDWebImage
 import SDWebImageSVGCoder
 
-@objc public final class TabInfo: NSObject {
-  @objc public let key: String
-  @objc public let title: String
-  @objc public let badge: String
-  @objc public let sfSymbol: String
-  @objc public let activeTintColor: UIColor?
-  @objc public let hidden: Bool
-
-  @objc
+@objcMembers
+public final class TabInfo: NSObject {
+  public let key: String
+  public let title: String
+  public let badge: String
+  public let sfSymbol: String
+  public let activeTintColor: UIColor?
+  public let hidden: Bool
+
   public init(
     key: String,
     title: String,
@@ -35,6 +35,7 @@ import SDWebImageSVGCoder
   func onPageSelected(key: String, reactTag: NSNumber?)
   func onLongPress(key: String, reactTag: NSNumber?)
   func onTabBarMeasured(height: Int, reactTag: NSNumber?)
+  func onLayout(size: CGSize, reactTag: NSNumber?)
 }
 
 @objc public class TabViewProvider: UIView {
@@ -184,6 +185,8 @@ import SDWebImageSVGCoder
       self.delegate?.onPageSelected(key: key, reactTag: self.reactTag)
     } onLongPress: { key in
       self.delegate?.onLongPress(key: key, reactTag: self.reactTag)
+    } onLayout: { size  in
+      self.delegate?.onLayout(size: size, reactTag: self.reactTag)
     } onTabBarMeasured: { height in
       self.delegate?.onTabBarMeasured(height: height, reactTag: self.reactTag)
     })

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -171,6 +171,9 @@ const TabView = <Route extends BaseRoute>({
   // @ts-ignore
   const focusedKey = navigationState.routes[navigationState.index].key;
   const [tabBarHeight, setTabBarHeight] = React.useState<number | undefined>(0);
+  const [measuredDimensions, setMeasuredDimensions] = React.useState<
+    { width: number; height: number } | undefined
+  >();
 
   const trimmedRoutes = React.useMemo(() => {
     if (
@@ -273,6 +276,9 @@ const TabView = <Route extends BaseRoute>({
         onTabBarMeasured={({ nativeEvent: { height } }) => {
           setTabBarHeight(height);
         }}
+        onNativeLayout={({ nativeEvent: { width, height } }) => {
+          setMeasuredDimensions({ width, height });
+        }}
         hapticFeedbackEnabled={hapticFeedbackEnabled}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
@@ -310,7 +316,7 @@ const TabView = <Route extends BaseRoute>({
               style={
                 Platform.OS === 'android'
                   ? [StyleSheet.absoluteFill, { zIndex, opacity }]
-                  : styles.fullWidth
+                  : [{ position: 'absolute' }, measuredDimensions]
               }
             >
               {renderScene({

packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts

@@ -2,6 +2,7 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 import type { ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
 import type {
   DirectEventHandler,
+  Double,
   Int32,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes';
@@ -16,6 +17,11 @@ export type OnTabBarMeasured = Readonly<{
   height: Int32;
 }>;
 
+export type OnNativeLayout = Readonly<{
+  width: Double;
+  height: Double;
+}>;
+
 export type TabViewItems = ReadonlyArray<{
   key: string;
   title: string;
@@ -31,6 +37,7 @@ export interface TabViewProps extends ViewProps {
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
   onTabLongPress?: DirectEventHandler<OnPageSelectedEventData>;
   onTabBarMeasured?: DirectEventHandler<OnTabBarMeasured>;
+  onNativeLayout?: DirectEventHandler<OnNativeLayout>;
   icons?: ReadonlyArray<ImageSource>;
   labeled?: boolean;
   sidebarAdaptable?: boolean;