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