@tamagui/web 2.0.0-rc.8 → 2.0.0

package/src/types.tsx

@@ -426,7 +426,7 @@ export type FontLanguageProps = LanguageContextType & {
 
 export type ThemeProviderProps = {
   className?: string
-  defaultTheme: string
+  defaultTheme: string | null | undefined
   /** @deprecated moved to createTamagui({ settings: { disableRootThemeClass } }) */
   disableRootThemeClass?: boolean
   /** @deprecated moved to createTamagui({ settings: { themeClassNameOnRoot } }) */
@@ -596,6 +596,7 @@ export type TamaguiComponentStateRef = {
   hasEverThemed?: boolean | 'wrapped'
   hasEverResetPresence?: boolean
   hasHadEvents?: boolean
+  hasRealPressEvents?: boolean
   isListeningToTheme?: boolean
   unPress?: Function
   setStateShallow?: ComponentSetStateShallow
@@ -612,6 +613,14 @@ export type TamaguiComponentStateRef = {
 
   // cleanup function for media emit listener
   mediaEmitCleanup?: () => void
+
+  // previous pseudo state for detecting enter vs exit transitions
+  prevPseudoState?: {
+    hover?: boolean
+    press?: boolean
+    focus?: boolean
+    groups?: Record<string, { hover?: boolean; press?: boolean; focus?: boolean }>
+  }
 }
 
 export type ComponentGroupEmitter = {
@@ -803,6 +812,9 @@ export type CreateTamaguiConfig<
   E extends GenericAnimations = GenericAnimations,
   F extends GenericFonts = GenericFonts,
   H extends GenericTamaguiSettings = GenericTamaguiSettings,
+  // preserve the raw animation driver keys ('default' | 'css' | etc)
+  // defaults to string so generic TamaguiInternalConfig accepts any driver keys
+  AnimDriverKeys extends string = string,
 > = {
   fonts: RemoveLanguagePostfixes<F>
   fontLanguages: GetLanguagePostfixes<F> extends never
@@ -821,6 +833,8 @@ export type CreateTamaguiConfig<
   // Multi-driver: { default: cssDriver, spring: motiDriver }
   // Single: AnimationDriver<E>
   animations: AnimationDriver<E> | AnimationsConfigObject
+  // phantom type for preserving driver keys - never set at runtime, only for type inference
+  animationDriverKeys?: AnimDriverKeys
   settings: H
 }
 
@@ -886,6 +900,16 @@ type ExtractAnimationConfig<E> =
         ? E
         : EmptyAnimations
 
+// Helper to extract animation driver keys from raw animations prop
+// Single driver: returns 'default'
+// Multi-driver { default: x, css: y }: returns 'default' | 'css'
+type ExtractAnimationDriverKeys<E> =
+  E extends AnimationDriver<any>
+    ? 'default'
+    : E extends { default: AnimationDriver<any> }
+      ? Extract<keyof E, string>
+      : 'default'
+
 export type InferTamaguiConfig<Conf> =
   Conf extends ConfProps<infer A, infer B, infer C, infer D, infer E, infer F, infer H>
     ? TamaguiInternalConfig<
@@ -895,7 +919,8 @@ export type InferTamaguiConfig<Conf> =
         D extends GenericMedia ? D : EmptyMedia,
         ExtractAnimationConfig<E>,
         F extends GenericFonts ? F : EmptyFonts,
-        H extends GenericTamaguiSettings ? H : EmptyTamaguiSettings
+        H extends GenericTamaguiSettings ? H : EmptyTamaguiSettings,
+        ExtractAnimationDriverKeys<E>
       >
     : unknown
 
@@ -954,7 +979,10 @@ export type ThemeTokens = `$${ThemeKeys}`
 // Animation names (slow, fast, bouncy) for the `transition` prop
 // Extract animation keys from the driver's `animations` property
 // The AnimationDriver<Config> has an `animations: Config` property
-type GetAnimationsFromDriver<T> = T extends { animations: infer A } ? keyof A : never
+// Use Extract<keyof A, string> to filter out number/symbol keys from fallback case
+type GetAnimationsFromDriver<T> = T extends { animations: infer A }
+  ? Extract<keyof A, string>
+  : never
 
 // For multi-driver configs like { default: AnimationDriver, css: AnimationDriver }
 // Extract from the 'default' driver or first driver found
@@ -976,21 +1004,18 @@ type InferredTransitionKeys =
 export type TransitionKeys = InferredTransitionKeys
 
 // Driver keys (default, css, spring) for the `animatedBy` prop
-type InferredAnimationDriverKeys =
-  TamaguiConfig['animations'] extends AnimationDriver<any>
-    ? 'default'
-    : TamaguiConfig['animations'] extends Record<string, AnimationDriver<any>>
-      ? keyof TamaguiConfig['animations']
-      : 'default'
-
-// Combine inferred keys from config with TypeOverride keys
-// This ensures both config-defined drivers AND lazy-loaded drivers are available
+// Gets driver keys directly from TamaguiConfig.animationDriverKeys
+// Falls back to 'default' only when TamaguiCustomConfig is empty (no augmentation)
+// The Exclude<X, undefined> handles optional property, then we intersect with string
+// to ensure only string keys (not symbols/numbers)
 export type AnimationDriverKeys =
   | 'default'
-  | InferredAnimationDriverKeys
+  | Extract<Exclude<TamaguiConfig['animationDriverKeys'], undefined>, string>
+  // add TypeOverride keys for lazy-loaded drivers
   | (ReturnType<TypeOverride['animationDrivers']> extends 1
       ? never
       : ReturnType<TypeOverride['animationDrivers']>)
+
 export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>
 
 export interface ThemeProps {
@@ -1050,10 +1075,15 @@ type AutocompleteSpecificTokensSetting = boolean | 'except-special'
 
 export interface GenericTamaguiSettings {
   /**
-   * When true, flexBasis will be set to 0 when flex is positive. This will be
-   * the default in v2 of Tamagui alongside an alternative mode for web compat.
+   * controls style semantics where React Native/Yoga and CSS differ.
+   *
+   * - "legacy": preserves Tamagui v1 flex expansion.
+   * - "react-native": follows React Native/Yoga flex and raw numeric lineHeight semantics.
+   * - "web": follows CSS flex and unitless numeric lineHeight semantics.
+   *
+   * @default "web"
    */
-  styleCompat?: 'react-native' | 'legacy'
+  styleCompat?: 'legacy' | 'react-native' | 'web'
 
   // TODO
   /**
@@ -1305,8 +1335,11 @@ export type TamaguiInternalConfig<
   E extends GenericAnimations = GenericAnimations,
   F extends GenericFonts = GenericFonts,
   G extends GenericTamaguiSettings = GenericTamaguiSettings,
+  // preserve the raw animation driver keys ('default' | 'css' | etc)
+  // defaults to string so generic TamaguiInternalConfig accepts any driver keys
+  AnimDriverKeys extends string = string,
 > = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &
-  Omit<CreateTamaguiConfig<A, B, C, D, E, F, G>, 'tokens'> & {
+  Omit<CreateTamaguiConfig<A, B, C, D, E, F, G, AnimDriverKeys>, 'tokens'> & {
     // TODO need to make it this but this breaks types, revisit
     // animations: E //AnimationDriver<E>
     // with $ prefixes for fast lookups (one time cost at startup vs every render)
@@ -1325,6 +1358,9 @@ export type TamaguiInternalConfig<
     settings: Omit<GenericTamaguiSettings, keyof G> & G
     defaultFont?: string
     defaultFontToken: `${string}`
+    // multi-driver animation config (e.g., { default: motionDriver, css: cssDriver })
+    // used for component-level driver selection via animatedBy prop
+    animationDrivers?: Record<string, AnimationDriver>
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']
@@ -1360,8 +1396,18 @@ export type MediaQueryKey = keyof Media
 export type MediaPropKeys = `$${MediaQueryKey}`
 export type MediaQueryState = { [key in MediaQueryKey]: boolean }
 
-export type ThemeMediaKeys<TK extends keyof Themes = keyof Themes> =
-  `$theme-${TK extends `${string}_${string}` ? never : TK}`
+// guard against a loose `Themes` whose `keyof` collapses to `string` (e.g. a config
+// whose themes type carries a string index signature). without this, TK becomes `string`
+// and ThemeMediaKeys becomes `$theme-${string}`, which collapses the whole WithMediaProps
+// mapped type into a `[key: string]` index signature that then swallows non-style props
+// like onPress/children. see issue #4010
+export type ThemeMediaKeys<TK extends keyof Themes = keyof Themes> = TK extends string
+  ? string extends TK
+    ? never
+    : TK extends `${string}_${string}`
+      ? never
+      : `$theme-${TK}`
+  : never
 
 export type PlatformMediaKeys = `$platform-${AllPlatforms}`
 
@@ -1397,19 +1443,14 @@ export type WithMediaProps<A> = {
         [Key in PlatformMediaKeys]?: AddWebOnlyStyleProps<A>
       }
     : Key extends `$platform-web`
-      ? AddWebOnlyStyleProps<A>
-      : A
+      ? AddWebOnlyStyleProps<A> & { [Key in MediaPropKeys]?: AddWebOnlyStyleProps<A> }
+      : A & { [Key in MediaPropKeys]?: A }
 }
 
-type AddWebOnlyStyleProps<A> = {
-  [SubKey in keyof A | keyof CSSProperties]?: SubKey extends keyof CSSProperties
-    ? CSSProperties[SubKey]
-    : SubKey extends keyof A
-      ? A[SubKey]
-      : SubKey extends keyof WebOnlyValidStyleValues
-        ? WebOnlyValidStyleValues[SubKey]
-        : never
-}
+export type AddWebOnlyStyleProps<A> = Partial<CSSProperties> &
+  Partial<WebOnlyValidStyleValues> & {
+    [K in Exclude<keyof A, keyof CSSProperties>]?: A[K]
+  }
 
 export type WebOnlyValidStyleValues = {
   position: '-webkit-sticky'
@@ -1667,11 +1708,13 @@ export type ColorTokens =
 export type ZIndexTokens =
   | SpecificTokensSpecial
   | GetTokenString<keyof Tokens['zIndex']>
+  | ThemeValueFallbackZIndex
   | number
 
 export type RadiusTokens =
   | SpecificTokensSpecial
   | GetTokenString<keyof Tokens['radius']>
+  | ThemeValueFallbackRadius
   | number
   | RemString
 
@@ -1771,16 +1814,18 @@ export type ThemeValueByCategory<K extends string | number | symbol> = K extends
             ? ColorTokens
             : K extends 'zIndex'
               ? ZIndexTokens
-              : K extends 'lineHeight'
-                ? FontLineHeightTokens
-                : K extends 'fontWeight'
-                  ? FontWeightTokens
-                  : K extends 'letterSpacing'
-                    ? FontLetterSpacingTokens
-                    : K extends keyof Tokens
-                      ? // fallback to user-defined tokens
-                        GetTokenString<keyof Tokens[K]>
-                      : never
+              : K extends 'radius'
+                ? RadiusTokens
+                : K extends 'lineHeight'
+                  ? FontLineHeightTokens
+                  : K extends 'fontWeight'
+                    ? FontWeightTokens
+                    : K extends 'letterSpacing'
+                      ? FontLetterSpacingTokens
+                      : K extends keyof Tokens
+                        ? // fallback to user-defined tokens
+                          GetTokenString<keyof Tokens[K]>
+                        : never
 
 export type FontKeys = 'fontFamily'
 export type FontSizeKeys = 'fontSize'
@@ -1793,21 +1838,21 @@ export type OpacityKeys = 'opacity'
 export type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'
   ? ThemeTokens
   : K extends SizeKeys
-    ? SizeTokens | ThemeValueFallbackSize
+    ? SizeTokens
     : K extends FontKeys
       ? FontTokens
       : K extends FontSizeKeys
         ? FontSizeTokens
         : K extends `${`border${string | ''}Radius`}`
-          ? RadiusTokens | ThemeValueFallbackRadius
+          ? RadiusTokens
           : K extends SpaceKeys
             ? K extends 'shadowOffset'
               ? { width: SpaceTokens; height: SpaceTokens }
-              : SpaceTokens | ThemeValueFallbackSpace
+              : SpaceTokens
             : K extends ColorKeys
               ? ColorTokens | ThemeValueFallbackColor
               : K extends ZIndexKeys
-                ? ZIndexTokens | ThemeValueFallbackZIndex
+                ? ZIndexTokens
                 : K extends LineHeightKeys
                   ? FontLineHeightTokens
                   : K extends FontWeightKeys
@@ -1863,15 +1908,30 @@ export type WithShorthands<StyleProps> = {
 }
 
 // adds pseudo props
+// PseudoStyleWithTransition allows transition inside pseudo-style props for enter/exit timing
+export type PseudoStyleWithTransition<A> = A & { transition?: TransitionProp | null }
+
 export type WithPseudoProps<A> = {
-  hoverStyle?: A | null
-  pressStyle?: A | null
-  focusStyle?: A | null
-  focusWithinStyle?: A | null
-  focusVisibleStyle?: A | null
-  disabledStyle?: A | null
-  exitStyle?: A | null
-  enterStyle?: A | null
+  hoverStyle?: PseudoStyleWithTransition<A> | null
+  pressStyle?: PseudoStyleWithTransition<A> | null
+  focusStyle?: PseudoStyleWithTransition<A> | null
+  focusWithinStyle?: PseudoStyleWithTransition<A> | null
+  focusVisibleStyle?: PseudoStyleWithTransition<A> | null
+  disabledStyle?: PseudoStyleWithTransition<A> | null
+  exitStyle?: PseudoStyleWithTransition<A> | null
+  enterStyle?: PseudoStyleWithTransition<A> | null
+}
+
+// type for transitions extracted from pseudo-style props (e.g., hoverStyle.transition)
+// includes $group-*-hover, $group-*-press, $group-*-focus patterns
+export type PseudoTransitions = Partial<
+  Record<keyof WithPseudoProps<any>, TransitionProp | null>
+> & {
+  // allow $group-{name}-{pseudo} keys dynamically
+  [key: `$group-${string}-${'hover' | 'press' | 'focus'}`]:
+    | TransitionProp
+    | null
+    | undefined
 }
 
 export type PseudoPropKeys = keyof WithPseudoProps<any>
@@ -1887,7 +1947,14 @@ export type PseudoStyles = {
   exitStyle?: ViewStyle
 }
 
-export type AllPlatforms = 'web' | 'native' | 'android' | 'ios'
+export type AllPlatforms =
+  | 'web'
+  | 'native'
+  | 'android'
+  | 'ios'
+  | 'tv'
+  | 'androidtv'
+  | 'tvos'
 
 // MUST EXPORT ALL IN BETWEEN or else it expands declarations like crazy
 
@@ -2420,6 +2487,7 @@ export interface StackStyleBase
 export interface TextStylePropsBase
   extends Omit<RNTextStyle, keyof ExtendedBaseProps>, ExtendedBaseProps {
   ellipsis?: boolean
+  numberOfLines?: number
   textDecorationDistance?: number
   textOverflow?: Properties['textOverflow']
   whiteSpace?: Properties['whiteSpace']
@@ -2681,7 +2749,7 @@ export type TamaguiProviderProps = Omit<ThemeProviderProps, 'children'> & {
   insets?: { top: number; right: number; bottom: number; left: number }
 }
 
-export type PropMappedValue = [string, any][] | undefined
+export type PropMappedValue = [string, any, any?][] | undefined
 
 export type GetStyleState = {
   style: TextStyle | null
@@ -2704,6 +2772,10 @@ export type GetStyleState = {
   // Track original token values (like '$8') before they get resolved to CSS vars
   // This is used to preserve token strings in overriddenContextProps
   originalContextPropValues?: Record<string, any>
+  // Transitions extracted from pseudo-style props (e.g., hoverStyle.transition)
+  pseudoTransitions?: PseudoTransitions | null
+  // Resolved animation driver (respects animatedBy prop)
+  animationDriver?: AnimationDriver | null
 }
 
 export type StyleResolver<Response = PropMappedValue> = (
@@ -3136,24 +3208,25 @@ export type UseAnimatedNumberStyle<
   V extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
 > = (val: V, getStyle: (current: any) => any) => any
 
+export type UseAnimatedNumbersStyle<
+  V extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
+> = (vals: V[], getStyle: (...currentValues: any[]) => any) => any
+
 export type UseAnimatedNumber<
   N extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
 > = (initial: number) => N
 
 export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
   isReactNative?: boolean
-  supportsCSS?: boolean
   /** What style format the driver expects as input: 'css' (CSS variables) or 'value' (resolved values) */
   inputStyle?: 'css' | 'value'
   /** How the driver outputs styles: 'css' (className-based) or 'inline' (style object) */
   outputStyle?: 'css' | 'inline'
-  needsWebStyles?: boolean
+  needsCustomComponent?: boolean
   avoidReRenders?: boolean
   onMount?: () => void
   /** When true, this is a stub driver with no real animation support */
   isStub?: boolean
-  /** When true, the driver uses CSS classes for animations (doesn't need inline styles) */
-  classNameAnimation?: boolean
   useAnimations: UseAnimationHook
   usePresence: () => UsePresenceResult
   ResetPresence: (props: {
@@ -3162,6 +3235,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
   }) => React.ReactNode
   useAnimatedNumber: UseAnimatedNumber
   useAnimatedNumberStyle: UseAnimatedNumberStyle
+  useAnimatedNumbersStyle?: UseAnimatedNumbersStyle
   useAnimatedNumberReaction: UseAnimatedNumberReaction
   animations: A
   View?: any
@@ -3170,7 +3244,10 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
 
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
-type UseStyleListener = (nextStyle: Record<string, unknown>) => void
+type UseStyleListener = (
+  nextStyle: Record<string, unknown>,
+  effectiveTransition?: TransitionProp | null
+) => void
 export type UseStyleEmitter = (cb: UseStyleListener) => void
 
 export type UseAnimationHook = (props: {
@@ -3214,6 +3291,10 @@ export type GetStyleResult = {
   mediaGroups?: Set<string>
   // Style values that override context props (for issues #3670, #3676)
   overriddenContextProps?: Record<string, any>
+  // Transitions extracted from pseudo-style props (e.g., hoverStyle.transition)
+  pseudoTransitions?: PseudoTransitions | null
+  // Effective transition to use (accounts for entering pseudo states)
+  effectiveTransition?: TransitionProp | null
 }
 
 export type ClassNamesObject = Record<string, string>

package/src/views/TamaguiProvider.tsx

@@ -5,19 +5,35 @@ import { getSetting } from '../config'
 import { ComponentContext } from '../contexts/ComponentContext'
 import { stopAccumulatingRules } from '../helpers/insertStyleRule'
 import { updateMediaListeners } from '../hooks/useMedia'
+import { resolveAnimationDriver } from '../helpers/resolveAnimationDriver'
 import type { AnimationDriver, TamaguiProviderProps } from '../types'
 import { TamaguiRoot } from './TamaguiRoot'
 import { ThemeProvider } from './ThemeProvider'
 
+// cache first theme key per config to avoid Object.keys allocation on every render
+let _cachedFirstKey: string | undefined
+let _cachedConfig: any
+
+function firstThemeKey(config: any): string | undefined {
+  if (config !== _cachedConfig) {
+    _cachedConfig = config
+    _cachedFirstKey = config?.themes ? Object.keys(config.themes)[0] : undefined
+  }
+  return _cachedFirstKey
+}
+
 export function TamaguiProvider({
   children,
   disableInjectCSS,
   config,
   className,
-  defaultTheme,
+  defaultTheme: defaultThemeProp,
   reset,
   insets,
 }: TamaguiProviderProps) {
+  // fall back to first theme when defaultTheme is null/undefined
+  // (e.g. useColorScheme() returns null on first render in RN 0.83+)
+  const defaultTheme = defaultThemeProp || firstThemeKey(config) || 'light'
   useIsomorphicLayoutEffect(() => {
     stopAccumulatingRules()
     updateMediaListeners()
@@ -29,31 +45,28 @@ export function TamaguiProvider({
   )
 
   // Get the default animation driver from config
-  // animations can be a single driver or { default: driver, ...others }
-  const defaultAnimationDriver: AnimationDriver = React.useMemo(() => {
-    const animations = config?.animations
-    if (!animations) return null
-    if ('default' in animations) {
-      return (animations as { default: any }).default
-    }
-    return animations
-  }, [config?.animations])
+  // config.animations is already normalized to the default driver in createTamagui
+  // resolveAnimationDriver handles edge cases where raw multi-driver object leaks through
+  const defaultAnimationDriver: AnimationDriver | null = React.useMemo(
+    () => resolveAnimationDriver(config?.animations),
+    [config?.animations]
+  )
 
   useEffect(() => {
     defaultAnimationDriver?.onMount?.()
   }, [])
 
   let contents = (
-    <TamaguiRoot trackMount>
-      <ComponentContext.Provider
-        animationDriver={defaultAnimationDriver}
-        insets={memoizedInsets}
-      >
-        <ThemeProvider defaultTheme={defaultTheme} reset={reset} className={className}>
+    <ComponentContext.Provider
+      animationDriver={defaultAnimationDriver}
+      insets={memoizedInsets}
+    >
+      <ThemeProvider defaultTheme={defaultTheme} reset={reset} className={className}>
+        <TamaguiRoot theme={defaultTheme} isRootRoot>
           {children}
-        </ThemeProvider>
-      </ComponentContext.Provider>
-    </TamaguiRoot>
+        </TamaguiRoot>
+      </ThemeProvider>
+    </ComponentContext.Provider>
   )
 
   if (getSetting('disableSSR')) {
@@ -80,5 +93,3 @@ export function TamaguiProvider({
     </>
   )
 }
-
-TamaguiProvider['displayName'] = 'TamaguiProvider'

package/src/views/TamaguiRoot.tsx

@@ -1,17 +1,29 @@
 import React from 'react'
 import { getConfig } from '../config'
+import { ThemeName } from '../types'
+import { Theme } from './Theme'
+
+let defaultFontClass = ''
 
 /**
  * Applies default font class and CSS variable inheritance via display:contents.
  * Used by TamaguiProvider at the root and by portals to re-establish font scope.
  * Pass trackMount to also handle the t_unmounted class for CSS animation gating.
  */
-export function TamaguiRoot(props: {
+export function TamaguiRoot({
+  children,
+  theme,
+  isRootRoot,
+  passThrough,
+  style,
+}: {
   children: React.ReactNode
-  trackMount?: boolean
+  theme: ThemeName
+  isRootRoot?: boolean
+  passThrough?: boolean
   style?: React.CSSProperties
 }) {
-  const [mounted, setMounted] = React.useState(!props.trackMount)
+  const [mounted, setMounted] = React.useState(!isRootRoot)
 
   React.useEffect(() => {
     if (!mounted) {
@@ -19,20 +31,34 @@ export function TamaguiRoot(props: {
     }
   }, [])
 
-  const config = getConfig()
-  const defaultFont = config.defaultFont
-  const fontClass = defaultFont ? `font_${defaultFont}` : ''
-  const className = [mounted ? '' : 't_unmounted', fontClass].filter(Boolean).join(' ')
-  const baseStyle = {
-    display: 'contents' as const,
-    fontFamily: defaultFont ? 'var(--f-family)' : undefined,
+  // cache the font class name
+  if (!defaultFontClass) {
+    const config = getConfig()
+    const defaultFont = config.defaultFont
+    if (defaultFont) {
+      defaultFontClass = `font_${defaultFont}`
+    }
   }
 
-  const style = props.style ? { ...baseStyle, ...props.style } : baseStyle
+  const contents = (
+    <span
+      style={style}
+      // font_body (or default font) sets all font properties via shared CSS rule
+      className={`_dsp_contents ${mounted ? '' : 't_unmounted'} ${defaultFontClass}`}
+    >
+      {children}
+    </span>
+  )
+
+  // at root, ThemeProvider already applied theme - skip re-wrapping
+  // for portals/modals, we re-thread the theme so each root gets the right className setup
+  if (isRootRoot) {
+    return contents
+  }
 
   return (
-    <span style={style} className={className || undefined}>
-      {props.children}
-    </span>
+    <Theme passThrough={passThrough} contain forceClassName name={theme}>
+      {contents}
+    </Theme>
   )
 }

package/src/views/Text.tsx

@@ -35,18 +35,13 @@ export const Text = createComponent<
 
   defaultProps:
     process.env.TAMAGUI_TARGET === 'web'
-      ? {
-          display: 'inline', // display: inline breaks css transform styles
-          boxSizing: 'border-box',
-          wordWrap: 'break-word',
-          whiteSpace: 'pre-wrap',
-          margin: 0,
-        }
+      ? undefined
       : {
           suppressHighlighting: true,
         },
 
   inlineWhenUnflattened: new Set(['fontFamily']),
+  inlineProps: new Set(['maxFontSizeMultiplier']),
 
   variants: {
     ...(process.env.TAMAGUI_TARGET === 'web' && {
@@ -56,6 +51,7 @@ export const Text = createComponent<
         ':number': (numberOfLines) =>
           numberOfLines >= 1
             ? {
+                maxWidth: '100%',
                 WebkitLineClamp: numberOfLines,
                 WebkitBoxOrient: 'vertical',
                 display: '-webkit-box',
@@ -75,5 +71,3 @@ export const Text = createComponent<
     ...stylePropsTextOnly,
   },
 })
-
-Text['displayName'] = 'Text'

package/src/views/Theme.tsx

@@ -15,6 +15,8 @@ import { ThemeDebug } from './ThemeDebug'
 type ThemeComponentPropsOnly = ThemeProps & { passThrough?: boolean; contain?: boolean }
 
 export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, ref) {
+  'use no memo'
+
   // @ts-expect-error only for internal views
   if (props.disable) {
     return props.children

package/src/views/ThemeProvider.tsx

@@ -6,6 +6,8 @@ import type { ThemeProviderProps } from '../types'
 import { Theme } from './Theme'
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
+  'use no memo'
+
   const addThemeClassName = getSetting('addThemeClassName')
 
   // ensure theme is attached to root body node as well to work with modals by default
@@ -14,7 +16,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
       if (addThemeClassName === false) return
       const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`
       const target =
-        getSetting('addThemeClassName') === 'body'
+        getSetting('addThemeClassName') === 'html'
           ? document.documentElement
           : document.body
       target.classList.add(cn)

package/src/views/View.tsx

@@ -1,6 +1,5 @@
 import { validStyles } from '@tamagui/helpers'
 
-import { viewDefaultStyles } from '../constants/constants'
 import { createComponent } from '../createComponent'
 import type {
   StackNonStyleProps,
@@ -22,6 +21,5 @@ export const View = createComponent<
   ViewStylePropsBase
 >({
   acceptsClassName: true,
-  defaultProps: viewDefaultStyles,
   validStyles,
 })