Cannot see button when placing UIView in front of Nav Bar - ios

Question

I have a UIView which has a button, I have added a round border around the button using UIView, the button works and is positioned perfectly, and I want the UIView in front of the navigation bar, but once I add the UIView in front of the navigation bar, the button disappears but the UIVew come in front of the navigation bar.
let viewBar = UIView()
let userProfileView = UIView()
let userProfileButton = UIButton(type: .custom)
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .red
setupNextButton()
setupViewBar()
setupUserProfileButton()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// To Bring the viewBar in front of the navigation bar
self.navigationController?.view.addSubview(viewBar)
}
func setupViewBar() {
viewBar.backgroundColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.5)
view.addSubview(viewBar)
addNavigationBarConstraints()
}
func setupUserProfileButton() {
userProfileButton.setImage(#imageLiteral(resourceName: "profilePictureSmall.png"), for: .normal)
userProfileButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
userProfileButton.addTarget(self, action: #selector(profilePictureTapped), for: .touchUpInside)
userProfileView.layer.cornerRadius = 20
userProfileView.layer.borderWidth = 1.5
userProfileView.clipsToBounds = true
userProfileView.layer.borderColor = UIColor.black.cgColor
userProfileView.addSubview(userProfileButton)
//viewBar.addSubview(userProfileView)
view.addSubview(userProfileView)
addUserProfileButtonConstraints()
}
Here are the constraints to the user profile button and the viewBar
func addViewBarConstraints() {
viewBar.translatesAutoresizingMaskIntoConstraints = false
viewBar.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
viewBar.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
viewBar.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
viewBar.heightAnchor.constraint(equalToConstant: 100).isActive = true
}
func addUserProfileButtonConstraints() {
userProfileView.translatesAutoresizingMaskIntoConstraints = false
userProfileView.topAnchor.constraint(equalTo: viewBar.safeAreaLayoutGuide.topAnchor, constant: 5).isActive = true
userProfileView.trailingAnchor.constraint(equalTo: viewBar.safeAreaLayoutGuide.trailingAnchor, constant: -15).isActive = true
userProfileView.widthAnchor.constraint(equalToConstant: 40).isActive = true
userProfileView.heightAnchor.constraint(equalToConstant: 40).isActive = true
}
How can I make the button appear? I have added some images too.

Answer 1

The navigation bar goes on top of the stack of views and so it's hiding your red UIView. So, essentially, you have to add the button to the navigation bar instead of adding it to the UIView:
let barButton = UIBarButtonItem(customView: userProfileButton)
self.navigationItem.rightBarButtonItem = barButton