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 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.

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).

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).

Here's how an app’s navigation bar looks on the device with and without a notch.

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.