@tamagui/native 2.0.0-rc.4 → 2.0.0-rc.40

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/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

@@ -1,18 +1,29 @@
+import { createGlobalState } from './globalState'
 import type { GestureState } from './types'
 
-const GLOBAL_KEY = '__tamagui_native_gesture_state__'
-
-function getGlobalState(): GestureState {
-  const g = globalThis as any
-  if (!g[GLOBAL_KEY]) {
-    g[GLOBAL_KEY] = {
-      enabled: false,
-      Gesture: null,
-      GestureDetector: null,
-      ScrollView: null,
-    }
-  }
-  return g[GLOBAL_KEY]
+const state = createGlobalState<GestureState>(`gesture`, {
+  enabled: false,
+  Gesture: null,
+  GestureDetector: null,
+  ScrollView: null,
+})
+
+let pressGestureDebugId = 0
+let externalPressDebugId = 0
+
+type PressOwnerSource = 'internal' | 'external' | null
+
+/**
+ * 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,
+  timestamp: 0,
 }
 
 export interface Insets {
@@ -23,6 +34,7 @@ export interface Insets {
 }
 
 export type PressGestureConfig = {
+  debugName?: string | null
   onPressIn?: (e: any) => void
   onPressOut?: (e: any) => void
   onPress?: (e: any) => void
@@ -39,43 +51,137 @@ export interface GestureHandlerAccessor {
   createPressGesture(config: PressGestureConfig): any
 }
 
+export type ExternalPressOwnershipToken = object
+
+function resetPressOwner() {
+  pressState.owner = null
+  pressState.ownerId = null
+  pressState.ownerSource = 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
+  const previousOwnerId = pressState.ownerId
+  const previousOwnerSource = pressState.ownerSource
+
+  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 getGlobalState().enabled
+      return state.get().enabled
     },
     get state(): GestureState {
-      return getGlobalState()
+      return state.get()
     },
     set(updates: Partial<GestureState>): void {
-      const state = getGlobalState()
-      Object.assign(state, updates)
+      Object.assign(state.get(), updates)
     },
 
     disable(): void {
-      const state = getGlobalState()
-      state.enabled = false
+      state.get().enabled = false
     },
 
     createPressGesture(config: PressGestureConfig): any {
-      const { Gesture } = getGlobalState()
+      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
+
+      // 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 = () => {
+        const now = Date.now()
+        resetStaleOwner(now, config.debugName)
+
+        // within grace period, last claimer wins (child fires after parent)
+        const withinGrace = now - pressState.timestamp < GRACE_PERIOD_MS
+        const previousOwnerId = pressState.ownerId
+        const previousOwnerSource = pressState.ownerSource
+        if (
+          pressState.owner === null ||
+          (withinGrace && pressState.ownerSource !== 'external')
+        ) {
+          pressState.owner = myToken
+          pressState.ownerId = myDebugId
+          pressState.ownerSource = 'internal'
+          pressState.timestamp = now
+        }
+        return pressState.owner === myToken
+      }
+
+      const isOwner = () => pressState.owner === myToken
+
+      const releaseOwnership = () => {
+        if (pressState.owner === myToken) {
+          resetPressOwner()
+        }
+      }
+
       // 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: any) => {
-          config.onPressIn?.(e)
+          tryClaimOwnership()
+          // defer onPressIn until after grace period to ensure we're the final owner
+          setTimeout(() => {
+            if (isOwner()) {
+              config.onPressIn?.(e)
+            }
+          }, GRACE_PERIOD_MS + 1)
         })
         .onEnd((e: any) => {
-          config.onPress?.(e)
+          if (isOwner()) {
+            config.onPress?.(e)
+          }
         })
         .onFinalize((e: any) => {
-          config.onPressOut?.(e)
+          if (isOwner()) {
+            config.onPressOut?.(e)
+            releaseOwnership()
+          }
         })
 
       if (config.hitSlop) tap.hitSlop(config.hitSlop)
@@ -87,9 +193,25 @@ export function getGestureHandler(): GestureHandlerAccessor {
       const longPress = Gesture.LongPress()
         .runOnJS(true)
         .minDuration(longPressDuration)
-        .onBegin((e: any) => config.onPressIn?.(e))
-        .onStart((e: any) => config.onLongPress?.(e))
-        .onFinalize((e: any) => config.onPressOut?.(e))
+        .onBegin((e: any) => {
+          tryClaimOwnership()
+          setTimeout(() => {
+            if (isOwner()) {
+              config.onPressIn?.(e)
+            }
+          }, GRACE_PERIOD_MS + 1)
+        })
+        .onStart((e: any) => {
+          if (isOwner()) {
+            config.onLongPress?.(e)
+          }
+        })
+        .onFinalize((e: any) => {
+          if (isOwner()) {
+            config.onPressOut?.(e)
+            releaseOwnership()
+          }
+        })
 
       if (config.hitSlop) longPress.hitSlop(config.hitSlop)
 

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 = `__tamagui_${key}__`
+
+  type TamaguiGlobal = typeof globalThis & {
+    [GLOBAL_KEY]?: T
+  }
+
+  function getGlobalState(): T {
+    const g = globalThis as TamaguiGlobal
+    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 TamaguiGlobal)[GLOBAL_KEY] = newState
+  }
+
+  return {
+    get: getGlobalState,
+    set: setGlobalState,
+  }
+}

package/src/index.ts

@@ -30,6 +30,7 @@ export type {
   SafeAreaMetrics,
   LinearGradientState,
   ZeegoState,
+  BurntState,
   NativePortalProps,
   NativePortalHostProps,
   NativePortalProviderProps,
@@ -41,7 +42,18 @@ export type { PortalAccessor } from './portalState'
 
 // gesture handler
 export { getGestureHandler } from './gestureState'
-export type { GestureHandlerAccessor, PressGestureConfig } 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'
@@ -66,6 +78,11 @@ 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

@@ -1,44 +1,29 @@
-const GLOBAL_KEY = '__tamagui_native_keyboard_controller_state__'
+import { createGlobalState } from './globalState'
+import type { KeyboardControllerState } from './types'
 
-export interface KeyboardControllerState {
-  enabled: boolean
-  KeyboardProvider: any
-  KeyboardAwareScrollView: any
-  useKeyboardHandler: any
-  useReanimatedKeyboardAnimation: any
-  KeyboardController: any
-  KeyboardEvents: any
-  KeyboardStickyView: any
-}
+export type { KeyboardControllerState }
 
-function getGlobalState(): KeyboardControllerState {
-  const g = globalThis as any
-  if (!g[GLOBAL_KEY]) {
-    g[GLOBAL_KEY] = {
-      enabled: false,
-      KeyboardProvider: null,
-      KeyboardAwareScrollView: null,
-      useKeyboardHandler: null,
-      useReanimatedKeyboardAnimation: null,
-      KeyboardController: null,
-      KeyboardEvents: null,
-      KeyboardStickyView: null,
-    }
-  }
-  return g[GLOBAL_KEY]
-}
+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 getGlobalState().enabled
+  return state.get().enabled
 }
 
 export function getKeyboardControllerState(): KeyboardControllerState {
-  return getGlobalState()
+  return state.get()
 }
 
 export function setKeyboardControllerState(
   updates: Partial<KeyboardControllerState>
 ): void {
-  const state = getGlobalState()
-  Object.assign(state, updates)
+  Object.assign(state.get(), updates)
 }

package/src/linearGradientState.ts

@@ -1,6 +1,10 @@
+import { createGlobalState } from './globalState'
 import type { LinearGradientState } from './types'
 
-let state: LinearGradientState = { enabled: false, Component: null }
+const state = createGlobalState<LinearGradientState>(`linear_gradient`, {
+  enabled: false,
+  Component: null,
+})
 
 export interface LinearGradientAccessor {
   readonly isEnabled: boolean
@@ -11,13 +15,13 @@ export interface LinearGradientAccessor {
 export function getLinearGradient(): LinearGradientAccessor {
   return {
     get isEnabled(): boolean {
-      return state.enabled
+      return state.get().enabled
     },
     get state(): LinearGradientState {
-      return state
+      return state.get()
     },
     set(newState: LinearGradientState): void {
-      state = newState
+      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

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

package/src/safeAreaState.ts

@@ -1,19 +1,12 @@
+import { createGlobalState } from './globalState'
 import type { SafeAreaState, SafeAreaInsets, SafeAreaFrame } from './types'
 
-const GLOBAL_KEY = '__tamagui_native_safe_area_state__'
-
-function getGlobalState(): SafeAreaState {
-  const g = globalThis as any
-  if (!g[GLOBAL_KEY]) {
-    g[GLOBAL_KEY] = {
-      enabled: false,
-      useSafeAreaInsets: null,
-      useSafeAreaFrame: null,
-      initialMetrics: null,
-    }
-  }
-  return g[GLOBAL_KEY]
-}
+const state = createGlobalState<SafeAreaState>(`safe_area`, {
+  enabled: false,
+  useSafeAreaInsets: null,
+  useSafeAreaFrame: null,
+  initialMetrics: null,
+})
 
 const defaultInsets: SafeAreaInsets = { top: 0, right: 0, bottom: 0, left: 0 }
 const defaultFrame: SafeAreaFrame = { x: 0, y: 0, width: 0, height: 0 }
@@ -31,27 +24,27 @@ export interface SafeAreaAccessor {
 export function getSafeArea(): SafeAreaAccessor {
   return {
     get isEnabled() {
-      return getGlobalState().enabled
+      return state.get().enabled
     },
     get state() {
-      return getGlobalState()
+      return state.get()
     },
     set(updates: Partial<SafeAreaState>) {
-      Object.assign(getGlobalState(), updates)
+      Object.assign(state.get(), updates)
     },
     getInsets() {
-      const state = getGlobalState()
-      if (!state.enabled || !state.initialMetrics) {
+      const s = state.get()
+      if (!s.enabled || !s.initialMetrics) {
         return defaultInsets
       }
-      return state.initialMetrics.insets
+      return s.initialMetrics.insets
     },
     getFrame() {
-      const state = getGlobalState()
-      if (!state.enabled || !state.initialMetrics) {
+      const s = state.get()
+      if (!s.enabled || !s.initialMetrics) {
         return defaultFrame
       }
-      return state.initialMetrics.frame
+      return s.initialMetrics.frame
     },
   }
 }

package/src/setup-burnt.ts

@@ -0,0 +1,38 @@
+/**
+ * Setup burnt for Tamagui native toasts.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@tamagui/native/setup-burnt'
+ * ```
+ *
+ * This automatically detects and configures burnt for use with
+ * native Toast functionality.
+ */
+
+import { getBurnt } from './burntState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__tamagui_native_burnt_setup) return
+  g.__tamagui_native_burnt_setup = true
+
+  try {
+    const Burnt = require('burnt') as typeof import('burnt')
+
+    if (Burnt) {
+      getBurnt().set({
+        enabled: true,
+        toast: Burnt.toast,
+        dismissAllAlerts: Burnt.dismissAllAlerts,
+      })
+    }
+  } catch {
+    // burnt not installed
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-gesture-handler.ts

@@ -5,7 +5,12 @@
  *
  * @example
  * ```tsx
+ * // auto-setup with all features enabled
  * import '@tamagui/native/setup-gesture-handler'
+ *
+ * // or configure selectively
+ * import { setupGestureHandler } from '@tamagui/native/setup-gesture-handler'
+ * setupGestureHandler({ pressEvents: true, sheet: false })
  * ```
  *
  * This automatically detects and configures react-native-gesture-handler
@@ -14,11 +19,32 @@
 
 import { getGestureHandler } from './gestureState'
 
-function setup() {
+export interface GestureHandlerConfig {
+  /** use RNGH for press events on Tamagui components (default: true) */
+  pressEvents?: boolean
+  /** use RNGH for Sheet drag gestures (default: true) */
+  sheet?: boolean
+}
+
+let currentConfig: GestureHandlerConfig = {
+  pressEvents: true,
+  sheet: true,
+}
+
+export function getGestureHandlerConfig(): GestureHandlerConfig {
+  return currentConfig
+}
+
+export function setupGestureHandler(config?: GestureHandlerConfig): void {
   const g = globalThis as any
-  if (g.__tamagui_native_gesture_setup_complete) {
-    return
+
+  // override config if provided
+  if (config) {
+    currentConfig = config
   }
+
+  // allow re-running setup to change config
+  const isFirstRun = !g.__tamagui_native_gesture_setup_complete
   g.__tamagui_native_gesture_setup_complete = true
 
   try {
@@ -27,16 +53,17 @@ function setup() {
     const { Gesture, GestureDetector, ScrollView } = rngh
 
     if (Gesture && GestureDetector) {
+      // only enable if pressEvents is true
       getGestureHandler().set({
-        enabled: true,
+        enabled: currentConfig.pressEvents !== false,
         Gesture,
         GestureDetector,
         ScrollView: ScrollView || null,
       })
 
-      // also set on the legacy key for backward compat with @tamagui/sheet
+      // sheet state - only enable if sheet is true
       g.__tamagui_sheet_gesture_state__ = {
-        enabled: true,
+        enabled: currentConfig.sheet !== false,
         Gesture,
         GestureDetector,
         ScrollView: ScrollView || null,
@@ -47,5 +74,5 @@ function setup() {
   }
 }
 
-// run setup immediately on import
-setup()
+// run setup immediately on import (can be overridden by calling setupGestureHandler)
+setupGestureHandler()

package/src/setup-zeego.ts

@@ -30,7 +30,10 @@ function setup(): void {
         ContextMenu,
       })
     }
-  } catch {
+  } catch (err) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`Error setting up Zeego`, err)
+    }
     // zeego not installed
   }
 }

package/src/types.ts

@@ -69,3 +69,20 @@ export interface ZeegoState {
   DropdownMenu: any
   ContextMenu: any
 }
+
+export interface BurntState {
+  enabled: boolean
+  toast: ((options: any) => void) | null
+  dismissAllAlerts: (() => void) | null
+}
+
+export interface KeyboardControllerState {
+  enabled: boolean
+  KeyboardProvider: any
+  KeyboardAwareScrollView: any
+  useKeyboardHandler: any
+  useReanimatedKeyboardAnimation: any
+  KeyboardController: any
+  KeyboardEvents: any
+  KeyboardStickyView: any
+}