XamaWIN – Add Safe Area to your iPhone X Apps in Xamarin.Forms

Xamawin • zam-ah win | noun
A quick, easy to implement enhancement for a Xamarin App that improves performance, appearance, or functionality

It’s hard to believe that the iPhone X has been out in the wild since November, but love it or hate it, the iPhone X and “the notch” are here to stay. So much so in fact, that Apple recently declared support for iPhone X to be a requirement for new app store submissions going forward:

iOS 11 has brought innovative features and the redesigned App Store to hundreds of millions of customers around the world. Your apps can deliver more intelligent, unified, and immersive experiences with Core ML, ARKit, new camera APIs, new SiriKit domains, Apple Music integration, drag and drop for iPad, and more.

Starting April 2018, all new iOS apps submitted to the App Store must be built with the iOS 11 SDK, included in Xcode 9 or later. All new apps for iPhone, including universal apps, must support the Super Retina display of the iPhone X.

So, what does this mean for your Xamarin.Forms app? Fortunately, adding safe area guards in Xamarin.Forms is a snap thanks to the introduction of Platform Specific APIs. We simply make a call to use safe space on any pages that overdraw on the iPhone X, like so:

using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

// more code

        public HomePage()
        {
            InitializeComponent();
            On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
        }

The results are as satisfying as they are simple:

For all other iPhone hardware, the screen will render normally:

To dive in to all the Platform-Specific API has to offer, take a look at the documentation or stay tuned for a exploratory post here, coming soon! In the meantime, feel free to check out the full source for this post here.