Reference
Safe-area API
Initial document CSS, component state, and scoped subscriptions.
Insets and document styles
| API or value | Contract |
|---|---|
SafeArea | Finite, nonnegative top, right, bottom, left in CSS pixels; excludes keyboard height |
safeAreaStyle(context?, mode = "remote") | Returns --radical-safe-area-top, --radical-safe-area-right, --radical-safe-area-bottom, --radical-safe-area-left |
| Remote native context | Pixel strings |
| Browser, bundled, or absent loader context | env(safe-area-inset-*, 0px) for stable hydration |
watchSafeArea(receive) | Effect requiring Bridge | Scope; returns cleanup and registers it for scope closure |
| Native events | radicalSafeArea; malformed inset events ignored |
| Browser observation | Measures CSS env() insets; listens for resize |
useSafeArea() | Initial provider insets, then live values; no loading or error state |
Platform support
| Capability | Android | iOS | Browser |
|---|---|---|---|
| Live insets | Shell CSS updates at document start and later changes | Shell CSS updates at document start and later changes | CSS environment insets and resize events |
| Keyboard | Layout viewport resizes | Focused input scrolls into view | Browser layout behavior |
| Enablement | No capability flag or extra dependency | No capability flag or extra dependency | No native dependency |
Exports
| Export | Entry points |
|---|---|
safeAreaStyle | @akshatowo/radical/client, @akshatowo/radical/server, @akshatowo/radical/native-context |
watchSafeArea | @akshatowo/radical/client |
useSafeArea | @akshatowo/radical/react |
Source: safe-area implementation, safe-area contract.