> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Native Insets

> Safe area insets injected automatically from C++ with zero setup

## Overview

<Tip>
  **No setup required.** Safe area insets are automatically injected from the native layer. You don't need `react-native-safe-area-context` or any additional configuration.
</Tip>

Uniwind Pro delivers safe area insets directly from C++ to your classNames. The native layer monitors inset changes (orientation, device notches) and updates your components automatically without triggering React re-renders.

## Free vs Pro

| Feature                    | Free Version                                  | Pro Version |
| -------------------------- | --------------------------------------------- | ----------- |
| Safe area classNames       | Supported                                     | Supported   |
| Setup required             | `SafeAreaListener` + `Uniwind.updateInsets()` | None        |
| Dependencies               | `react-native-safe-area-context`              | None        |
| Re-renders on inset change | Yes                                           | No          |

## How It Works

1. **Native monitoring** - The C++ layer subscribes to safe area inset changes from iOS/Android
2. **Direct updates** - When insets change (initial render, orientation changes), values are pushed directly to the shadow tree
3. **No React involvement** - Components using safe area classes update without re-rendering
4. **Single frame** - All affected components update atomically in the same frame

<Info>
  This is part of Uniwind Pro's shadow tree update mechanism. See [Shadow Tree Updates](/pro/shadow-tree-updates) for more details.
</Info>

## Related

<CardGroup cols={2}>
  <Card title="Shadow Tree Updates" icon="bolt" href="/pro/shadow-tree-updates">
    Learn how Uniwind Pro updates views without re-renders
  </Card>

  <Card title="Migration Guide" icon="rocket" href="/migrate-to-pro">
    Step-by-step guide to upgrade from Free to Pro
  </Card>
</CardGroup>
