There has been a lot of debate going on about the notch lately and most people are truly upset that Apple choose to go with a notch’ed design. Apple even went as far as explicitly mentioning it in their human interface guidelines (HIG).

Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either. (source)

But HIG are not always enforced during app review and many developers will likely want to build their own implementation of hiding the notch. To do that however you’d want to consider the fact that there will be certain trade-offs, and I’ll talk about those in a while but to overcome those trade-offs you will have to custom build many of the default iOS UI elements.

As you begin fixing the notch, you’ll quickly realise there are a lot more things to consider and embracing the notch might actually be the better option.

Fix the notch

First off, to make a notch-less UI, you’ll have to create a visual separation between the status bar and navigation bar, this means you’ll likely have to apply a mask to the entire window or to the view controller.

The notch/status bar area on the iPhone X is 30pt. Which means applying a mask that moves the navbar down by at least 30pt will be your first step.

This is how it would look: