SoT
Home

AI

  • AI SDK v6
  • AI SDK Elements

Web Development

  • Web Quality

General

  • Builderio
  • Bunny
  • Cloudflare
  • Drizzle
  • Expo
  • Fern
  • Gesture Handler
  • Gluestack
  • Mastra
  • Mdx
  • Nuqs
  • Payloadcms
  • React
  • React Native
  • React Navigation
  • Reanimated
  • Safe Area
  • Sanity
  • Screens
  • Shadcn
  • Tamagui
  • Zustand

Safe Area

Handle safe area insets for notch and home indicator on iOS/Android devices

layoutreact-nativeiosandroidnotch

Reference

initialWindowMetrics

Initial insets and frame values for optimizing initial render

apiinitial-metricsoptimization

Safe Area Contributing

Development setup and contribution guidelines for react-native-safe-area-context

contributingdevelopmentsetup

Deprecated Safe Area APIs

Deprecated APIs and their replacements

deprecatedapimigration

Safe Area Hooks and Contexts

useSafeAreaInsets, useSafeAreaFrame, SafeAreaInsetsContext, and SafeAreaFrameContext

hookscontextapi

SafeAreaListener

Component for listening to safe area insets and frame changes without re-renders

componentlistenerevents

SafeAreaProvider

Provider component for safe area insets in React Native

providercontextcomponent

SafeAreaView

View component with safe area insets applied as padding or margin

componentviewpadding

withSafeAreaInsets

Higher order component that provides safe area insets as props

hoccomponentprops

Insights

Safe Area Insights

Key learnings for Safe Area handling

insightshooksprovider

Guides

Safe Area Optimizations

Web SSR, performance optimizations, and testing best practices

optimizationssrtesting

Getting Started

Safe Area Overview

Getting started with react-native-safe-area-context, installation, and core concepts

getting-startedinstallationsetup