> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/javascript-apis/get-safe-area.md).

# 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.

{% hint style="info" %}
You'll need to import the javascript file in your website before starting from this [link](/javascript-apis/getting-started.md).
{% endhint %}

{% tabs %}
{% tab title="Plain Javascript" %}

```
window.WTN.SafeArea.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
}
```

{% endtab %}

{% tab title="npm" %}

```
import { getSafeArea } from "webtonative/SafeArea"

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
});
```

{% endtab %}
{% endtabs %}

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  |

<br>

**Availability:**

* iOS: Introduced June 13, 2025
* Android: Introduced March 9, 2026