iPhones has Notch since model X

Area under Notch

1. What is Notch?
2. What can be stored under this Notch?
3. How to implement view in that area
4. Hide notch in some cases
5. Future of this feature
6. Link on the project

1. What is Notch?

This top black frame in header of this article — notch

Apple has been developing notched iPhones since 2017

First model with Notch had been iPhone X, and then every year apple was notched all models (exclude 2nd SE model)

2. Why should I store something under this notch?

Some apps contains there a small logo

View under notch in Telegram

You can reach this state if you drag thebottom navigation bar down or if you take a screenshot

In our company we stored there a small UILabel which contain version, build number and environment of our app

View under notch as test helper

In our case it improves communication between testers and developers, because every screenshot contain additional metadata.

3. How to implement view under notch?

First we need to create an UIApplication extension to get a top (or key) window of our app:

extension UIApplication {
  static var topWindow: UIWindow {
    
    if #available(iOS 15.0, *) {
      let scenes = UIApplication.shared.connectedScenes
      let windowScene = scenes.first as? UIWindowScene
      return windowScene!.windows.first!
    }
    let windows = UIApplication.shared.windows
    return windows.filter { $0.isKeyWindow }.first!
  }
}

Then implement view, which you want to put under notch, in my case it is UILabel:

var notchLabel: UIView {
  let rect = CGRect(
    x: 0,
    y: 0,
    width: UIScreen.main.bounds.width,
    height: 32.0
  )
  let label = UILabel(frame: rect) 
  label.text = "Any text your want"  
  label.backgroundColor = .clear 
  label.textAlignment = .center
  label.textColor = .black
  label.layer.zPosition = CGFloat(Float.greatestFiniteMagnitude)
  return label
}

Height is 32, because it is a minimum height of notch, if you don’t want to hardcode this height, use window.safeAreaInsets.top instead

zPostion of label layer need to set as greatestFiniteMagnitude to be positioned at extra top

And then, last step:

UIApplication.topWindow.addSubview(notchLabel)

Result:

Link on this project below

4. Hide notch in some cases

Let’s hide view under notch if your iPhone is old or SE 2nd

And also let’s hide them if your environment is production

var isNotchViewNeeded: Bool {
  UIApplication.topWindow.safeAreaInsets.top > 0
  &&
  environment != .prod
}

5. Future of this feature

Some sources said that the new iPhone 14 will have the brand new type of notch

So, let’s see ;)

6. Link on the project

https://github.com/MikhailovAl/NotchedView