okwasniewski / react-native-bottom-tabs

Native Bottom Tabs for React Native
https://www.npmjs.com/package/react-native-bottom-tabs
MIT License
284 stars 9 forks source link

[wip] feat: handle bottom safe area #30

Closed okwasniewski closed 4 days ago

dylancom commented 5 days ago

I am experimenting now with switching to Swift / UIKit and noticed that scrollviews respect the TabBar / Safearea. I think this is more viable than hardcoding values? See: #31

okwasniewski commented 5 days ago

Yeah, hardcoding is not ideal maybe we could measure the tab bar.

According to Apple and Stack overflow it's constant at those values so this option might work. I couldn't find any working native solution yet

dylancom commented 5 days ago

I'm not sure if this helps in the right direction, but I was now able to adjust the height of "Article" from within SwiftUI. (Not flexible yet to make it work with all other screens) Forcing a height of 600 (which we could adjust to the height minus tabbar) and the scrollview adjusts to it. So we might have to set some constraints?

struct RepresentableView: UIViewRepresentable {
  var view: UIView

  func makeUIView(context: Context) -> UIView {
    applyConstraintsToSubviews(of: view)
    if let subview = view.subviews.first {
      applyConstraintsToSubviews(of: subview)

      if let subview2 = subview.subviews.first {
        applyConstraintsToSubviews(of: subview2)
      }
    }
    return view
  }
  func updateUIView(_ uiView: UIView, context: Context) {
  }

  private func applyConstraintsToSubviews(of parentView: UIView) {
    parentView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
      parentView.widthAnchor.constraint(equalToConstant: parentView.superview?.bounds.width ?? 0),
      parentView.heightAnchor.constraint(equalToConstant: 600) // Force height limit
    ])
  }
}