Customize the bottom banner. The bottom Banner View does not render on first run.

[Antlers777]

Customize the bottom banner. The bottom Banner View does not render on first run.

I customized the bottom banner and added a button, but it cannot be clicked on the first run. It can only be clicked after the screen is rotated.

[Antlers777]

`class MyBottomBarViewController: UIViewController, NavigationComponent {
open lazy var bottomBannerView: MyBottomBannerView = .myForAutoLayout()
open lazy var bottomPaddingView: MyBottomPaddingView = .myForAutoLayout()
open lazy var stopButton = UIButton(type: .system)

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .green
    setupRootViews()
    setupBottomBanner()
    stopButton.addTarget(self, action: #selector(myTapAction), for: .touchUpInside)
}

@objc func myTapAction() {
    print("Stop")
}

}

extension MyBottomBarViewController {
func setupRootViews() {
view.addSubviews([bottomBannerView, bottomPaddingView])
setupRootViewConstraints()
}

func setupRootViewConstraints() {
    let constraints = [
        bottomBannerView.topAnchor.constraint(equalTo: view.topAnchor),
        bottomBannerView.bottomAnchor.constraint(equalTo: bottomPaddingView.topAnchor),
        bottomBannerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        bottomBannerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        
        bottomPaddingView.topAnchor.constraint(equalTo: view.safeBottomAnchor),
        bottomPaddingView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        bottomPaddingView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        bottomPaddingView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    ]
    
    NSLayoutConstraint.activate(constraints)
}

func setupBottomBanner() {
    bottomBannerView.backgroundColor = .red
    // Stop 按钮
    stopButton.translatesAutoresizingMaskIntoConstraints = false
    stopButton.setImage(UIImage(named: "close", in: .mapboxNavigation, compatibleWith: nil), for: .normal)
    stopButton.setTitle("Stop", for: .normal)
    stopButton.backgroundColor = .green
    bottomBannerView.addSubview(stopButton)
}

}
`

[maru-biz]

Hi @Antlers777 . In you code snippets I don't see how you integrate custom banner with the Navigation SDK. Are you passing the custom view controller in NavigationOptions to NavigationViewController? See documentation here.
Please take a look also at the customization of banners code example (initalization starts here). Let me know if that helps.

[Antlers777]

Hi @Antlers777 . In you code snippets I don't see how you integrate custom banner with the Navigation SDK. Are you passing the custom view controller in NavigationOptions to NavigationViewController? See documentation here. Please take a look also at the customization of banners code example (initalization starts here). Let me know if that helps.

I passed a custom BottomBanner to NavigationOptions, but due to design reasons, my height exceeds the specified height. It's clickable in portrait mode, even when the device is first in landscape mode. However, after rotating the device from portrait to landscape, the bottom banner's button becomes unclickable. It's clickable if the bottom height doesn't exceed the specified height, but if it exceeds, it simply passes through the map.

1. I set the height to 280.
2. Can I allow users to customize the height?
3. I'm new to MapBox and want to design my own navigation interface. If I don't use NavigationViewController, do I need to start with MapView? Do I need to draw my own route and move the camera in real time? This can be a bit daunting for a beginner.

[chizhavko]

Hi @Antlers777, thanks for the detailed report and for sharing your code snippet

From your description, the main issue seems to be related to the custom bottom banner height exceeding the default value. When the banner’s height goes beyond the expected bounds, touch events may pass through to the underlying MapView instead of being handled by your custom banner view. This explains why the button appears unclickable in certain orientations until a rotation forces a layout refresh.

A few clarifications and suggestions:

• Banner Height Customization
  Currently, the Navigation SDK expects the bottom banner to follow the default height contract. If you need a taller banner, you can still override the layout, but you’ll need to make sure the banner view fully covers the touchable area.

• Double-check that your banner’s constraints anchor it to the superview’s safe area and not just to the bottom padding.

• Ensure bottomBannerView.isUserInteractionEnabled = true and that no transparent views overlap your button.

Event Handling:

• If the banner height exceeds the default, you may also need to adjust the container’s hit test behavior. A workaround is to override hitTest(_:with:) in your banner view to explicitly return the button (or the banner) when taps occur inside its frame.

Using a Fully Custom UI

• If your goal is a completely custom navigation UI beyond banners, you’re right: you could start with MapView and build on top of it (drawing the route line, updating the camera, and handling navigation events). However, that requires more setup. For most cases, using NavigationViewController with a customized BottomBannerViewController is recommended, since it handles route rendering, camera tracking, and guidance for you.