@hzblj/kara-components 0.26.1 → 0.27.0

package/src/organisms/sheet/sheet.types.ts

@@ -65,7 +65,7 @@ export type SheetProps = {
   draggable?: boolean
   /** Pinned to the bottom, above the content and the keyboard. */
   footer?: ReactElement
-  /** The drag handle. On by default. */
+  /** The drag handle. On by default. On Android it is Material's handle, coloured by the app's theme. */
   grabber?: boolean
   /** The user dismissed it; `visible` going false does not call this. */
   onDismiss: () => void

package/src/organisms/sheet/use-sheet-header.tsx

@@ -17,6 +17,12 @@ type UseSheetHeaderParams = {
 /** The bar's own height (`NavigationBar`) plus the room above it, before the header has been measured. */
 const ESTIMATED_HEADER_HEIGHT = (Platform.OS === 'ios' ? 56 : 64) + spacing.s16
 
+/**
+ * Above a header with no bar. Android's grabber is drawn over the sheet's content, 16 dp from the top and 4 dp tall, so
+ * there the header starts 8 dp under it. iOS's grabber ends 10 pt from the top, inside the usual 16 pt.
+ */
+const HEADER_TOP_WITHOUT_BAR = Platform.OS === 'android' ? 's28' : 's16'
+
 /** Where a large title's bar title appears once it has scrolled away: the platform's own place for it. */
 const COLLAPSED_TITLE_ALIGNMENT: NavigationBarTitleAlignment = Platform.OS === 'ios' ? 'center' : 'leading'
 
@@ -83,7 +89,7 @@ export const useSheetHeader = ({header: headerProps, scrollable}: UseSheetHeader
     }
 
     return (
-      <Box onLayout={isOverlay ? handleHeaderLayout : undefined} pt="s16">
+      <Box onLayout={isOverlay ? handleHeaderLayout : undefined} pt={hasBar ? 's16' : HEADER_TOP_WITHOUT_BAR}>
         {hasBar ? (
           <NavigationBar
             inverted={inverted}

package/src/templates/screen/screen.android.tsx

@@ -1,9 +1,9 @@
-import {Column, Host} from '@expo/ui/jetpack-compose'
+import {Column} from '@expo/ui/jetpack-compose'
 import {padding} from '@expo/ui/jetpack-compose/modifiers'
 import {useSxModifiers} from '@hzblj/kara-sx'
-import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo, useRef, useState} from 'react'
 import {StatusBar, StyleSheet, View} from 'react-native'
+import {ComposeHost} from '../../hooks/compose-host'
 import {HostBoundary} from '../../hooks/host-context'
 import type {ScreenComponent, ScreenProps} from './screen.types'
 
@@ -18,7 +18,6 @@ export const Screen: ScreenComponent = ({
   ignoreSafeArea = 'none',
   testID,
 }: ScreenProps) => {
-  const theme = useAppTheme()
   const frame = useRef<View>(null)
   const [statusBarOverlap, setStatusBarOverlap] = useState(0)
   const sx = useSxModifiers({bg, tall: true, wide: true})
@@ -35,16 +34,14 @@ export const Screen: ScreenComponent = ({
 
   return (
     <View onLayout={onLayout} ref={frame} style={StyleSheet.absoluteFill} testID={testID}>
-      <Host
-        colorScheme={theme.dark ? 'dark' : 'light'}
+      <ComposeHost
         ignoreSafeAreaKeyboardInsets={ignoreSafeArea === 'all' || ignoreSafeArea === 'keyboard'}
-        seedColor={theme.materialSeed}
         style={StyleSheet.absoluteFill}
       >
         <Column modifiers={modifiers}>
           <HostBoundary>{children}</HostBoundary>
         </Column>
-      </Host>
+      </ComposeHost>
     </View>
   )
 }