@tamagui/native 3.0.0-beta.924.1 → 3.0.1

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/native",
-  "version": "3.0.0-beta.924.1",
+  "version": "3.0.1",
+  "license": "MIT",
   "description": "Native setup modules for Tamagui - portals, gesture handler, worklets, and more",
   "type": "module",
   "sideEffects": [
@@ -15,8 +16,6 @@
     "gesture-handler.cjs",
     "setup-burnt",
     "setup-burnt.cjs",
-    "setup-expo-linear-gradient",
-    "setup-expo-linear-gradient.cjs",
     "setup-expo-ui-menu",
     "setup-expo-ui-menu.cjs",
     "setup-gesture-handler",
@@ -25,6 +24,8 @@
     "setup-keyboard-controller.cjs",
     "setup-safe-area",
     "setup-safe-area.cjs",
+    "setup-one-portal",
+    "setup-one-portal.cjs",
     "setup-teleport",
     "setup-teleport.cjs",
     "setup-worklets",
@@ -37,6 +38,9 @@
   "types": "./types/index.d.ts",
   "typesVersions": {
     "*": {
+      "setup-one-portal": [
+        "./types/setup-one-portal.d.ts"
+      ],
       "setup-teleport": [
         "./types/setup-teleport.d.ts"
       ],
@@ -52,9 +56,6 @@
       "setup-safe-area": [
         "./types/setup-safe-area.d.ts"
       ],
-      "setup-expo-linear-gradient": [
-        "./types/setup-expo-linear-gradient.d.ts"
-      ],
       "setup-keyboard-controller": [
         "./types/setup-keyboard-controller.d.ts"
       ],
@@ -80,6 +81,15 @@
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
     },
+    "./setup-one-portal": {
+      "types": "./types/setup-one-portal.d.ts",
+      "react-native": "./dist/esm/setup-one-portal.native.js",
+      "browser": "./dist/esm/setup-one-portal.mjs",
+      "module": "./dist/esm/setup-one-portal.mjs",
+      "import": "./dist/esm/setup-one-portal.mjs",
+      "require": "./dist/cjs/setup-one-portal.cjs",
+      "default": "./dist/esm/setup-one-portal.mjs"
+    },
     "./setup-teleport": {
       "types": "./types/setup-teleport.d.ts",
       "react-native": "./dist/esm/setup-teleport.native.js",
@@ -125,15 +135,6 @@
       "require": "./dist/cjs/setup-safe-area.cjs",
       "default": "./dist/esm/setup-safe-area.mjs"
     },
-    "./setup-expo-linear-gradient": {
-      "types": "./types/setup-expo-linear-gradient.d.ts",
-      "react-native": "./dist/esm/setup-expo-linear-gradient.native.js",
-      "browser": "./dist/esm/setup-expo-linear-gradient.mjs",
-      "module": "./dist/esm/setup-expo-linear-gradient.mjs",
-      "import": "./dist/esm/setup-expo-linear-gradient.mjs",
-      "require": "./dist/cjs/setup-expo-linear-gradient.cjs",
-      "default": "./dist/esm/setup-expo-linear-gradient.mjs"
-    },
     "./setup-keyboard-controller": {
       "types": "./types/setup-keyboard-controller.d.ts",
       "react-native": "./dist/esm/setup-keyboard-controller.native.js",
@@ -181,18 +182,18 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.924.1"
+    "@tamagui/compose-refs": "3.0.1",
+    "@tamagui/react-native-types": "3.0.1"
   },
   "devDependencies": {
     "@expo/ui": "~57.0.12",
-    "@tamagui/build": "3.0.0-beta.924.1",
+    "@tamagui/build": "3.0.1",
     "burnt": "^0.13.0",
-    "expo-linear-gradient": "~57.0.1",
     "react": "19.2.3",
-    "react-native": "0.86.2",
-    "react-native-gesture-handler": "~2.32.0",
+    "react-native": "0.87.1",
+    "react-native-gesture-handler": "3.3.0",
     "react-native-keyboard-controller": "1.21.11",
-    "react-native-safe-area-context": "~5.7.0",
+    "react-native-safe-area-context": "5.10.1",
     "react-native-teleport": "^1.0.0",
     "react-native-web": "~0.21.0",
     "react-native-worklets-core": "^1.0.0",
@@ -201,7 +202,7 @@
   "peerDependencies": {
     "@expo/ui": "*",
     "burnt": "*",
-    "expo-linear-gradient": "*",
+    "one": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
@@ -225,9 +226,6 @@
     "react-native-web": {
       "optional": true
     },
-    "expo-linear-gradient": {
-      "optional": true
-    },
     "react-native-gesture-handler": {
       "optional": true
     },
@@ -245,11 +243,15 @@
     },
     "zeego": {
       "optional": true
+    },
+    "one": {
+      "optional": true
     }
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",
     "directory": "code/core/native"
-  }
+  },
+  "releaseSourceCommit": "c156b7cc55e5a6cc5883ebc8189720850ac32dbd"
 }

package/setup-one-portal/index.cjs

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

package/setup-one-portal/index.js

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

package/setup-one-portal/index.native.cjs

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

package/setup-one-portal/index.native.js

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

package/setup-one-portal.cjs

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

package/src/PressBoundary.native.tsx

@@ -0,0 +1,75 @@
+import { createRefComponent } from '@tamagui/compose-refs'
+import React from 'react'
+import { View, type ViewInstance } from 'react-native'
+import {
+  claimExternalPressOwnership,
+  releaseExternalPressOwnership,
+  type ExternalPressOwnershipToken,
+} from './gestureState'
+import type { PressBoundaryProps } from './types'
+
+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: (
+  props: PressBoundaryProps & { ref?: React.Ref<ViewInstance> }
+) => React.ReactNode = createRefComponent<ViewInstance, 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/PressBoundary.tsx

@@ -1,84 +1,17 @@
-import { createRefComponent } from '@tamagui/compose-refs'
-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 Tamagui'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)
-  }
+import type { ReactNode, Ref } from 'react'
+
+import type { PressBoundaryProps } from './types'
+
+/**
+ * Renders children as-is.
+ *
+ * The boundary exists to arbitrate Tamagui's shared press ownership with
+ * react-native-gesture-handler, which only runs on native, so on web there is
+ * nothing to claim and no view worth adding. `ref` is accepted and ignored for
+ * the same reason: there is no host node here to hand back.
+ */
+export function PressBoundary({
+  children,
+}: PressBoundaryProps & { ref?: Ref<unknown> }): ReactNode {
+  return <>{children}</>
 }
-
-export const PressBoundary: (
-  props: PressBoundaryProps & { ref?: React.Ref<View> }
-) => React.ReactNode = createRefComponent<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/components.tsx

@@ -31,8 +31,8 @@ export function NativePortalHost({ name }: NativePortalHostProps): ReactNode {
   const state = getPortal().state
   if (state.type !== 'teleport') return null
 
-  const { PortalHost } = (globalThis as any).__tamagui_teleport
-  return <PortalHost name={name} />
+  const { PortalHost, hostStyle } = (globalThis as any).__tamagui_teleport
+  return <PortalHost name={name} style={hostStyle} />
 }
 
 /**
@@ -44,5 +44,6 @@ export function NativePortalProvider({ children }: NativePortalProviderProps): R
   if (state.type !== 'teleport') return <>{children}</>
 
   const { PortalProvider } = (globalThis as any).__tamagui_teleport
+  if (!PortalProvider) return <>{children}</>
   return <PortalProvider>{children}</PortalProvider>
 }

package/src/expoUIMenuAdapter.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import type { NativeMenuAdapter, NativeMenuModule } from './nativeMenuState'
 
-type ExpoMenuAction = {
+export type ExpoMenuAction = {
   id: string
   title: string
   image?: unknown
@@ -17,7 +17,7 @@ type ExpoMenuAction = {
   displayInline?: boolean
 }
 
-type ExpoMenuViewProps = {
+export type ExpoMenuViewProps = {
   actions: ExpoMenuAction[]
   title?: string
   shouldOpenOnLongPress?: boolean

package/src/expoUIMenuView.tsx

@@ -0,0 +1,124 @@
+import type { ComponentType, ReactNode } from 'react'
+import React from 'react'
+
+import type { ExpoMenuAction, ExpoMenuViewProps } from './expoUIMenuAdapter'
+
+// the swiftui menu behind every native Menu and ContextMenu trigger on ios,
+// composed from @expo/ui/swift-ui the same way @expo/ui's community MenuView
+// is, minus `matchContents` on the Host. that flag copies each SwiftUI
+// measurement back onto the host's yoga node as a fixed height, and yoga then
+// measures the trigger's react-native children against that height, so trigger
+// content can shrink but never grow: a row that mounts empty and fills in later
+// stays at 0pt, and a streaming paragraph stays at its first line count. without
+// the flag the host takes its height from the hosted react-native subtree like
+// any other view, and RNHostView still sizes the SwiftUI side from that
+// subtree's yoga bounds.
+
+type SwiftUIModule = {
+  Button: ComponentType<any>
+  ContextMenu: ComponentType<any> & {
+    Trigger: ComponentType<any>
+    Items: ComponentType<any>
+  }
+  Host: ComponentType<any>
+  Menu: ComponentType<any>
+  RNHostView: ComponentType<any>
+  Section: ComponentType<any>
+  Toggle: ComponentType<any>
+}
+
+type SwiftUIModifiersModule = {
+  disabled: (value: boolean) => unknown
+}
+
+export function createExpoUIMenuView({
+  swiftUI,
+  modifiers,
+}: {
+  swiftUI: SwiftUIModule
+  modifiers: SwiftUIModifiersModule
+}): ComponentType<ExpoMenuViewProps> {
+  const { Button, ContextMenu, Host, Menu, RNHostView, Section, Toggle } = swiftUI
+
+  function renderAction(
+    action: ExpoMenuAction,
+    onPressAction: ExpoMenuViewProps['onPressAction']
+  ): ReactNode {
+    if (action.attributes?.hidden) return null
+    const { subactions, displayInline, state, attributes, image, title } = action
+    const systemImage = typeof image === 'string' ? image : undefined
+
+    if (subactions && subactions.length > 0) {
+      const children = subactions.map((sub) => renderAction(sub, onPressAction))
+      if (displayInline) {
+        return (
+          <Section key={action.id} title={title}>
+            {children}
+          </Section>
+        )
+      }
+      return (
+        <Menu key={action.id} label={title} systemImage={systemImage}>
+          {children}
+        </Menu>
+      )
+    }
+
+    const fire = () => onPressAction?.({ nativeEvent: { event: action.id } })
+    const itemModifiers = attributes?.disabled ? [modifiers.disabled(true)] : undefined
+
+    if (state === 'on' || state === 'off') {
+      return (
+        <Toggle
+          key={action.id}
+          label={title}
+          systemImage={systemImage}
+          isOn={state === 'on'}
+          onIsOnChange={fire}
+          modifiers={itemModifiers}
+        />
+      )
+    }
+
+    return (
+      <Button
+        key={action.id}
+        label={title}
+        systemImage={systemImage}
+        role={attributes?.destructive ? 'destructive' : undefined}
+        modifiers={itemModifiers}
+        onPress={fire}
+      />
+    )
+  }
+
+  return function ExpoUIMenuView({
+    actions,
+    onPressAction,
+    shouldOpenOnLongPress,
+    title,
+    children,
+  }: ExpoMenuViewProps) {
+    const items = actions.map((action) => renderAction(action, onPressAction))
+    const body = title ? <Section title={title}>{items}</Section> : items
+    // RNHostView takes exactly one element, so the trigger children ride in a
+    // fragment
+    const trigger = (
+      <RNHostView matchContents>
+        <>{children}</>
+      </RNHostView>
+    )
+    return (
+      <Host ignoreSafeArea="all">
+        {shouldOpenOnLongPress ? (
+          <ContextMenu>
+            <ContextMenu.Trigger>{trigger}</ContextMenu.Trigger>
+            <ContextMenu.Items>{body}</ContextMenu.Items>
+          </ContextMenu>
+        ) : (
+          <Menu label={trigger}>{body}</Menu>
+        )}
+      </Host>
+    )
+  }
+}

package/src/gesture-handler.ts

@@ -10,7 +10,7 @@ export {
   releaseExternalPressOwnership as unstable_releaseExternalPressOwnership,
 } from './gestureState'
 export { PressBoundary } from './PressBoundary'
-export type { PressBoundaryProps } from './PressBoundary'
+export type { PressBoundaryProps } from './types'
 export {
   getGestureHandlerConfig,
   setupGestureHandler,

package/src/index.ts

@@ -10,12 +10,10 @@
  * import '@tamagui/native/setup-gesture-handler'
  * import '@tamagui/native/setup-worklets'
  * import '@tamagui/native/setup-safe-area'
- * import '@tamagui/native/expo-linear-gradient'
  * import '@tamagui/native/setup-keyboard-controller'
  *
  * // Then use Tamagui components normally
  * // Sheet will automatically use native gestures when available
- * // LinearGradient will use expo-linear-gradient when installed
  * ```
  */
 
@@ -28,7 +26,6 @@ export type {
   SafeAreaInsets,
   SafeAreaFrame,
   SafeAreaMetrics,
-  LinearGradientState,
   BurntState,
   NativePortalProps,
   NativePortalHostProps,
@@ -64,10 +61,6 @@ export type { WorkletsAccessor } from './workletsState'
 export { getSafeArea, hasSafeAreaSetup } 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,

package/src/nativeMenuContext.ts

@@ -1,4 +1,10 @@
 import type React from 'react'
 import { createContext } from 'react'
 
-export const NativeMenuContext: React.Context<boolean> = createContext(false)
+// one context per runtime: core reads it and the menu packages provide it, so a
+// second copy of this module (a bundled core, a duplicated install) must not
+// split them into two contexts that never see each other
+const KEY = '__tamagui_native_menu_context__'
+const g = globalThis as typeof globalThis & { [KEY]?: React.Context<boolean> }
+
+export const NativeMenuContext: React.Context<boolean> = (g[KEY] ??= createContext(false))

package/src/setup-expo-ui-menu.ts

@@ -6,12 +6,20 @@
  */
 
 import { createExpoUIMenuAdapter } from './expoUIMenuAdapter'
+import { createExpoUIMenuView } from './expoUIMenuView'
 import { registerNativeMenuAdapter } from './nativeMenuState'
+import { Platform } from 'react-native'
 
 function setup(): void {
   let MenuView
   try {
-    MenuView = require('@expo/ui/community/menu').MenuView
+    MenuView =
+      Platform.OS === 'ios'
+        ? createExpoUIMenuView({
+            swiftUI: require('@expo/ui/swift-ui'),
+            modifiers: require('@expo/ui/swift-ui/modifiers'),
+          })
+        : require('@expo/ui/community/menu').MenuView
   } catch (error) {
     if (process.env.NODE_ENV === 'development') {
       console.warn('Error setting up Expo UI native menus', error)

package/src/setup-one-portal.ts

@@ -0,0 +1,32 @@
+/**
+ * Setup native portal support for Tamagui with One's native portals
+ * (One.UI.Portal and One.UI.PortalHost), an alternative to setup-teleport.
+ *
+ * Import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@tamagui/native/setup-one-portal'
+ * ```
+ */
+
+import { getPortal } from './portalState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__tamagui_native_portal_setup) return
+  g.__tamagui_native_portal_setup = true
+
+  const { One } = require('one')
+  // one's portals keep their react tree without a provider and lay content out
+  // against the host's own size, so the host fills its parent.
+  g.__tamagui_teleport = {
+    Portal: One.UI.Portal,
+    PortalHost: One.UI.PortalHost,
+    hostStyle: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+  }
+  getPortal().set({ enabled: true, type: 'teleport' })
+}
+
+// run setup immediately on import
+setup()

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { ViewProps } from '@tamagui/react-native-types'
 import type { ReactNode } from 'react'
 
 export type NativePortalState = {
@@ -64,11 +65,6 @@ export type NativePortalProviderProps = {
   children: ReactNode
 }
 
-export interface LinearGradientState {
-  enabled: boolean
-  Component: any
-}
-
 export interface BurntState {
   enabled: boolean
   toast: ((options: any) => void) | null
@@ -85,3 +81,13 @@ export interface KeyboardControllerState {
   KeyboardEvents: any
   KeyboardStickyView: any
 }
+
+export interface PressBoundaryProps extends ViewProps {
+  enabled?: boolean
+  /**
+   * Alias for enabling the boundary. The behavior is limited to Tamagui's
+   * shared press ownership and does not patch arbitrary RN bubbling.
+   */
+  stopPropagation?: boolean
+  debugName?: string | null
+}

package/types/PressBoundary.d.ts

@@ -1,16 +1,15 @@
-import React from "react";
-import { View, type ViewProps } from "react-native";
-export interface PressBoundaryProps extends ViewProps {
-	enabled?: boolean;
-	/**
-	* Alias for enabling the boundary. The behavior is limited to Tamagui's
-	* shared press ownership and does not patch arbitrary RN bubbling.
-	*/
-	stopPropagation?: boolean;
-	debugName?: string | null;
-}
-export declare const PressBoundary: (props: PressBoundaryProps & {
-	ref?: React.Ref<View>;
-}) => React.ReactNode;
+import type { ReactNode, Ref } from "react";
+import type { PressBoundaryProps } from "./types";
+/**
+* Renders children as-is.
+*
+* The boundary exists to arbitrate Tamagui's shared press ownership with
+* react-native-gesture-handler, which only runs on native, so on web there is
+* nothing to claim and no view worth adding. `ref` is accepted and ignored for
+* the same reason: there is no host node here to hand back.
+*/
+export declare function PressBoundary({ children }: PressBoundaryProps & {
+	ref?: Ref<unknown>;
+}): ReactNode;
 
 //# sourceMappingURL=PressBoundary.d.ts.map