@hanzogui/native 2.0.0-rc.41-hanzoai.5

package/setup-worklets/index.native.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/setup-worklets.native.js'))

package/setup-worklets.cjs

@@ -0,0 +1 @@
+Object.assign(module.exports, require('./dist/cjs/setup-worklets.cjs'))

package/setup-zeego/index.cjs

@@ -0,0 +1,2 @@
+// compat with hanzogui static compiler
+Object.assign(module.exports, require('../dist/cjs/setup-zeego.cjs'))

package/setup-zeego/index.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/setup-zeego.cjs'))

package/setup-zeego/index.native.cjs

@@ -0,0 +1,2 @@
+// compat with hanzogui static compiler
+Object.assign(module.exports, require('../dist/cjs/setup-zeego.native.js'))

package/setup-zeego/index.native.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/setup-zeego.native.js'))

package/setup-zeego.cjs

@@ -0,0 +1 @@
+Object.assign(module.exports, require('./dist/cjs/setup-zeego.cjs'))

package/src/PressBoundary.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, type ViewProps } from 'react-native'
+import {
+  claimExternalPressOwnership,
+  releaseExternalPressOwnership,
+  type ExternalPressOwnershipToken,
+} from './gestureState'
+
+export interface PressBoundaryProps extends ViewProps {
+  enabled?: boolean
+  /**
+   * Alias for enabling the boundary. The behavior is limited to Hanzogui's
+   * shared press ownership and does not patch arbitrary RN bubbling.
+   */
+  stopPropagation?: boolean
+  debugName?: string | null
+}
+
+function composeFirst<T extends (...args: any[]) => void>(ours: T, theirs?: T) {
+  return (...args: Parameters<T>) => {
+    ours(...args)
+    theirs?.(...args)
+  }
+}
+
+function composeLast<T extends (...args: any[]) => void>(theirs: T | undefined, ours: T) {
+  return (...args: Parameters<T>) => {
+    theirs?.(...args)
+    ours(...args)
+  }
+}
+
+export const PressBoundary: React.ForwardRefExoticComponent<
+  PressBoundaryProps & React.RefAttributes<View>
+> = React.forwardRef<View, PressBoundaryProps>(function PressBoundary(
+  {
+    enabled,
+    stopPropagation,
+    debugName,
+    onTouchStart,
+    onTouchEnd,
+    onTouchCancel,
+    onResponderGrant,
+    onResponderRelease,
+    onResponderTerminate,
+    ...props
+  },
+  forwardedRef
+) {
+  const tokenRef = React.useRef<ExternalPressOwnershipToken | null>(null)
+  const isEnabled = enabled ?? stopPropagation ?? true
+
+  const claim = React.useCallback((): void => {
+    if (!isEnabled) return
+    if (tokenRef.current) {
+      releaseExternalPressOwnership(tokenRef.current, debugName)
+    }
+    tokenRef.current = claimExternalPressOwnership(debugName)
+  }, [debugName, isEnabled])
+
+  const release = React.useCallback((): void => {
+    if (!tokenRef.current) return
+    releaseExternalPressOwnership(tokenRef.current, debugName)
+    tokenRef.current = null
+  }, [debugName])
+
+  React.useEffect(() => release, [release])
+
+  return (
+    <View
+      ref={forwardedRef}
+      {...props}
+      onTouchStart={composeFirst(claim, onTouchStart)}
+      onTouchEnd={composeLast(onTouchEnd, release)}
+      onTouchCancel={composeLast(onTouchCancel, release)}
+      onResponderGrant={composeFirst(claim, onResponderGrant)}
+      onResponderRelease={composeLast(onResponderRelease, release)}
+      onResponderTerminate={composeLast(onResponderTerminate, release)}
+    />
+  )
+})

package/src/burntState.ts

@@ -0,0 +1,28 @@
+import { createGlobalState } from './globalState'
+import type { BurntState } from './types'
+
+const state = createGlobalState<BurntState>(`burnt`, {
+  enabled: false,
+  toast: null,
+  dismissAllAlerts: null,
+})
+
+export interface BurntAccessor {
+  readonly isEnabled: boolean
+  readonly state: BurntState
+  set(newState: BurntState): void
+}
+
+export function getBurnt(): BurntAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): BurntState {
+      return state.get()
+    },
+    set(newState: BurntState): void {
+      state.set(newState)
+    },
+  }
+}

package/src/components.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import { getPortal } from './portalState'
+import type {
+  NativePortalProps,
+  NativePortalHostProps,
+  NativePortalProviderProps,
+} from './types'
+
+export type { NativePortalProps, NativePortalHostProps, NativePortalProviderProps }
+
+/**
+ * Renders children into a teleport Portal when available.
+ * Returns null when teleport is not set up (allows fallback handling by caller).
+ */
+export function NativePortal({
+  hostName = 'root',
+  children,
+}: NativePortalProps): ReactNode {
+  const state = getPortal().state
+  if (state.type !== 'teleport') return null
+
+  const { Portal } = (globalThis as any).__hanzogui_teleport
+  return <Portal hostName={hostName}>{children}</Portal>
+}
+
+/**
+ * Renders a teleport PortalHost when available.
+ * Returns null when teleport is not set up.
+ */
+export function NativePortalHost({ name }: NativePortalHostProps): ReactNode {
+  const state = getPortal().state
+  if (state.type !== 'teleport') return null
+
+  const { PortalHost } = (globalThis as any).__hanzogui_teleport
+  return <PortalHost name={name} />
+}
+
+/**
+ * Wraps children with teleport PortalProvider when available.
+ * Returns children as-is when teleport is not set up.
+ */
+export function NativePortalProvider({ children }: NativePortalProviderProps): ReactNode {
+  const state = getPortal().state
+  if (state.type !== 'teleport') return <>{children}</>
+
+  const { PortalProvider } = (globalThis as any).__hanzogui_teleport
+  return <PortalProvider>{children}</PortalProvider>
+}

package/src/gesture-handler.ts

@@ -0,0 +1,17 @@
+export { getGestureHandler } from './gestureState'
+export type {
+  ExternalPressOwnershipToken,
+  GestureHandlerAccessor,
+  PressGestureConfig,
+} from './gestureState'
+export {
+  claimExternalPressOwnership as unstable_claimExternalPressOwnership,
+  releaseExternalPressOwnership as unstable_releaseExternalPressOwnership,
+} from './gestureState'
+export { PressBoundary } from './PressBoundary'
+export type { PressBoundaryProps } from './PressBoundary'
+export {
+  getGestureHandlerConfig,
+  setupGestureHandler,
+  type GestureHandlerConfig,
+} from './setup-gesture-handler'

package/src/gestureState.ts

@@ -0,0 +1,260 @@
+import { createGlobalState } from './globalState'
+import type { GestureState } from './types'
+
+const state = createGlobalState<GestureState>(`gesture`, {
+  enabled: false,
+  Gesture: null,
+  GestureDetector: null,
+  ScrollView: null,
+})
+
+let pressGestureDebugId = 0
+let externalPressDebugId = 0
+
+type PressOwnerSource = 'internal' | 'external' | null
+
+function getEventPointerId(e: any): number | null {
+  const pointerId =
+    e?.pointerId ??
+    e?.pointer?.id ??
+    e?.event?.pointerId ??
+    e?.event?.pointer?.id ??
+    e?.nativeEvent?.pointerId ??
+    e?.nativeEvent?.id ??
+    e?.event?.nativeEvent?.pointerId ??
+    e?.event?.nativeEvent?.id ??
+    null
+
+  return pointerId == null || Number.isNaN(pointerId) ? null : Number(pointerId)
+}
+
+/**
+ * Global press coordination - ensures only innermost pressable fires press events,
+ * matching RN Pressable/responder system semantics where deepest component wins.
+ * Uses a grace period to allow child gestures to steal ownership from parent,
+ * since RNGH fires parent gestures before child gestures.
+ */
+const pressState = {
+  owner: null as object | null,
+  ownerId: null as number | null,
+  ownerSource: null as PressOwnerSource,
+  ownerPointerId: null as number | null,
+  timestamp: 0,
+}
+
+export interface Insets {
+  top?: number
+  left?: number
+  bottom?: number
+  right?: number
+}
+
+export type PressGestureConfig = {
+  debugName?: string | null
+  onPressIn?: (e: any) => void
+  onPressOut?: (e: any) => void
+  onPress?: (e: any) => void
+  onLongPress?: (e: any) => void
+  delayLongPress?: number
+  hitSlop?: number | Insets | null
+}
+
+export interface GestureHandlerAccessor {
+  readonly isEnabled: boolean
+  readonly state: GestureState
+  set(updates: Partial<GestureState>): void
+  disable(): void
+  createPressGesture(config: PressGestureConfig): any
+}
+
+export type ExternalPressOwnershipToken = object
+
+function resetPressOwner() {
+  pressState.owner = null
+  pressState.ownerId = null
+  pressState.ownerSource = null
+  pressState.ownerPointerId = null
+  pressState.timestamp = 0
+}
+
+function resetStaleOwner(now: number, debugName?: string | null) {
+  if (now - pressState.timestamp > 2000) {
+    resetPressOwner()
+  }
+}
+
+export function claimExternalPressOwnership(
+  debugName?: string | null
+): ExternalPressOwnershipToken {
+  const now = Date.now()
+  resetStaleOwner(now, debugName)
+
+  const token = {}
+  const ownerId = ++externalPressDebugId
+
+  pressState.owner = token
+  pressState.ownerId = ownerId
+  pressState.ownerSource = 'external'
+  pressState.timestamp = now
+
+  return token
+}
+
+export function releaseExternalPressOwnership(
+  token: ExternalPressOwnershipToken | null | undefined,
+  debugName?: string | null
+): void {
+  if (!token || pressState.owner !== token) {
+    return
+  }
+  resetPressOwner()
+}
+
+export function getGestureHandler(): GestureHandlerAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): GestureState {
+      return state.get()
+    },
+    set(updates: Partial<GestureState>): void {
+      Object.assign(state.get(), updates)
+    },
+
+    disable(): void {
+      state.get().enabled = false
+    },
+
+    createPressGesture(config: PressGestureConfig): any {
+      const { Gesture } = state.get()
+      if (!Gesture) return null
+
+      const longPressDuration = config.delayLongPress ?? 500
+
+      // unique token for this gesture instance - used to track ownership
+      const myToken = {}
+      const myDebugId = ++pressGestureDebugId
+      let didLongPress = false
+      let didPressIn = false
+      let pressInTimer: ReturnType<typeof setTimeout> | null = null
+
+      // Grace period for child gestures to steal ownership from parent.
+      // RNGH fires parent before child, but we want innermost to win.
+      // Claims typically span a few ms, 24ms gives enough room to observe
+      // ordering while debugging slower frames.
+      const GRACE_PERIOD_MS = process.env.TAMAGUI_RNGH_PRESS_DELAY
+        ? +process.env.TAMAGUI_RNGH_PRESS_DELAY
+        : 24
+
+      const tryClaimOwnership = (e: any) => {
+        const now = Date.now()
+        resetStaleOwner(now, config.debugName)
+
+        const currentPointerId = getEventPointerId(e)
+        const isSameTouchPointer =
+          currentPointerId == null ||
+          pressState.ownerPointerId == null ||
+          pressState.ownerPointerId === currentPointerId
+
+        if (
+          pressState.owner === null ||
+          (pressState.ownerSource === 'internal' && isSameTouchPointer)
+        ) {
+          pressState.owner = myToken
+          pressState.ownerId = myDebugId
+          pressState.ownerSource = 'internal'
+          pressState.ownerPointerId = currentPointerId
+          pressState.timestamp = now
+        }
+        return pressState.owner === myToken
+      }
+
+      const isOwner = () => pressState.owner === myToken
+
+      const releaseOwnership = () => {
+        if (pressInTimer) {
+          clearTimeout(pressInTimer)
+          pressInTimer = null
+        }
+        if (pressState.owner === myToken) {
+          resetPressOwner()
+        }
+      }
+
+      const firePressIn = (e: any) => {
+        if (!didPressIn && isOwner()) {
+          didPressIn = true
+          config.onPressIn?.(e)
+        }
+      }
+
+      const schedulePressIn = (e: any) => {
+        if (pressInTimer) {
+          clearTimeout(pressInTimer)
+        }
+        pressInTimer = setTimeout(() => {
+          pressInTimer = null
+          if (isOwner()) {
+            firePressIn(e)
+          }
+        }, GRACE_PERIOD_MS + 1)
+      }
+
+      // Tap gesture for regular presses
+      // Use long maxDuration to not cancel during long presses
+      const tap = Gesture.Tap()
+        .runOnJS(true)
+        .maxDuration(10000) // allow very long presses
+        .onBegin((e: unknown) => {
+          didLongPress = false
+          didPressIn = false
+          tryClaimOwnership(e)
+          // Defer onPressIn until after the grace window so child pressables
+          // can steal ownership, but flush it on tap end for very fast taps.
+          schedulePressIn(e)
+        })
+        .onEnd((e: unknown) => {
+          if (isOwner() && !didLongPress) {
+            firePressIn(e)
+            config.onPress?.(e)
+          }
+        })
+        .onFinalize((e: unknown) => {
+          if (isOwner()) {
+            config.onPressOut?.(e)
+            releaseOwnership()
+          } else if (didPressIn) {
+            // we already fired onPressIn but lost ownership before finalize
+            // (e.g. finger dragged onto a sibling pressable and that one
+            // claimed ownership). fire onPressOut so callers can clear their
+            // press state — otherwise pressStyle stays stuck on this view.
+            didPressIn = false
+            config.onPressOut?.(e)
+          }
+        })
+
+      if (config.hitSlop) tap.hitSlop(config.hitSlop)
+
+      // if no long press handler, just use tap
+      if (!config.onLongPress) return tap
+
+      // LongPress gesture for long press handling
+      const longPress = Gesture.LongPress()
+        .runOnJS(true)
+        .minDuration(longPressDuration)
+        .onStart((e: any) => {
+          didLongPress = true
+          if (isOwner()) {
+            firePressIn(e)
+            config.onLongPress?.(e)
+          }
+        })
+
+      if (config.hitSlop) longPress.hitSlop(config.hitSlop)
+
+      // exclusive: longPress has priority, tap is fallback for quick presses
+      return Gesture.Exclusive(longPress, tap)
+    },
+  }
+}

package/src/globalState.ts

@@ -0,0 +1,32 @@
+export function createGlobalState<T extends { enabled: boolean }>(
+  key: string,
+  defaultValue: T
+): {
+  get: () => T
+  set: (next: T) => void
+} {
+  const GLOBAL_KEY = `__hanzogui_${key}__`
+
+  type HanzoguiGlobal = typeof globalThis & {
+    [GLOBAL_KEY]?: T
+  }
+
+  function getGlobalState(): T {
+    const g = globalThis as HanzoguiGlobal
+    if (!g[GLOBAL_KEY]) {
+      // reset on module load so reloadReactNative gets a clean state
+      // (globalThis persists across reloads but module scope re-evaluates)
+      g[GLOBAL_KEY] = defaultValue
+    }
+    return g[GLOBAL_KEY]!
+  }
+
+  function setGlobalState(newState: T): void {
+    ;(globalThis as HanzoguiGlobal)[GLOBAL_KEY] = newState
+  }
+
+  return {
+    get: getGlobalState,
+    set: setGlobalState,
+  }
+}

package/src/index.ts

@@ -0,0 +1,88 @@
+/**
+ * @hanzogui/native
+ *
+ * Native setup modules for Hanzogui. Import these at the top of your app entry point.
+ *
+ * @example
+ * ```tsx
+ * // In your app entry (index.js or App.tsx)
+ * import '@hanzogui/native/setup-teleport'
+ * import '@hanzogui/native/setup-gesture-handler'
+ * import '@hanzogui/native/setup-worklets'
+ * import '@hanzogui/native/setup-safe-area'
+ * import '@hanzogui/native/expo-linear-gradient'
+ * import '@hanzogui/native/setup-keyboard-controller'
+ *
+ * // Then use Hanzogui components normally
+ * // Sheet will automatically use native gestures when available
+ * // LinearGradient will use expo-linear-gradient when installed
+ * ```
+ */
+
+// types
+export type {
+  NativePortalState,
+  GestureState,
+  WorkletsState,
+  SafeAreaState,
+  SafeAreaInsets,
+  SafeAreaFrame,
+  SafeAreaMetrics,
+  LinearGradientState,
+  ZeegoState,
+  BurntState,
+  NativePortalProps,
+  NativePortalHostProps,
+  NativePortalProviderProps,
+} from './types'
+
+// portal
+export { getPortal } from './portalState'
+export type { PortalAccessor } from './portalState'
+
+// gesture handler
+export { getGestureHandler } from './gestureState'
+export {
+  claimExternalPressOwnership as unstable_claimExternalPressOwnership,
+  releaseExternalPressOwnership as unstable_releaseExternalPressOwnership,
+} from './gestureState'
+export type {
+  ExternalPressOwnershipToken,
+  GestureHandlerAccessor,
+  PressGestureConfig,
+} from './gestureState'
+// NOTE: setupGestureHandler is exported from setup-gesture-handler.ts entry point,
+// not here, to avoid bundler pulling in RNGH require during tree-shaking
+export type { GestureHandlerConfig } from './setup-gesture-handler'
+
+// worklets
+export { getWorklets } from './workletsState'
+export type { WorkletsAccessor } from './workletsState'
+
+// safe area
+export { getSafeArea } from './safeAreaState'
+export type { SafeAreaAccessor } from './safeAreaState'
+
+// linear gradient
+export { getLinearGradient } from './linearGradientState'
+export type { LinearGradientAccessor } from './linearGradientState'
+
+// keyboard controller state exports (safe - no side effects)
+export {
+  isKeyboardControllerEnabled,
+  getKeyboardControllerState,
+  setKeyboardControllerState,
+} from './keyboardControllerState'
+export type { KeyboardControllerState } from './keyboardControllerState'
+
+// zeego (native menus)
+export { getZeego } from './zeegoState'
+export type { ZeegoAccessor } from './zeegoState'
+export { NativeMenuContext } from './nativeMenuContext'
+
+// burnt (native toasts)
+export { getBurnt } from './burntState'
+export type { BurntAccessor } from './burntState'
+
+// components
+export { NativePortal, NativePortalHost, NativePortalProvider } from './components'

package/src/keyboardControllerState.ts

@@ -0,0 +1,29 @@
+import { createGlobalState } from './globalState'
+import type { KeyboardControllerState } from './types'
+
+export type { KeyboardControllerState }
+
+const state = createGlobalState<KeyboardControllerState>(`keyboard_controller`, {
+  enabled: false,
+  KeyboardProvider: null,
+  KeyboardAwareScrollView: null,
+  useKeyboardHandler: null,
+  useReanimatedKeyboardAnimation: null,
+  KeyboardController: null,
+  KeyboardEvents: null,
+  KeyboardStickyView: null,
+})
+
+export function isKeyboardControllerEnabled(): boolean {
+  return state.get().enabled
+}
+
+export function getKeyboardControllerState(): KeyboardControllerState {
+  return state.get()
+}
+
+export function setKeyboardControllerState(
+  updates: Partial<KeyboardControllerState>
+): void {
+  Object.assign(state.get(), updates)
+}

package/src/linearGradientState.ts

@@ -0,0 +1,27 @@
+import { createGlobalState } from './globalState'
+import type { LinearGradientState } from './types'
+
+const state = createGlobalState<LinearGradientState>(`linear_gradient`, {
+  enabled: false,
+  Component: null,
+})
+
+export interface LinearGradientAccessor {
+  readonly isEnabled: boolean
+  readonly state: LinearGradientState
+  set(newState: LinearGradientState): void
+}
+
+export function getLinearGradient(): LinearGradientAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): LinearGradientState {
+      return state.get()
+    },
+    set(newState: LinearGradientState): void {
+      state.set(newState)
+    },
+  }
+}

package/src/nativeMenuContext.ts

@@ -0,0 +1,4 @@
+import type React from 'react'
+import { createContext } from 'react'
+
+export const NativeMenuContext: React.Context<boolean> = createContext(false)

package/src/portalState.ts

@@ -0,0 +1,27 @@
+import { createGlobalState } from './globalState'
+import type { NativePortalState } from './types'
+
+const state = createGlobalState<NativePortalState>(`portal`, {
+  enabled: false,
+  type: null,
+})
+
+export interface PortalAccessor {
+  readonly isEnabled: boolean
+  readonly state: NativePortalState
+  set(newState: NativePortalState): void
+}
+
+export function getPortal(): PortalAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): NativePortalState {
+      return state.get()
+    },
+    set(newState: NativePortalState): void {
+      state.set(newState)
+    },
+  }
+}