How-to guides
Keep content inside the safe area
Apply initial insets and subscribe to later changes.
Configure the viewport
Add to the document head:
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>Provide context
Use the root setup with <RadicalProvider nativeContext={nativeContext}>.
Apply insets
Apply safeAreaStyle(nativeContext, config.mode) to <html> and pad content:
main {
padding-top: calc(var(--radical-safe-area-top) + 16px);
padding-bottom: calc(var(--radical-safe-area-bottom) + 16px);
padding-left: calc(var(--radical-safe-area-left) + 16px);
padding-right: calc(var(--radical-safe-area-right) + 16px);
}You see content inside the device's safe area.
Observe changes
Read component state with useSafeArea() from @akshatowo/radical/react.
Do not add keyboard height to safe-area insets.
See the keyboard contract.