Add custom button on Mapbox's navigation view

Question

I am using Mapbox to allow users to navigate between locations. I am using basic navigation feature as stated in the documentation (https://www.mapbox.com/ios-sdk/navigation/examples/basic/). This gives me the navigation view as below.

I would like to add a custom button at the bottom of the view. For this, I tried the following code.

Directions.shared.calculate(options) { (waypoints, routes, error) in

    guard let route = routes?.first else {
        self.showAlertMessage("No possible routes detected")
        return
    }

    self.mapNavigationViewController = NavigationViewController(for: route)

    self.mapNavigationViewController.delegate = self

    self.present(self.mapNavigationViewController, animated: true, completion: {

        let customButton = UIButton()
        customButton.setTitle("Press", for: .normal)
        customButton.translatesAutoresizingMaskIntoConstraints = false
        customButton.backgroundColor = .blue
        customButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)

        self.mapNavigationViewController.view.addSubview(customButton)

        customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
        customButton.leftAnchor.constraint(equalTo: self.mapNavigationViewController.view.leftAnchor, constant: 0).isActive = true
        customButton.rightAnchor.constraint(equalTo: self.mapNavigationViewController.view.rightAnchor, constant: 0).isActive = true

        self.mapNavigationViewController.view.setNeedsLayout()

    })
}

With this, I got the button as below.

Now, the next thing to be done is to shift the mapbox's view so that its bottom aligns with the custom button's top. How can I achieve this?

Answer 1

I am able to accomplish the task following this Mapbox documentation.