# Get Safe Area

{% 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.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="ES5+" %}

```
import { getSafeArea } from "webtonative"

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webtonative.com/javascript-apis/get-safe-area.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.