fix: improve subview management on iOS

Author: okwasniewski

apps/example/ios/Podfile.lock

@@ -1180,7 +1180,7 @@ PODS:
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-  - react-native-bottom-tabs (0.9.2):
+  - react-native-bottom-tabs (0.10.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.11.18.00)
@@ -1931,7 +1931,7 @@ SPEC CHECKSUMS:
   React-logger: e7eeebaed32b88dcc29b10901aa8c5822dc397c4
   React-Mapbuffer: 73dd1210c4ecf0dfb4e2d4e06f2a13f824a801a9
   React-microtasksnativemodule: dece61f766f8d326099d217603b1ebb50d6bb707
-  react-native-bottom-tabs: 9cfaa0350a9632efff1e7ce16e732e32f06c6117
+  react-native-bottom-tabs: a980b2f3f797355d04f7d239d1ee3974a07382d6
   react-native-safe-area-context: 7f3dfe7a0e269ffccac6f1a8377e85e8237b47be
   React-nativeconfig: cb207ebba7cafce30657c7ad9f1587a8f32e4564
   React-NativeModulesApple: 38f252170af5351c88bc2e94d697359cd8c031e6

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

@@ -57,7 +57,6 @@ @interface RCTTabViewComponentView () <RCTRNCTabViewViewProtocol, TabViewProvide
 
 @implementation RCTTabViewComponentView {
   TabViewProvider *_tabViewProvider;
-  NSMutableArray<PlatformView *> *_reactSubviews;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -69,7 +68,6 @@ - (instancetype)initWithFrame:(CGRect)frame
 {
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const RNCTabViewProps>();
-    _reactSubviews = [NSMutableArray new];
     _tabViewProvider = [[TabViewProvider alloc] initWithDelegate:self];
     self.contentView = _tabViewProvider;
     _props = defaultProps;
@@ -84,24 +82,12 @@ + (BOOL)shouldBeRecycled
   return NO;
 }
 
-- (void)layoutSubviews {
-  [super layoutSubviews];
-  _tabViewProvider.children = [self reactSubviews];
-}
-
-- (NSArray<PlatformView *> *)reactSubviews
-{
-  return _reactSubviews;
-}
-
 - (void)mountChildComponentView:(PlatformView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
-  [_reactSubviews insertObject:childComponentView atIndex:index];
-  _tabViewProvider.children = [self reactSubviews];
+  [_tabViewProvider insertChild:childComponentView atIndex:index];
 }
 
 - (void)unmountChildComponentView:(PlatformView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
-  [_reactSubviews removeObjectAtIndex:index];
-
+  [_tabViewProvider removeChildAtIndex:index];
   [childComponentView removeFromSuperview];
 }
 

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

@@ -2,22 +2,28 @@ import SwiftUI
 
 /**
  Helper used to render UIView inside of SwiftUI.
+ Wraps each view with an additional wrapper to avoid directly managing React Native views.
+ This solves issues where the layout would have weird artifacts..
  */
 struct RepresentableView: PlatformViewRepresentable {
   var view: PlatformView
 
 #if os(macOS)
 
   func makeNSView(context: Context) -> PlatformView {
-    view
+    let wrapper = NSView()
+    wrapper.addSubview(view)
+    return wrapper
   }
 
   func updateNSView(_ nsView: PlatformView, context: Context) {}
 
 #else
 
   func makeUIView(context: Context) -> PlatformView {
-    view
+    let wrapper = UIView()
+    wrapper.addSubview(view)
+    return wrapper
   }
 
   func updateUIView(_ uiView: PlatformView, context: Context) {}

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

@@ -63,12 +63,6 @@ public final class TabInfo: NSObject {
     }
   }
 
-  @objc public var children: [PlatformView] = [] {
-    didSet {
-      props.children = children
-    }
-  }
-
   @objc public var sidebarAdaptable: Bool = false {
     didSet {
       props.sidebarAdaptable = sidebarAdaptable
@@ -221,6 +215,22 @@ public final class TabInfo: NSObject {
 #endif
     }
   }
+  
+  @objc(insertChild:atIndex:)
+  public func insertChild(_ child: UIView, at index: Int) {
+    guard index >= 0 && index <= props.children.count else {
+      return
+    }
+    props.children.insert(child, at: index)
+  }
+  
+  @objc(removeChildAtIndex:)
+  public func removeChild(at index: Int) {
+    guard index >= 0 && index < props.children.count else {
+      return
+    }
+    props.children.remove(at: index)
+  }
 
   private func loadIcons(_ icons: NSArray?) {
     // TODO: Diff the arrays and update only changed items.