Search code examples
iosswiftuiuitabbartabbar

How to add space from the bottom under the custom tabbar?


I'm trying to find an option to add a distance the size of a bottomBar to each View, as the native TabView does (so that the content does not leave under it. With the ability to change this distance depending on whether the bottom bar is shown).
I hide the native TabView at the application level and use it only as a container for screens.

UITabBar.appearance().isHidden = true

I tried to add .padding, but then TabView doesn't save background from content.

import SwiftUI

public struct ShapedTabView<Content: View>: View {
  // MARK: Lifecycle
  
  public init(
    tabs: [TabType],
    selection: Binding<TabType>,
    @ViewBuilder content: @escaping (TabType) -> Content
  ) {
    self.tabs = tabs
    self._selection = selection
    self.content = content
  }
  
  // MARK: Public
  
  public var body: some View {
      TabView(selection: $selection) {
        ForEach(tabs, id: \.rawValue) { tab in
            content(tab) // .padding(.bottom, isHide ? 0 : 90)
              .tag(tab)
          }
      }
      .safeAreaInset(edge: .bottom) {
        BottomBar(
          selection: $selection,
          localSelection: selection,
          tabs: tabs
        )
        .offset(x: 0.0, y: isHide ? 170 : 0)
        .opacity(isHide ? 0 : 1)
        .disabled(isHide)
      }
    .environment(\.isTabBarHide, $isHide)
    .ignoresSafeArea(.keyboard, edges: .bottom)
  }
  
  // MARK: Private

  private var tabs: [TabType]
  @Binding
  private var selection: TabType
  @ViewBuilder
  private let content: (TabType) -> Content
  
  @State
  private var isHide = false
}

Solution

  • The solution was to move safeAreaInsets to the View level, which are passed to Content. Works great