Get Safe Area - iOS

Retrieve safe area heights to adjust UI components and avoid overlaps with system areas like the notch or home indicator.

You'll need to import the javascript file in your website before starting from this link.

Plain Javascript

window.WTN.getSafeArea({
    callback: function(data){
        //Contains data of the safe area settings
    }
});

//Response Data
{
  "type":"getSafeArea",
  "top" : 150,
  "bottom" : 102, 
  "topSafeArea": true/false,
  "bottomSafeArea": true/false
}

ES5+

import { getSafeArea } from "webtonative"

getSafeArea();

The response shows if the top or bottom safe area is there and the value for it.

Feature added in iOS on 13/06/25