Fix/bottom safe area (#37)

* fix: horizontal safe area layout

* fix: Make TabView work with automaticallyAdjustScrollInsets

* sync podfile

* fix: TabView layouting

Author: okwasniewski

example/ios/Podfile.lock

@@ -1209,7 +1209,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-bottom-tabs (0.1.0):
+  - react-native-bottom-tabs (0.0.9):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1793,7 +1793,7 @@ SPEC CHECKSUMS:
   React-logger: 4072f39df335ca443932e0ccece41fbeb5ca8404
   React-Mapbuffer: 714f2fae68edcabfc332b754e9fbaa8cfc68fdd4
   React-microtasksnativemodule: 618b64238e43ef3154079f193aa6649e5320ae19
-  react-native-bottom-tabs: 5662b5e3b5968bec6258b9d6f1a0a834bd3f7553
+  react-native-bottom-tabs: 6b4dff8469797a3bf8758594832955a2214e2e0d
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 651670a799672bd54469f2981d91493dda361ddf

ios/Extensions.swift

@@ -1,17 +1,20 @@
 import Foundation
+import SwiftUI
 
 extension Collection {
-    // Returns the element at the specified index if it is within bounds, otherwise nil.
-    subscript(safe index: Index) -> Element? {
-        return indices.contains(index) ? self[index] : nil
-    }
+  // Returns the element at the specified index if it is within bounds, otherwise nil.
+  subscript(safe index: Index) -> Element? {
+    return indices.contains(index) ? self[index] : nil
+  }
 }
 
 extension UIView {
-    func pinEdges(to other: UIView) {
-        leadingAnchor.constraint(equalTo: other.leadingAnchor).isActive = true
-        trailingAnchor.constraint(equalTo: other.trailingAnchor).isActive = true
-        topAnchor.constraint(equalTo: other.topAnchor).isActive = true
-        bottomAnchor.constraint(equalTo: other.bottomAnchor).isActive = true
-    }
+  func pinEdges(to other: UIView) {
+    NSLayoutConstraint.activate([
+      leadingAnchor.constraint(equalTo: other.leadingAnchor),
+      trailingAnchor.constraint(equalTo: other.trailingAnchor),
+      topAnchor.constraint(equalTo: other.topAnchor),
+      bottomAnchor.constraint(equalTo: other.bottomAnchor)
+    ])
+  }
 }

ios/TabViewImpl.swift

@@ -20,11 +20,12 @@ class TabViewProps: ObservableObject {
  */
 struct RepresentableView: UIViewRepresentable {
   var view: UIView
+  
   func makeUIView(context: Context) -> UIView {
     return view
   }
-  func updateUIView(_ uiView: UIView, context: Context) {
-  }
+  
+  func updateUIView(_ uiView: UIView, context: Context) {}
 }
 
 /**
@@ -120,13 +121,19 @@ extension View {
   }
 
   @ViewBuilder
-  func ignoresTopSafeArea(_ flag: Bool, frame: CGRect) -> some View {
+  func ignoresTopSafeArea(
+    _ flag: Bool,
+    frame: CGRect
+  ) -> some View {
     if flag {
       self
-        .ignoresSafeArea(.container, edges: .top)
-        .frame(width: frame.width)
+        .ignoresSafeArea(.container, edges: .all)
+        .frame(idealWidth: frame.width, idealHeight: frame.height)
     } else {
       self
+        .ignoresSafeArea(.container, edges: .horizontal)
+        .ignoresSafeArea(.container, edges: .bottom)
+        .frame(idealWidth: frame.width, idealHeight: frame.height)
     }
   }
 }

ios/TabViewProvider.swift

@@ -20,21 +20,21 @@ struct TabData: Codable {
   private var eventDispatcher: RCTEventDispatcherProtocol?
   private var imageLoader: RCTImageLoaderProtocol?
   private var iconSize = CGSize(width: 27, height: 27)
-
+  
   @objc var onPageSelected: RCTDirectEventBlock?
-
+  
   @objc var icons: NSArray? {
     didSet {
       loadIcons(icons)
     }
   }
-
+  
   @objc var sidebarAdaptable: Bool = false {
     didSet {
       props.sidebarAdaptable = sidebarAdaptable
     }
   }
-
+  
   @objc var labeled: Bool = true {
     didSet {
       props.labeled = labeled
@@ -46,35 +46,35 @@ struct TabData: Codable {
       props.ignoresTopSafeArea = ignoresTopSafeArea
     }
   }
-
+  
   @objc var selectedPage: NSString? {
     didSet {
       props.selectedPage = selectedPage as? String
     }
   }
-
+  
   @objc var items: NSArray? {
     didSet {
       props.items = parseTabData(from: items)
     }
   }
-
+  
   @objc public convenience init(eventDispatcher: RCTEventDispatcherProtocol, imageLoader: RCTImageLoader) {
     self.init()
     self.eventDispatcher = eventDispatcher
     self.imageLoader = imageLoader
   }
-
+  
   public override func didUpdateReactSubviews() {
     props.children = reactSubviews()
   }
-
+  
   public override func layoutSubviews() {
     super.layoutSubviews()
     setupView()
     props.children = reactSubviews()
   }
-
+  
   private func setupView() {
     if self.hostingController != nil {
       return
@@ -92,7 +92,7 @@ struct TabData: Codable {
       hostingController.didMove(toParent: parentViewController)
     }
   }
-
+  
   private func loadIcons(_ icons: NSArray?) {
     // TODO: Diff the arrays and update only changed items.
     // Now if the user passes `unfocusedIcon` we update every item.
@@ -120,11 +120,11 @@ struct TabData: Codable {
       }
     }
   }
-
+  
   private func parseTabData(from array: NSArray?) -> TabData? {
     guard let array else { return nil }
     var items: [TabInfo] = []
-
+    
     for value in array {
       if let itemDict = value as? [String: Any] {
         items.append(
@@ -137,7 +137,7 @@ struct TabData: Codable {
         )
       }
     }
-
+    
     return TabData(tabs: items)
   }
 }

src/TabView.tsx

@@ -178,7 +178,7 @@ const TabView = <Route extends BaseRoute>({
           if (Platform.OS === 'android') {
             return null;
           }
-          return <View key={route.key} />;
+          return <View key={route.key} style={styles.fullWidth} />;
         }
 
         return (