How to Update Your App for iPhone X

Yet, while for users it is a new fascinating experience, for developers it turned out to be a tough task. Or — let’s not be too pessimistic — a tricky challenge. Here’s what I’m talking about:

1. The notch at the top of the screen that partly overlays the display.
2. Extended screen size since iPhone X doesn’t have the Home Button anymore.
3. Hidden Home Indicator at the bottom of the screen that also should be considered during UI development.

However, there is always a way out 😊

Together with our iOS developer Daniil Tyshchenko we decided to share with you several useful tips on updating your app for iPhone X. Let’s get it started!

📲 Changes to Storyboards

Since iPhone X has a bit different screen design, old-school storyboards may not work as well as they used to. When developing a mobile app for this device, you should take into account following points:

• The home button is missing and the screen is extended to the very bottom. Yet, you have to consider the home indicator when developing UI.
• Top and bottom layout guides in their common sense are missing too. Instead of them, the “safe area” concept is used for iPhone X.
• Also, you have to pay attention to the notch at the very top.

Note: if your app works only in the portrait mode, top and bottom layout guides are still applicable. Yet, we strongly recommend to avoid them and work with the safe area instead.

How to reflect it in your storyboards?

1. Open Xcode 9.
2. Enable the option “Use Safe Area Layout Guides” in the File Inspector Panel.

4. Profit! Storyboard will do the rest of the work for you.

🤳 Safe Area Layout Guide

Starting from iOS 11 UIView has only one property — safeAreaLayoutGuide. This property replaced well-known topLayoutGuide and bottomLayoutGuide. When creating apps for iPhone X, it’s deprecated to use old properties so try to use the new one instead.

It’s worth mentioning that every UIView has safeAreaLayoutGuide and as it is written in the Apple documentation:

---

“For the view controller's root view, the layout guide accommodates the status bar, other visible bars, and any additional insets that you specified using the additionalSafeAreaInsets property of your view controller. For other views in the view hierarchy, the layout guide reflects only the portion of the view that is covered by other content. For example, if a view is entirely within the safe area of its superview, the layout guide edges are equal to the edges of the view.”

---

The same is true for the next paragraph as well.

The key idea: always try to use this property to prevent overlapping of status bar, home indicator and so on with your views and actions.

💻 Safe Area Insets

This property is useful when working with events that need to be processed dynamically.

An important point here is that in the usual UIViewController's lifecycle this property can still be (0, 0, 0, 0). So if you have any subviews that are based on values of this property, all the changes must be processed inside the following UIViewController's method — viewSafeAreaInsetsDidChange.

As safeAreaLayoutGuide, this property is also available starting only with iOS 11. Therefore, if you want to keep compatibility with earlier versions, we recommend using the following snippet:

👨‍💻 Navigation Bar

Avoid hardcoded numbers here as well. Specifically, don’t use the value 44 (or 64, if together with the Status Bar) since the Navigation Bar can have different height. When? There are plenty of possible options. For example, in the Landscape mode, or when it has searchController or supports “large title” etc.

🔎 Search Controller

With the release of iOS 11 Apple added a new property — searchController — to the Navigation Bar. Now if you use the SearchBar with TableView and want to make it look good on iPhone X, you should use this new property.

Yet, as you might have already guessed, searchController is also available starting from iOS 11. Therefore, your code should look as follows:

💡 Conclusion

These were the most significant changes that affected adaptation for iPhone X. Consider them when creating a mobile app for this device and then everything should go smoothly!

We hope this article was useful. Any questions left about iPhone X update? Just hit the button below and we’ll be there to help.