Navigation Bar with the Notch

Shoutem allows you to upload the navigation bar background image for devices with a notch and without it in a few simple steps which will be explained in this article.

Some devices, like iPhone XS Max, have a notch that comes in a way of the navigation bar background image – design-wise, the notch would cover some parts of the image and your navigation bar wouldn’t look as intended. For that reason, you can now upload two versions of this image – one that will be suitable for the devices that have a notch and one that will be suitable for devices that don’t have it.

To upload these images, go to Screens → enter your Main navigation → select the Navigation bar tab.

setting navigation bar

Under Without notch navbar image upload an image that would be used for devices that don’t have a notch. The image needs to be of 135px height (minimum requirement).

settings navigation

Under With notch navbar image upload an image that would be used for devices that have a notch. The image needs to be of 165px height (minimum requirement).

notch navigational bar

You can check how your app’s navigation bar looks on the simulator as we have both device versions (with a notch and without).

navigational bar in app

Note: if only the Without notch navbar image is uploaded, it will be displayed on both devices with and without a notch and vice versa.