# Get Safe Area

{% hint style="info" %}
You'll need to import the javascript file in your website before starting from this [link](https://docs.webtonative.com/javascript-apis/getting-started).
{% 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