How can I make this gray area go away (iOS UIKit)? - ios

Question

My iOS app, built with UIKit, has this gray area at the top and I don't know how to make it go away. Here is the code for this screen:
app screenshot
import Foundation
import UIKit
class HomeController: UIViewController {
//MARK: - Properties
private let topStack = HomeNavigationStackView()
private let bottomStack = BottomControlsStackView();
private let deckView: UIView = {
let view = UIView()
view.backgroundColor = .systemPink
view.layer.cornerRadius = 5
return view
}()
//MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
configureCards()
}
//MARK: - Helpers
func configureCards(){
let user1 = User(name: "Jane Doe", age: 22, images: [#imageLiteral(resourceName: "jane1"),#imageLiteral(resourceName: "appSampleProfile")])
let user2 = User(name: "Megan", age: 34, images: [#imageLiteral(resourceName: "kelly2"),#imageLiteral(resourceName: "appSampleProfile")])
let cardView1 = CardView(viewModel: CardViewModel(user: user1))
let cardView2 = CardView(viewModel: CardViewModel(user: user2))
deckView.addSubview(cardView1)
deckView.addSubview(cardView2)
cardView1.fillSuperview()
cardView2.fillSuperview()
}
func configureUI(){
view.backgroundColor = .white
let stack = UIStackView(arrangedSubviews: [topStack, deckView, bottomStack])
stack.axis = .vertical
view.addSubview(stack)
stack.anchor(top:view.safeAreaLayoutGuide.topAnchor, left: view.leftAnchor, bottom: view.safeAreaLayoutGuide.bottomAnchor, right: view.rightAnchor)
stack.isLayoutMarginsRelativeArrangement = true
stack.layoutMargins = .init(top: 0, left: 12, bottom: 0, right: 12)
stack.bringSubviewToFront(deckView)
}
}
And here is the code for the navigation items at the top:
import UIKit
class HomeNavigationStackView: UIStackView {
// MARK: - Properties
let settingsButton = UIButton(type: .system)
let messageButton = UIButton(type: .system)
let tinderIcon = UIImageView(image: #imageLiteral(resourceName: "app_icon"))
//MARK: - Lifecycle
override init(frame: CGRect){
super.init(frame: frame)
heightAnchor.constraint(equalToConstant: 80).isActive = true
tinderIcon.contentMode = .scaleAspectFit
settingsButton.setImage(#imageLiteral(resourceName: "top_left_profile").withRenderingMode(.alwaysOriginal), for: .normal)
messageButton.setImage(#imageLiteral(resourceName: "top_right_messages").withRenderingMode(.alwaysOriginal), for: .normal)
[settingsButton, UIView(), tinderIcon, UIView(), messageButton].forEach{
view in addArrangedSubview(view)
}
distribution = .equalCentering
isLayoutMarginsRelativeArrangement = true
layoutMargins = .init(top:0, left:16, bottom:0, right:16)
}
required init(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

Answer 1

you have embedded your view controller to a NavigationController in order to perform segues. You can hide the navigationBar and set your own Items like this:
navigationController?.navigationBar.tintColor = UIColor.clear
navigationController?.navigationBar.isHidden = false
navigationController?.navigationBar.backgroundColor = UIColor.clear
Or if you want to leave it and the thing that bothers you is the shadow and gray color then you can use this code. It removes the shadow on the bottom of navigationBar (Gray Bar) and sets the backGrounColor to clear, but it leaves you ability to set the titleColor, tile etc.
view.backgroundColor = UIColor.white
navigationController?.navigationBar.tintColor = UIColor.black
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.backgroundColor = UIColor.clear
navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)