VSafeArea

A container that automatically applies safe area insets as padding. Maps to a custom SafeAreaView (UIView subclass) on iOS and a FlexboxLayout with window insets listener on Android.

Use VSafeArea to keep your content clear of the device notch, status bar, home indicator, and rounded corners.

Usage

<template>
  <VSafeArea :style="{ flex: 1, backgroundColor: '#fff' }">
    <VText>This content avoids the notch and home indicator.</VText>
  </VSafeArea>
</template>

Props

Prop	Type	Default	Description
`style`	`Object`	`{}`	Layout + appearance styles

Example

<script setup>
import { ref } from 'vue'

const items = ref(['Home', 'Search', 'Profile'])
</script>

<template>
  <VSafeArea :style="styles.container">
    <VText :style="styles.header">My App</VText>
    <VView v-for="item in items" :key="item" :style="styles.row">
      <VText>{{ item }}</VText>
    </VView>
  </VSafeArea>
</template>

<script>
import { createStyleSheet } from '@thelacanians/vue-native-runtime'

const styles = createStyleSheet({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: '700',
    padding: 16,
  },
  row: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
})
</script>

On iOS, VSafeArea reads safeAreaInsets from the system and applies them as Yoga padding (top, bottom, left, right). The insets update automatically on rotation or when the view moves to a new window.

On Android, it uses WindowInsets listeners to read system bar insets and applies them as view padding.

On macOS, there are no notches or system bars that require inset padding, so VSafeArea acts as a plain pass-through container (with gesture support) for cross-platform API compatibility.

Tips

Wrap your root screen content in VSafeArea so text and interactive elements never overlap with system UI.

Platform Support

Platform	Support
iOS	Full (reads `safeAreaInsets`, applies as Yoga padding)
Android	Full (`WindowInsets` listeners, applies as view padding)
macOS	No-op (plain pass-through container -- macOS has no notches or system bars requiring insets)