Safe Area API

Get safe area insets using the WebToNative JavaScript API. 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
}

npm

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

Response / Return Values

Field	Type	Example	Platform	Description
type	String	"getSafeArea"	iOS, Android	Identifies the response type
top	Number	150	iOS, Android	The top safe area inset (in pixels)
bottom	Number	102	iOS, Android	The bottom safe area inset (in pixels)
left	Number	0	Android only	The left safe area inset (in pixels)
right	Number	0	Android only	The right safe area inset (in pixels)
topSafeArea	Boolean	true	iOS, Android	Indicates whether a top safe area is present
bottomSafeArea	Boolean	true	iOS, Android	Indicates whether a bottom safe area is present
leftSafeArea	Boolean	false	Android only	Indicates whether a left safe area is present
rightSafeArea	Boolean	false	Android only	Indicates whether a right safe area is present

Availability:

• iOS: Introduced June 13, 2025

• Android: Introduced March 9, 2026