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

package/src/createTamagui.ts

@@ -1,8 +1,8 @@
-import { isWeb } from '@tamagui/constants'
 import { getConfigMaybe, setConfig, setTokens } from './config'
 import type { DeepVariableObject } from './createVariables'
 import { createVariables } from './createVariables'
 import { defaultAnimationDriver } from './helpers/defaultAnimationDriver'
+import { resolveAnimationDriver } from './helpers/resolveAnimationDriver'
 import {
   buildCSSRuleSets,
   createFontCSS,
@@ -46,6 +46,13 @@ function shouldTokenCategoryHaveUnits(category: string): boolean {
   return UNIT_CATEGORIES.has(category)
 }
 
+// code optimizers were causing issues by not calling both of these as esbuild had compiled them
+// pulling them into a single initializeTamaguiConfig to prevent that
+function initializeTamaguiConfig(config: TamaguiInternalConfig) {
+  setConfig(config)
+  configureMedia(config)
+}
+
 export function createTamagui<Conf extends CreateTamaguiProps>(
   configIn: Conf
 ): InferTamaguiConfig<Conf> {
@@ -182,9 +189,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   const defaultPositionSetting = configIn.settings?.defaultPosition || 'static'
 
   const defaultProps = configIn.defaultProps || {}
-  // Apply defaultPosition to viewDefaultStyles directly
-  // This avoids the deprecated defaultProps pattern in createComponent
-  if (process.env.TAMAGUI_TARGET === 'web') {
+  // apply defaultPosition via defaultProps when not static
+  if (process.env.TAMAGUI_TARGET === 'web' && defaultPositionSetting !== 'static') {
     defaultProps.View = {
       ...defaultProps.View,
       position: defaultPositionSetting,
@@ -194,20 +200,30 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   // ensure prefixed with $
   const defaultFontToken = defaultFont ? `$${defaultFont}` : ''
 
-  if (defaultFont) {
-    defaultProps.Text = {
-      ...defaultProps.Text,
-      fontFamily: defaultFontToken,
-    }
-  }
+  // Text inherits font from root via CSS, no need for default fontFamily
+  // only explicit fontFamily prop should add font_* class
+
+  // normalize multi-driver animation config to default driver
+  // supports format: { default: motionDriver, css: cssDriver }
+  // stores full config in animationDrivers for component-level selection via animatedBy
+  const inputAnimations = configIn.animations
+  const resolvedDriver = resolveAnimationDriver(inputAnimations)
+  // multi-driver when resolveAnimationDriver extracted .default (returned different ref)
+  const isMultiDriver = resolvedDriver !== null && resolvedDriver !== inputAnimations
+  const resolvedAnimations = resolvedDriver ?? inputAnimations
+  const animationDrivers = isMultiDriver
+    ? (inputAnimations as Record<string, any>)
+    : undefined
 
   const config: TamaguiInternalConfig = {
     fonts: {},
     onlyAllowShorthands: false,
     fontLanguages: [],
-    animations: defaultAnimationDriver,
     media: {},
     ...configIn,
+    // normalized animations (resolved from multi-driver format if needed)
+    animations: resolvedAnimations ?? defaultAnimationDriver,
+    animationDrivers,
     defaultProps,
     settings: {
       webContainerType: 'inline-size',
@@ -235,16 +251,17 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }
 
-  setConfig(config)
-  configureMedia(config)
+  initializeTamaguiConfig(config)
 
-  if (process.env.NODE_ENV === 'development') {
-    if (process.env.DEBUG?.startsWith('tamagui')) {
-      console.info('Tamagui config:', config)
-    }
-    if (!globalThis['Tamagui']) {
-      globalThis['Tamagui'] = Tamagui
-    }
+  if (process.env.NODE_ENV !== 'development') {
+    return config as any
+  }
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.info('Tamagui config:', config)
+  }
+  if (!globalThis['Tamagui']) {
+    globalThis['Tamagui'] = Tamagui
   }
 
   return config as any

package/src/createVariable.ts

@@ -90,7 +90,7 @@ export function getVariableName(v: Variable | any) {
   return v
 }
 
-export function getVariableVariable(v: Variable | any) {
+export function getVariableVariable(v: Variable | string | undefined) {
   if (isVariable(v)) return v.variable
   return v
 }

package/src/eventHandling.native.ts

@@ -1,14 +1,12 @@
 /**
- * Native event handling - uses RNGH when available, falls back to usePressability
+ * Native event handling - uses RNGH when available, falls back to responder system
  */
 
 import { composeEventHandlers } from '@tamagui/helpers'
 import { getGestureHandler } from '@tamagui/native'
 import React, { useRef } from 'react'
-import type { StaticConfig, TamaguiComponentStateRef } from './types'
-
-// TODO conditional improt - the way we bundle core test.native.js breaks if inline require need to fix
 import { useMainThreadPressEvents } from './helpers/mainThreadPressEvents'
+import type { StaticConfig, TamaguiComponentStateRef } from './types'
 
 // web events not used on native
 export function getWebEvents() {
@@ -20,7 +18,9 @@ export function useEvents(
   viewProps: any,
   stateRef: { current: TamaguiComponentStateRef },
   staticConfig: StaticConfig,
-  isHOC?: boolean
+  isHOC?: boolean,
+  isInsideNativeMenu?: boolean,
+  debugName?: string | null
 ) {
   // focus/blur events always attached directly
   if (events) {
@@ -32,42 +32,12 @@ export function useEvents(
     }
   }
 
-  // input special case - TextInput needs press events attached directly (not via RNGH)
-  if (staticConfig.isInput && events) {
-    const { onPressIn, onPressOut, onPress } = events
-    const inputEvents: any = {
-      onPressIn,
-      onPressOut: onPressOut || onPress,
-    }
-    if (onPressOut && onPress) {
-      // only supports onPressIn and onPressOut so combine them
-      inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
-    }
-    Object.assign(viewProps, inputEvents)
-    // inputs don't use gesture handler
-    return null
-  }
-
-  // HOC special case - pass press events to the inner component instead of wrapping
-  // HOC components may return null which crashes GestureDetector (it tries to access
-  // _internalInstanceHandle on a null native view). By passing events down, the inner
-  // component handles gesture detection at its own level.
-  if (isHOC && events) {
-    const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
-    Object.assign(viewProps, {
-      onPressIn,
-      onPressOut,
-      onPress,
-      onLongPress,
-      delayLongPress,
-    })
-    // HOCs don't use gesture handler at this level
-    return null
-  }
-
   const hasPressEvents =
     // its stable and always on if you have in/out/regular
     events?.onPress
+  const hasAnyPressCallbacks = Boolean(
+    events?.onPress || events?.onPressIn || events?.onPressOut || events?.onLongPress
+  )
 
   const gh = getGestureHandler()
 
@@ -78,11 +48,63 @@ export function useEvents(
 
   // avoid hooks/reparenting
   const everEnabled = Boolean(hasPressEvents || stateRef.current.hasHadEvents)
+  const isUsingRNGH = gh.isEnabled
 
-  // rngh
-  // gh.isEnabled - set once before app load - never changes
-  if (gh.isEnabled) {
-    const callbacksRef = useRef<any>({})
+  // NOW handle early returns (after all hooks are called)
+  // THESE BRANCHES ARE NEVER CHANGING RENDER-TO-RENDER
+
+  // input special case - TextInput needs press events attached directly (not via RNGH)
+  if (staticConfig.isInput) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress } = events
+      const inputEvents: any = {
+        onPressIn,
+        onPressOut: onPressOut || onPress,
+      }
+      if (onPressOut && onPress) {
+        // only supports onPressIn and onPressOut so combine them
+        inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
+      }
+      Object.assign(viewProps, inputEvents)
+    }
+
+    // inputs don't use gesture handler
+    return null
+  }
+
+  // HOC special case - pass press events to the inner component instead of wrapping
+  // HOC components may return null which crashes GestureDetector (it tries to access
+  // _internalInstanceHandle on a null native view). By passing events down, the inner
+  // component handles gesture detection at its own level.
+  //
+  // Composite component special case - when styled() wraps a non-Tamagui component
+  // (e.g. React.forwardRef), the elementType becomes that composite component.
+  // GestureDetector/responder wrapping around a composite component breaks during
+  // re-renders triggered by pressStyle state changes (the gesture/responder loses
+  // attachment to the native view through the composite layers). Pass events as props
+  // so they flow through to the inner native View.
+  const isCompositeComponent =
+    !isHOC && staticConfig.Component && typeof staticConfig.Component !== 'string'
+
+  if (isHOC || isCompositeComponent) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
+      Object.assign(viewProps, {
+        onPressIn,
+        onPressOut,
+        onPress,
+        onLongPress,
+        delayLongPress,
+      })
+    }
+    // HOCs and composite components don't use gesture handler at this level
+    return null
+  }
+
+  // rngh path - logic (hooks already called above)
+  if (isUsingRNGH) {
+    // rngh path - hooks
+    const callbacksRef = useRef<any>(isUsingRNGH ? {} : null)
     const gestureRef = useRef<any>(null)
 
     if (everEnabled) {
@@ -98,27 +120,54 @@ export function useEvents(
 
       // only create gesture once, callbacks are read from ref
       if (!gestureRef.current) {
-        gestureRef.current = gh.createPressGesture({
-          onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
-          onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
-          onPress: (e: any) => callbacksRef.current.onPress?.(e),
-          onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
-          delayLongPress: events.delayLongPress,
-          hitSlop: viewProps.hitSlop,
-        })
+        if (isInsideNativeMenu) {
+          // Inside native menus on Android: use Manual gesture with manualActivation
+          // so it never goes ACTIVE (which would send ACTION_CANCEL to MenuView).
+          // Press callbacks fire via onTouchesDown/Up instead.
+          const { Gesture } = gh.state
+          const manual = Gesture.Manual()
+            .runOnJS(true)
+            .manualActivation(true)
+            .onTouchesDown(() => {
+              callbacksRef.current.onPressIn?.({})
+            })
+            .onTouchesUp(() => {
+              callbacksRef.current.onPress?.({})
+              callbacksRef.current.onPressOut?.({})
+            })
+            .onTouchesCancelled(() => {
+              callbacksRef.current.onPressOut?.({})
+            })
+          gestureRef.current = manual
+        } else {
+          gestureRef.current = gh.createPressGesture({
+            debugName,
+            onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
+            onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
+            onPress: (e: any) => callbacksRef.current.onPress?.(e),
+            onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
+            delayLongPress: events?.delayLongPress,
+            hitSlop: viewProps.hitSlop,
+          })
+        }
       }
       // TODO update viewProps.hitSlop / events.delayLongPress!
 
+      // Claim responder to block parent RN Pressable/TouchableOpacity from firing.
+      // RNGH handles the actual press, but we need to tell the responder system
+      // that we're handling this touch to prevent it bubbling to parent pressables.
+      if (hasPressEvents) {
+        viewProps.onStartShouldSetResponder = () => true
+        viewProps.onResponderTerminationRequest = () => false
+      }
+
       return gestureRef.current
     }
 
-    // don't fall through to useMainThreadPressEvents
     return null
   }
 
-  // fallback - use usePressability when RNGH not enabled
-  // split into separate file to avoid deep import warnings
-  useMainThreadPressEvents(events, viewProps, hasPressEvents)
+  useMainThreadPressEvents(events, viewProps, hasPressEvents, debugName)
 
   return null
 }
@@ -127,11 +176,12 @@ export function wrapWithGestureDetector(
   content: any,
   gesture: any,
   stateRef: { current: TamaguiComponentStateRef },
-  isHOC?: boolean
+  isHOC?: boolean,
+  isCompositeComponent?: boolean
 ) {
-  // Skip wrapping for HOC components - they may return null which crashes GestureDetector
-  // (GestureDetector tries to access _internalInstanceHandle on a null native view)
-  if (isHOC) {
+  // Skip wrapping for HOC and composite components - they pass press events
+  // to the inner component via props instead of using GestureDetector
+  if (isHOC || isCompositeComponent) {
     return content
   }
 

package/src/eventHandling.ts

@@ -26,7 +26,8 @@ export function wrapWithGestureDetector(
   content: any,
   _gesture: any,
   _stateRef: { current: any },
-  _isHOC?: boolean
+  _isHOC?: boolean,
+  _isCompositeComponent?: boolean
 ) {
   return content
 }
@@ -37,7 +38,9 @@ export function useEvents(
   _viewProps: any,
   _stateRef: { current: any },
   _staticConfig: any,
-  _isHOC?: boolean
+  _isHOC?: boolean,
+  _isInsideNativeMenu?: boolean,
+  _debugName?: string | null
 ) {
   return null
 }

package/src/helpers/createDesignSystem.ts

@@ -1,5 +1,6 @@
 import { isWeb } from '@tamagui/constants'
 import type { CreateTamaguiProps, Variable } from '../types'
+import { getVariableVariable, isVariable } from '../createVariable'
 import { autoVariables, registerCSSVariable, variableToCSS } from './registerCSSVariable'
 import { getThemeCSSRules } from './getThemeCSSRules'
 import { getAllRules } from './insertStyleRule'
@@ -9,6 +10,38 @@ type ThemeConfig = {
   getThemeRulesSets: () => string[]
 }
 
+// helper to get font property CSS declarations
+function getFontPropertyDeclarations(
+  fontParsed: any,
+  tokenKey: string = '$true'
+): string[] {
+  const props: string[] = ['font-family: var(--f-family)']
+
+  const getVarRef = (obj: any) => {
+    const val = obj?.[tokenKey]
+    if (isVariable(val)) {
+      return getVariableVariable(val)
+    }
+    return undefined
+  }
+
+  const letterSpacing = getVarRef(fontParsed.letterSpacing)
+  if (letterSpacing) props.push(`letter-spacing: ${letterSpacing}`)
+
+  const lineHeight = getVarRef(fontParsed.lineHeight)
+  if (lineHeight) props.push(`line-height: ${lineHeight}`)
+
+  const fontStyle = getVarRef(fontParsed.style)
+  if (fontStyle) props.push(`font-style: ${fontStyle}`)
+
+  const fontWeight = getVarRef(fontParsed.weight)
+  if (fontWeight) props.push(`font-weight: ${fontWeight}`)
+
+  return props
+}
+
+export { getFontPropertyDeclarations }
+
 /**
  * Generates CSS for tokens - registers CSS variables and builds declaration strings
  */
@@ -46,11 +79,14 @@ export function createTokenCSS(
 export function createFontCSS(
   fontsParsed: Record<string, any> | undefined,
   registerFontVariables: (fontParsed: any) => string[]
-): Record<string, { name: string; declarations: string[]; language?: string }> {
+): Record<
+  string,
+  { name: string; declarations: string[]; language?: string; fontParsed: any }
+> {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const fontDeclarations: Record<
       string,
-      { name: string; declarations: string[]; language?: string }
+      { name: string; declarations: string[]; language?: string; fontParsed: any }
     > = {}
 
     if (!fontsParsed) return fontDeclarations
@@ -64,6 +100,7 @@ export function createFontCSS(
         name: name.slice(1),
         declarations: fontVars,
         language,
+        fontParsed,
       }
     }
 
@@ -79,8 +116,9 @@ export function buildCSSRuleSets(
   declarations: string[],
   fontDeclarations: Record<
     string,
-    { name: string; declarations: string[]; language?: string }
-  >
+    { name: string; declarations: string[]; language?: string; fontParsed: any }
+  >,
+  defaultFontToken: string = '$true'
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
@@ -95,11 +133,13 @@ export function buildCSSRuleSets(
       cssRuleSets.push(declarationsToRuleSet(declarations))
     }
 
-    // fonts
+    // fonts - each font_* sets CSS variables
+    const fontSelectors: string[] = []
     const sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort()
     for (const key of sortedFontDeclarationKeys) {
       const { name, declarations, language = 'default' } = fontDeclarations[key]
       const fontSelector = `.font_${name}`
+      fontSelectors.push(fontSelector)
       const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
       const selectors =
         language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
@@ -107,6 +147,20 @@ export function buildCSSRuleSets(
       cssRuleSets.push(specificRuleSet)
     }
 
+    // shared rule: all font_* classes + is_View apply font properties
+    // this resets fonts on Views like React Native does
+    if (fontSelectors.length) {
+      const firstFont = fontDeclarations[sortedFontDeclarationKeys[0]]
+      if (firstFont?.fontParsed) {
+        const fontProps = getFontPropertyDeclarations(
+          firstFont.fontParsed,
+          defaultFontToken
+        )
+        const sharedSelectors = [...fontSelectors, '.is_View'].join(', ')
+        cssRuleSets.push(`${sharedSelectors} {${fontProps.join('; ')}}`)
+      }
+    }
+
     return cssRuleSets
   }
   return []
@@ -176,12 +230,29 @@ export function getCSS(
       ? `:root{${autoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
       : ''
 
+    // notes:
+    // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
+    // display: inline breaks css transform styles
+
+    // !important or else random css easily overrides, the prop is absolute (local-first styling)
+    const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
+._hsb-y::-webkit-scrollbar:vertical { display: none !important; }
+._hsb-x { scrollbar-width: none !important; }
+._hsb-y { scrollbar-width: none !important; }`
+    const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
+:root ._pe-boxnone>* {pointer-events:auto;}`
+
     const designSystem = `._ovs-contain {overscroll-behavior:contain;}
-.is_Text .is_Text {display:inline-flex;font-family:inherit;}
+.t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
+.is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
+.is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+@scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
 .is_Input::selection, .is_TextArea::selection {background-color: var(--selectionColor);}
 .is_Input::placeholder, .is_TextArea::placeholder {color: var(--placeholderColor);}
+${pointerEventsCSS}
+${hideScrollBarsCSS}
 ${autoVarCSS}
 ${themeConfig.cssRuleSets.join(separator)}`
 

package/src/helpers/createMediaStyle.ts

@@ -1,5 +1,5 @@
 import { getSetting } from '../config'
-import { mediaObjectToString } from '../hooks/useMedia'
+import { mediaObjectToString } from './mediaObjectToString'
 import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
 import { getGroupPropParts, type GroupParts } from './getGroupPropParts'
 
@@ -22,7 +22,7 @@ const groupPseudoToPseudoCSSMap = {
   focusWithin: 'focus-within',
 }
 
-const specificities = new Array(5)
+const specificities = new Array(12)
   .fill(0)
   .map((_, i) => new Array(i).fill(':root').join(''))
 
@@ -73,7 +73,9 @@ export const createMediaStyle = (
   let groupMediaKey: string | undefined
   let containerName: string | undefined
   let nextIdentifier = identifier.replace(ogPrefix, id)
-  let styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
+  let styleInner = rules
+    .map((rule) => rule.replaceAll(identifier, nextIdentifier))
+    .join(';')
   let isHover = false
 
   if (isNonWindowMedia) {
@@ -104,7 +106,13 @@ export const createMediaStyle = (
       // add back in the { we used to split
       styleRule = styleInner.replace(selector, nextSelector)
     } else {
-      styleRule = `${specificities[specificity]}${styleInner}`
+      const prefix = specificities[specificity]
+      // when styleInner is wrapped in @media (eg hover), inject specificity
+      // inside the block — `:root@media ...` is invalid CSS
+      styleRule =
+        prefix && styleInner[0] === '@'
+          ? styleInner.replace('{', `{${prefix}`)
+          : `${prefix}${styleInner}`
     }
   }
 

package/src/helpers/createStyledContext.tsx

@@ -1,25 +1,34 @@
 import type { Context, ReactNode } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import type { StyledContext } from '../types'
 import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
-// test types:
-// const x = createContext({})
-// const y = x.Provider
-// export const ButtonContext = createStyledContext({
-//   size: '$4',
-// })
-// const z = useContext(ButtonContext.context)
-
-// avoid react compiler - we aren't breaking its rules but it shouldn't compile this file because
-// it will mis-interpret how we change the context value. in
-const createReactContext = React[Math.random() ? 'createContext' : 'createContext']
-
-export function createStyledContext<VariantProps extends Record<string, any>>(
+// use const (not function declaration) to prevent esbuild from hoisting
+// above __esm lazy init - function declarations get hoisted before
+// import_react is initialized, causing undefined.default errors in SSR
+export const createStyledContext = <VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
   namespace = ''
-): StyledContext<VariantProps> {
+): StyledContext<VariantProps> => {
+  // avoid react compiler - we aren't breaking its rules but it mis-interprets
+  // how we change the context value
+  'use no memo'
+
+  // lazy initialization fixes vite ssr hmr - module-level assignments can fail
+  // when React is undefined during __esm re-initialization order issues.
+  // also React.createContext is optimized oddly by React compiler and our
+  // uncommon usage confuses it, so we use dynamic access
+  const createReactContext = React[
+    Math.random() ? 'createContext' : 'createContext'
+  ] as typeof React.createContext
+  const useReactMemo = React[
+    Math.random() ? 'useMemo' : 'useMemo'
+  ] as typeof React.useMemo
+  const useReactContext = React[
+    Math.random() ? 'useContext' : 'useContext'
+  ] as typeof React.useContext
+
   const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<VariantProps>
@@ -47,7 +56,7 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
   }: VariantProps & { children?: ReactNode; scope: string }) => {
     const scope = getNamespacedScope(scopeIn)
 
-    const next = React.useMemo(() => {
+    const next = useReactMemo(() => {
       if (__disableMergeDefaultValues) {
         // we already merged and want to keep ordering
         return values
@@ -68,14 +77,14 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
 
   // use consumerComponent just to give a better error message
   const useStyledContext = (scopeIn = '') => {
-    const lastScopeInNamespace = useContext(LastScopeInNamespace)
+    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
     const scope = namespace
       ? scopeIn
         ? getNamespacedScope(scopeIn)
         : lastScopeInNamespace
       : scopeIn
     const context = scope ? getOrCreateScopedContext(scope) : OGContext
-    const value = React.useContext(context!) as VariantProps
+    const value = useReactContext(context!) as VariantProps
     return value
   }
 

package/src/helpers/defaultAnimationDriver.tsx

@@ -8,10 +8,8 @@ const noAnimationDriver = (method: string): any => {
 
 const createEmptyAnimationDriver = (): AnimationDriver => ({
   isReactNative: false,
-  supportsCSS: true,
   inputStyle: 'css',
   outputStyle: 'css',
-  classNameAnimation: true,
   isStub: true,
   animations: {},
   useAnimations: () => noAnimationDriver('animations'),
@@ -19,6 +17,7 @@ const createEmptyAnimationDriver = (): AnimationDriver => ({
   ResetPresence: () => noAnimationDriver('ResetPresence'),
   useAnimatedNumber: () => noAnimationDriver('useAnimatedNumber'),
   useAnimatedNumberStyle: () => noAnimationDriver('useAnimatedNumberStyle'),
+  useAnimatedNumbersStyle: () => noAnimationDriver('useAnimatedNumbersStyle'),
   useAnimatedNumberReaction: () => noAnimationDriver('useAnimatedNumberReaction'),
 })
 

package/src/helpers/expandStyle.ts

@@ -8,6 +8,7 @@ import { isAndroid, isWeb } from '@tamagui/constants'
 import { getSetting } from '../config'
 import type { PropMappedValue } from '../types'
 import { parseBorderShorthand } from './parseBorderShorthand'
+import { parseOutlineShorthand } from './parseOutlineShorthand'
 
 const neg1Flex = [
   ['flexGrow', 0],
@@ -65,6 +66,7 @@ export function expandStyle(key: string, value: any): PropMappedValue {
       }
       case 'backgroundImage': {
         // RN 0.76+ uses experimental_backgroundImage
+        // value may be a parsed array (from parseNativeStyle) or a plain string
         return [['experimental_backgroundImage', value]]
       }
       case 'border': {
@@ -78,6 +80,15 @@ export function expandStyle(key: string, value: any): PropMappedValue {
         }
         return
       }
+      case 'outline': {
+        if (typeof value === 'string') {
+          const parsed = parseOutlineShorthand(value)
+          if (parsed) {
+            return parsed
+          }
+        }
+        return
+      }
     }
 
     // native-only key expansions (logical properties)