@hzblj/kara-components 0.20.1 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -26,6 +26,11 @@
       "types": "./lib/typescript/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./header": {
+      "source": "./src/organisms/header/index.ts",
+      "types": "./lib/typescript/organisms/header/index.d.ts",
+      "default": "./lib/module/organisms/header/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -61,9 +66,9 @@
   "dependencies": {
     "@hzblj/expo-native-icons": "^0.1.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.20.1",
-    "@hzblj/kara-sx": "^0.20.1",
-    "@hzblj/kara-theme": "^0.20.1",
+    "@hzblj/kara-native": "^0.22.0",
+    "@hzblj/kara-sx": "^0.22.0",
+    "@hzblj/kara-theme": "^0.22.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {
@@ -73,7 +78,10 @@
     "expo-image": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": ">=4.0.0"
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": "*",
+    "react-native-worklets": "*"
   },
   "devDependencies": {
     "@expo/ui": "~57.0.18",
@@ -82,15 +90,26 @@
     "@types/react": "~19.2.18",
     "expo": "~57.0.22",
     "expo-image": "~57.0.5",
+    "expo-router": "~57.0.21",
     "react": "19.2.3",
     "react-native": "0.86.3",
     "react-native-builder-bob": "^0.43.0",
     "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
     "react-native-worklets": "0.10.1",
     "storybook": "^10.6.0",
     "typescript": "~7.0.2"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "react-native-screens": {
+      "optional": true
+    }
   }
 }

package/src/atoms/activity-indicator/activity-indicator.android.tsx

@@ -5,7 +5,7 @@ import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activity-indicator.types'
 
 /** Material's 48dp for a screen; half of it in a row, about where React Native's small spinner sat. */

package/src/atoms/activity-indicator/activity-indicator.ios.tsx

@@ -2,7 +2,7 @@ import {RNHostView} from '@expo/ui/swift-ui'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {ActivityIndicator as RNActivityIndicator} from 'react-native'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activity-indicator.types'
 
 /**

package/src/atoms/badge/badge.android.tsx

@@ -2,7 +2,7 @@ import {Badge as ComposeBadge, Text as ComposeText} from '@expo/ui/jetpack-compo
 import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {BadgeComponent, BadgeProps} from './badge.types'
 import {BADGE_TOKENS} from './badge-tokens'
 

package/src/atoms/badge/badge.ios.tsx

@@ -1,6 +1,6 @@
 import {HStack} from '@expo/ui/swift-ui'
 import {useSxModifiers} from '@hzblj/kara-sx'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {Text} from '../text'
 import type {BadgeComponent, BadgeProps} from './badge.types'
 import {BADGE_TOKENS} from './badge-tokens'

package/src/atoms/blur-view/blur-view.android.tsx

@@ -3,6 +3,7 @@ import {useSx} from '@hzblj/kara-sx'
 import {type ColorToken, type OpacitySize, useAppTheme, withOpacity} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
+import Animated, {isSharedValue, useAnimatedProps} from 'react-native-reanimated'
 
 import type {BlurMaterial, BlurViewComponent, BlurViewProps} from './blur-view.types'
 
@@ -28,6 +29,8 @@ const MATERIALS: Record<BlurMaterial, MaterialSpec> = {
   ultraThin: {blur: 20, fill: 'surface.base', opacity: {dark: 'o50', light: 'o25'}, saturation: 1.8},
 }
 
+const AnimatedBackdropBlurView = Animated.createAnimatedComponent(BackdropBlurView)
+
 /**
  * The materials in Android's terms: kara's `BackdropBlurView` — what lies behind, blurred and saturated — under a
  * Material tonal surface that gets higher and more opaque as the material thickens. Pinned to the appearance the app
@@ -36,6 +39,7 @@ const MATERIALS: Record<BlurMaterial, MaterialSpec> = {
 export const BlurView: BlurViewComponent = ({
   appearance,
   children,
+  intensity = 1,
   material = 'regular',
   testID,
   vibrancy: _vibrancy,
@@ -52,12 +56,35 @@ export const BlurView: BlurViewComponent = ({
     return {cornerRadius: typeof borderRadius === 'number' ? borderRadius : 0, style: rest}
   }, [resolved])
 
+  const animatedProps = useAnimatedProps(() => ({
+    intensity: isSharedValue<number>(intensity) ? intensity.value : intensity,
+  }))
+  const glassTint = withOpacity(base, spec.opacity[dark ? 'dark' : 'light'])
+
+  if (isSharedValue<number>(intensity)) {
+    return (
+      <AnimatedBackdropBlurView
+        animatedProps={animatedProps}
+        blurRadius={spec.blur}
+        cornerRadius={cornerRadius}
+        fallbackTint={withOpacity(base, 'o95')}
+        glassTint={glassTint}
+        saturation={spec.saturation}
+        style={style}
+        testID={testID}
+      >
+        {children}
+      </AnimatedBackdropBlurView>
+    )
+  }
+
   return (
     <BackdropBlurView
       blurRadius={spec.blur}
       cornerRadius={cornerRadius}
       fallbackTint={withOpacity(base, 'o95')}
-      glassTint={withOpacity(base, spec.opacity[dark ? 'dark' : 'light'])}
+      glassTint={glassTint}
+      intensity={intensity}
       saturation={spec.saturation}
       style={style}
       testID={testID}

package/src/atoms/blur-view/blur-view.ios.tsx

@@ -3,13 +3,17 @@ import {useSx} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
+import Animated, {isSharedValue, useAnimatedProps} from 'react-native-reanimated'
 
 import type {BlurViewComponent, BlurViewProps} from './blur-view.types'
 
+const AnimatedNativeBlurView = Animated.createAnimatedComponent(NativeBlurView)
+
 /** `borderRadius` is the material's shape, so it goes to the effect view — the one that clips — not the layout box. */
 export const BlurView: BlurViewComponent = ({
   appearance,
   children,
+  intensity = 1,
   material = 'regular',
   testID,
   vibrancy,
@@ -22,10 +26,31 @@ export const BlurView: BlurViewComponent = ({
     return {cornerRadius: typeof borderRadius === 'number' ? borderRadius : 0, style: rest}
   }, [resolved])
 
+  const animatedProps = useAnimatedProps(() => ({
+    intensity: isSharedValue<number>(intensity) ? intensity.value : intensity,
+  }))
+
+  if (isSharedValue<number>(intensity)) {
+    return (
+      <AnimatedNativeBlurView
+        animatedProps={animatedProps}
+        colorScheme={appearance ?? (theme.dark ? 'dark' : 'light')}
+        cornerRadius={cornerRadius}
+        material={material}
+        style={style}
+        testID={testID}
+        vibrancy={vibrancy}
+      >
+        {children}
+      </AnimatedNativeBlurView>
+    )
+  }
+
   return (
     <NativeBlurView
       colorScheme={appearance ?? (theme.dark ? 'dark' : 'light')}
       cornerRadius={cornerRadius}
+      intensity={intensity}
       material={material}
       style={style}
       testID={testID}

package/src/atoms/blur-view/blur-view.types.ts

@@ -1,6 +1,7 @@
 import type {BlurMaterial, BlurVibrancy} from '@hzblj/kara-native/swift-ui'
 import type {ResponsiveViewSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
+import type {SharedValue} from 'react-native-reanimated'
 
 export type {BlurMaterial, BlurVibrancy} from '@hzblj/kara-native/swift-ui'
 
@@ -19,6 +20,13 @@ export type BlurViewProps = ResponsiveViewSx & {
   appearance?: 'dark' | 'light'
   /** React Native content, over the material. */
   children?: ReactNode
+  /**
+   * How far the material has come in, from 0 (none) to 1 (the full material), `1` by default. iOS reaches it the way
+   * UIKit fades a material in (a paused effect animation at that fraction), Android scales the blur, the saturation and
+   * the surface by it. A shared value animates it on the UI thread, a bar's background fading in as content scrolls
+   * under it; a number sets it.
+   */
+  intensity?: number | SharedValue<number>
   /** How much of what lies behind shows through, from `ultraThin` (most) to `ultraThick` (least). `regular` by default. */
   material?: BlurMaterial
   /** Test identifier, forwarded to the view. */

package/src/atoms/button/button.android.tsx

@@ -9,7 +9,7 @@ import {testID as testIdModifier, width as widthModifier} from '@expo/ui/jetpack
 import {useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {Icon} from '../icon'
 import type {ButtonComponent, ButtonProps} from './button.types'
 import {buttonTokens, contentOnTint} from './button-tokens'

package/src/atoms/button/button.ios.tsx

@@ -12,7 +12,7 @@ import {
 import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {type ColorToken, type Theme, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {Icon} from '../icon'
 import {Text} from '../text'
 import {VStack} from '../v-stack'

package/src/atoms/card/card.android.tsx

@@ -2,7 +2,7 @@ import {Column} from '@expo/ui/jetpack-compose'
 import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {CardComponent, CardProps} from './card.types'
 
 export const Card: CardComponent = ({children, testID, ...props}: CardProps) => {

package/src/atoms/card/card.ios.tsx

@@ -1,7 +1,7 @@
 import {VStack} from '@expo/ui/swift-ui'
 import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {CardComponent, CardProps} from './card.types'
 
 export const Card: CardComponent = ({children, testID, ...props}: CardProps) => {

package/src/atoms/checkbox/checkbox.android.tsx

@@ -3,7 +3,7 @@ import {clickable, fillMaxWidth, testID as testIdModifier} from '@expo/ui/jetpac
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {CheckboxComponent, CheckboxProps} from './checkbox.types'
 
 /** Stands in for a missing handler: Material drops its 48dp touch target without one, and the box moves. */

package/src/atoms/checkbox/checkbox.ios.tsx

@@ -3,7 +3,7 @@ import {disabled as disabledModifier, tint} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {CheckboxComponent, CheckboxProps} from './checkbox.types'
 
 export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, testID, value}: CheckboxProps) => {

package/src/atoms/color-picker/color-picker.android.tsx

@@ -1,6 +1,6 @@
 import {ColorWell} from '@hzblj/kara-native/jetpack-compose'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {HStack} from '../h-stack'
 import {Spacer} from '../spacer'
 import {Text} from '../text'

package/src/atoms/color-picker/color-picker.ios.tsx

@@ -2,7 +2,7 @@ import {ColorPicker as SwiftUIColorPicker} from '@expo/ui/swift-ui'
 import {disabled as disabledModifier, labelsHidden, opacity as opacityModifier} from '@expo/ui/swift-ui/modifiers'
 import {opacity} from '@hzblj/kara-theme'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {HStack} from '../h-stack'
 import {Spacer} from '../spacer'
 import {Text} from '../text'

package/src/atoms/date-picker/date-picker.android.tsx

@@ -4,7 +4,7 @@ import {alpha, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifier
 import {opacity, useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo, useState} from 'react'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import {Box} from '../box'
 import {Pressable} from '../pressable'
 import {RnText} from '../rn-text'

package/src/atoms/date-picker/date-picker.ios.tsx

@@ -8,7 +8,7 @@ import {
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import type {DatePickerComponent, DatePickerMode, DatePickerProps} from './date-picker.types'
 
 const COMPONENTS = {

package/src/atoms/divider/divider.android.tsx

@@ -3,7 +3,7 @@ import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {DividerComponent, DividerProps} from './divider.types'
 
 /**

package/src/atoms/divider/divider.ios.tsx

@@ -3,7 +3,7 @@ import {background} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {DividerComponent, DividerProps} from './divider.types'
 
 /**

package/src/atoms/fab/fab.android.tsx

@@ -9,7 +9,7 @@ import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {type SpaceSize, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {Icon} from '../icon'
 import {Text} from '../text'
 import type {FabComponent, FabProps, FabSize} from './fab.types'

package/src/atoms/fab/fab.ios.tsx

@@ -3,7 +3,7 @@ import {buttonStyle} from '@expo/ui/swift-ui/modifiers'
 import {type ResponsiveSx, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import type {SpaceSize} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {HStack} from '../h-stack'
 import {Icon} from '../icon'
 import {Text} from '../text'

package/src/atoms/h-stack/h-stack.android.tsx

@@ -1,7 +1,7 @@
 import {Row} from '@expo/ui/jetpack-compose'
 import {spacing} from '@hzblj/kara-theme'
-import {useHostGuard} from '../../host-context'
-import {useStackModifiers} from '../../use-stack-modifiers'
+import {useHostGuard} from '../../hooks/host-context'
+import {useStackModifiers} from '../../hooks/use-stack-modifiers'
 import type {HStackAlign, HStackComponent, HStackProps} from './h-stack.types'
 
 const ALIGNMENT = {

package/src/atoms/h-stack/h-stack.ios.tsx

@@ -2,8 +2,8 @@ import {HStack as SwiftUIHStack} from '@expo/ui/swift-ui'
 import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
-import {tapModifiers} from '../../tap-modifiers'
+import {useHostGuard} from '../../hooks/host-context'
+import {tapModifiers} from '../../utils/tap-modifiers'
 import type {HStackAlign, HStackComponent, HStackProps} from './h-stack.types'
 
 const ALIGNMENT = {

package/src/atoms/icon/icon.android.tsx

@@ -2,7 +2,7 @@ import {iconResourceName} from '@hzblj/expo-native-icons'
 import {DrawableIcon} from '@hzblj/kara-native/jetpack-compose'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {IconComponent, IconProps} from './icon.types'
 
 /** The app's icon as the vector drawable the config plugin generated from the SVG, drawn by Material's `Icon`. */

package/src/atoms/icon/icon.ios.tsx

@@ -4,7 +4,7 @@ import {iconResourceName} from '@hzblj/expo-native-icons'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {IconComponent, IconProps} from './icon.types'
 
 /**

package/src/atoms/icon-button/icon-button.android.tsx

@@ -9,7 +9,7 @@ import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {type ColorToken, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {buttonTokens, contentOnTint} from '../button/button-tokens'
 import {Icon} from '../icon'
 import type {IconButtonComponent, IconButtonProps, IconButtonVariant} from './icon-button.types'

package/src/atoms/icon-button/icon-button.ios.tsx

@@ -12,7 +12,7 @@ import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {type ColorToken, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {ButtonStyleName} from '../button/button.types'
 import {contentOnTint} from '../button/button-tokens'
 import {Icon} from '../icon'

package/src/atoms/island/island.android.tsx

@@ -2,7 +2,7 @@ import {Host} from '@expo/ui/jetpack-compose'
 import {useSx} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 
-import {HostBoundary} from '../../host-context'
+import {HostBoundary} from '../../hooks/host-context'
 import type {IslandComponent, IslandProps} from './island.types'
 
 const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
@@ -11,6 +11,7 @@ const MATCH_NEITHER = {horizontal: false, vertical: false}
 
 export const Island: IslandComponent = ({
   children,
+  ignoreSafeArea = 'keyboard',
   matchContents = true,
   style,
   testID: _testID,
@@ -22,6 +23,7 @@ export const Island: IslandComponent = ({
   return (
     <Host
       colorScheme={theme.dark ? 'dark' : 'light'}
+      ignoreSafeAreaKeyboardInsets={ignoreSafeArea === 'all' || ignoreSafeArea === 'keyboard'}
       matchContents={matchContents ? MATCH_HEIGHT_ONLY : MATCH_NEITHER}
       seedColor={theme.materialSeed}
       style={style ? [resolved, style] : resolved}

package/src/atoms/island/island.ios.tsx

@@ -3,7 +3,7 @@ import {dynamicTypeSize} from '@expo/ui/swift-ui/modifiers'
 import {useSx} from '@hzblj/kara-sx'
 import {MAX_DYNAMIC_TYPE_SIZE, useAppTheme} from '@hzblj/kara-theme'
 
-import {HostBoundary} from '../../host-context'
+import {HostBoundary} from '../../hooks/host-context'
 import type {IslandComponent, IslandProps} from './island.types'
 
 const DYNAMIC_TYPE_CAP = [dynamicTypeSize({max: MAX_DYNAMIC_TYPE_SIZE})]
@@ -12,13 +12,21 @@ const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
 
 const MATCH_NEITHER = {horizontal: false, vertical: false}
 
-export const Island: IslandComponent = ({children, matchContents = true, style, testID, ...sx}: IslandProps) => {
+export const Island: IslandComponent = ({
+  children,
+  ignoreSafeArea = 'keyboard',
+  matchContents = true,
+  style,
+  testID,
+  ...sx
+}: IslandProps) => {
   const theme = useAppTheme()
   const resolved = useSx(sx)
 
   return (
     <Host
       colorScheme={theme.dark ? 'dark' : 'light'}
+      ignoreSafeArea={ignoreSafeArea === 'none' ? undefined : ignoreSafeArea}
       matchContents={matchContents ? MATCH_HEIGHT_ONLY : MATCH_NEITHER}
       modifiers={DYNAMIC_TYPE_CAP}
       seedColor={theme.materialSeed}

package/src/atoms/island/island.types.ts

@@ -2,6 +2,18 @@ import type {ResponsiveViewSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 import type {StyleProp, ViewStyle} from 'react-native'
 
+/**
+ * Which of the system's insets a host's native content ignores, the same on both platforms:
+ * - `none`: it keeps clear of every one (SwiftUI's own behaviour);
+ * - `keyboard`: it stays put when the keyboard opens, for content whose React Native layout handles the keyboard;
+ * - `container`: iOS: it runs under the status bar and the home indicator but still moves for the keyboard; Android
+ *   has nothing to ignore there, so it is `none`;
+ * - `all`: both.
+ *
+ * Android ignores only the keyboard (Compose's `Host` has nothing else to ignore), and reads it once, on mount.
+ */
+export type IgnoredSafeArea = 'all' | 'container' | 'keyboard' | 'none'
+
 /**
  * A host for native atoms in a React Native layout: the SwiftUI / Compose `Host` an `@expo/ui` tree mounts into. It
  * sits in that layout like a `Box`, and takes `Box`'s `sx` props for it: `h`, `flex`, margins.
@@ -9,6 +21,12 @@ import type {StyleProp, ViewStyle} from 'react-native'
 export type IslandProps = ResponsiveViewSx & {
   /** The native views it hosts. */
   children?: ReactNode
+  /**
+   * Which insets the native content ignores. `keyboard` by default: an island sits in a React Native layout, which
+   * moves it for the keyboard itself, and SwiftUI would otherwise also lift the content inside it. See
+   * `IgnoredSafeArea`.
+   */
+  ignoreSafeArea?: IgnoredSafeArea
   /**
    * Sizes the island's height to its native content while the width still comes from the parent, which
    * is what a full-width card wants. On by default. Only the height is ever measured: auto-sizing the

package/src/atoms/list/list.android.tsx

@@ -3,8 +3,8 @@ import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
 import {Children, Fragment, isValidElement, useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
-import {useRefreshState} from '../../use-refresh-state'
+import {useHostGuard} from '../../hooks/host-context'
+import {useRefreshState} from '../../hooks/use-refresh-state'
 import {Card} from '../card'
 import {Divider} from '../divider'
 import type {ListComponent, ListProps} from './list.types'

package/src/atoms/list/list.ios.tsx

@@ -2,7 +2,7 @@ import {Group, List as SwiftUIList} from '@expo/ui/swift-ui'
 import {listRowSeparator, listStyle, type ModifierConfig, refreshable} from '@expo/ui/swift-ui/modifiers'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {ListComponent, ListProps} from './list.types'
 
 /**

package/src/atoms/picker/picker.android.tsx

@@ -10,9 +10,8 @@ import {
 import {fillMaxWidth, menuAnchor, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useEffect, useMemo, useState} from 'react'
-
-import {Glyph} from '../../glyph'
-import {HostBoundary, useInsideHost} from '../../host-context'
+import {HostBoundary, useInsideHost} from '../../hooks/host-context'
+import {Glyph} from '../glyph'
 import type {PickerComponent, PickerProps} from './picker.types'
 
 const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}

package/src/atoms/picker/picker.ios.tsx

@@ -10,7 +10,7 @@ import {
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import type {PickerComponent, PickerProps} from './picker.types'
 
 /**

package/src/atoms/pressable/pressable.tsx

@@ -14,7 +14,7 @@ import {useCallback, useMemo} from 'react'
 import {Platform, Pressable as RNPressable, type ViewStyle} from 'react-native'
 import Animated, {useAnimatedStyle, useSharedValue, withSpring, withTiming} from 'react-native-reanimated'
 
-import {splitForRipple} from '../../ripple-clip'
+import {splitForRipple} from '../../utils/ripple-clip'
 import type {PressableComponent, PressableProps} from './pressable.types'
 
 /**

package/src/atoms/progress/progress.android.tsx

@@ -4,7 +4,7 @@ import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme, withOpacity} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {ProgressComponent, ProgressProps} from './progress.types'
 
 /**

package/src/atoms/progress/progress.ios.tsx

@@ -4,7 +4,7 @@ import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {ProgressComponent, ProgressProps} from './progress.types'
 
 export const Progress: ProgressComponent = ({

package/src/atoms/scroll-view/scroll-view.android.tsx

@@ -8,8 +8,8 @@ import {
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
-import {useRefreshState} from '../../use-refresh-state'
+import {useHostGuard} from '../../hooks/host-context'
+import {useRefreshState} from '../../hooks/use-refresh-state'
 import type {ScrollViewComponent, ScrollViewProps} from './scroll-view.types'
 
 export const ScrollView: ScrollViewComponent = ({