@tamagui/web 3.0.0-beta.922.1 → 3.0.0

package/dist/esm/views/ThemeUpdate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeUpdate.js","names":[],"sources":["esm/views/ThemeUpdate.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport React from \"react\";\nimport { getConfig } from \"../config\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme, getVariablesCSSRules } from \"../helpers/variables\";\nimport { Theme } from \"./Theme\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {};\nconst updateStates = /* @__PURE__ */ new WeakMap();\nfunction createThemeUpdateState(values, className) {\n\tconst cached = updateStates.get(values);\n\tif (cached) return cached;\n\tconst state = {\n\t\tkey: getInlineValuesKey(values),\n\t\tclassName,\n\t\tvalues,\n\t\tgetTheme(parentTheme, themeName, config) {\n\t\t\treturn getMergedInlineTheme(parentTheme, values, themeName, config);\n\t\t}\n\t};\n\tupdateStates.set(values, state);\n\treturn state;\n}\nconst ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {\n\t\"use no memo\";\n\tconst config = getConfig();\n\tconst values = getInlineValuesFromProps(props, config);\n\tconst css = process.env.TAMAGUI_DID_OUTPUT_CSS || !values ? null : getVariablesCSSRules(values, config);\n\tlet rulesToInsert = null;\n\tif (css && shouldInsertStyleRules(css.identifier)) {\n\t\tupdateRules(css.identifier, css.rules);\n\t\trulesToInsert = { [css.identifier]: [\n\t\t\t\"variables\",\n\t\t\t\"\",\n\t\t\tcss.identifier,\n\t\t\tvoid 0,\n\t\t\tcss.rules\n\t\t] };\n\t}\n\tuseInsertEffectCompat(() => {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [css?.identifier]);\n\tif (!values) return props.children;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tref,\n\t\t_themeUpdate: createThemeUpdateState(values, css?.identifier),\n\t\tchildren: props.children\n\t});\n});\n\nexport { ThemeUpdate, createThemeUpdateState };"],"mappings":";;;;;;;;;;AASA,MAAM,wBAAwB,QAAQ,MAAM,sBAAsB,kCAAkC,CAAC;AACrG,MAAM,+BAA+B,IAAI,QAAQ;AACjD,SAAS,uBAAuB,QAAQ,WAAW;CAClD,MAAM,SAAS,aAAa,IAAI,MAAM;CACtC,IAAI,QAAQ,OAAO;CACnB,MAAM,QAAQ;EACb,KAAK,mBAAmB,MAAM;EAC9B;EACA;EACA,SAAS,aAAa,WAAW,QAAQ;GACxC,OAAO,qBAAqB,aAAa,QAAQ,WAAW,MAAM;EACnE;CACD;CACA,aAAa,IAAI,QAAQ,KAAK;CAC9B,OAAO;AACR;AACA,MAAM,cAAc,mBAAmB,SAAS,aAAa,OAAO,KAAK;CACxE;CACA,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,yBAAyB,OAAO,MAAM;CACrD,MAAM,MAAM,QAAQ,IAAI,0BAA0B,CAAC,SAAS,OAAO,qBAAqB,QAAQ,MAAM;CACtG,IAAI,gBAAgB;CACpB,IAAI,OAAO,uBAAuB,IAAI,UAAU,GAAG;EAClD,YAAY,IAAI,YAAY,IAAI,KAAK;EACrC,gBAAgB,GAAG,IAAI,aAAa;GACnC;GACA;GACA,IAAI;GACJ,KAAK;GACL,IAAI;EACL,EAAE;CACH;CACA,4BAA4B;EAC3B,IAAI,eAAe,iBAAiB,aAAa;CAClD,GAAG,CAAC,KAAK,UAAU,CAAC;CACpB,IAAI,CAAC,QAAQ,OAAO,MAAM;CAC1B,OAAuB,oBAAI,OAAO;EACjC;EACA,cAAc,uBAAuB,QAAQ,KAAK,UAAU;EAC5D,UAAU,MAAM;CACjB,CAAC;AACF,CAAC"}
+{"version":3,"file":"ThemeUpdate.js","names":[],"sources":["esm/views/ThemeUpdate.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport React from \"react\";\nimport { getConfig } from \"../config\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme, getVariablesCSSRules } from \"../helpers/variables\";\nimport { Theme } from \"./Theme\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {};\nconst updateStates = /* @__PURE__ */ new WeakMap();\nfunction createThemeUpdateState(values, className) {\n\tconst cached = updateStates.get(values);\n\tif (cached) return cached;\n\tconst state = {\n\t\tkey: getInlineValuesKey(values),\n\t\tclassName,\n\t\tvalues,\n\t\tgetTheme(parentTheme, themeName, config) {\n\t\t\treturn getMergedInlineTheme(parentTheme, values, themeName, config);\n\t\t}\n\t};\n\tupdateStates.set(values, state);\n\treturn state;\n}\nconst ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {\n\t\"use no memo\";\n\tconst config = getConfig();\n\tconst values = getInlineValuesFromProps(props, config);\n\tconst css = process.env.TAMAGUI_RUNTIME === \"island\" || !values ? null : getVariablesCSSRules(values, config);\n\tlet rulesToInsert = null;\n\tif (css && shouldInsertStyleRules(css.identifier)) {\n\t\tupdateRules(css.identifier, css.rules);\n\t\trulesToInsert = { [css.identifier]: [\n\t\t\t\"variables\",\n\t\t\t\"\",\n\t\t\tcss.identifier,\n\t\t\tvoid 0,\n\t\t\tcss.rules\n\t\t] };\n\t}\n\tuseInsertEffectCompat(() => {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [css?.identifier]);\n\tif (!values) return props.children;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tref,\n\t\t_themeUpdate: createThemeUpdateState(values, css?.identifier),\n\t\tchildren: props.children\n\t});\n});\n\nexport { ThemeUpdate, createThemeUpdateState };"],"mappings":";;;;;;;;;;AASA,MAAM,wBAAwB,QAAQ,MAAM,sBAAsB,kCAAkC,CAAC;AACrG,MAAM,+BAA+B,IAAI,QAAQ;AACjD,SAAS,uBAAuB,QAAQ,WAAW;CAClD,MAAM,SAAS,aAAa,IAAI,MAAM;CACtC,IAAI,QAAQ,OAAO;CACnB,MAAM,QAAQ;EACb,KAAK,mBAAmB,MAAM;EAC9B;EACA;EACA,SAAS,aAAa,WAAW,QAAQ;GACxC,OAAO,qBAAqB,aAAa,QAAQ,WAAW,MAAM;EACnE;CACD;CACA,aAAa,IAAI,QAAQ,KAAK;CAC9B,OAAO;AACR;AACA,MAAM,cAAc,mBAAmB,SAAS,aAAa,OAAO,KAAK;CACxE;CACA,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,yBAAyB,OAAO,MAAM;CACrD,MAAM,MAAM,QAAQ,IAAI,oBAAoB,YAAY,CAAC,SAAS,OAAO,qBAAqB,QAAQ,MAAM;CAC5G,IAAI,gBAAgB;CACpB,IAAI,OAAO,uBAAuB,IAAI,UAAU,GAAG;EAClD,YAAY,IAAI,YAAY,IAAI,KAAK;EACrC,gBAAgB,GAAG,IAAI,aAAa;GACnC;GACA;GACA,IAAI;GACJ,KAAK;GACL,IAAI;EACL,EAAE;CACH;CACA,4BAA4B;EAC3B,IAAI,eAAe,iBAAiB,aAAa;CAClD,GAAG,CAAC,KAAK,UAAU,CAAC;CACpB,IAAI,CAAC,QAAQ,OAAO,MAAM;CAC1B,OAAuB,oBAAI,OAAO;EACjC;EACA,cAAc,uBAAuB,QAAQ,KAAK,UAAU;EAC5D,UAAU,MAAM;CACjB,CAAC;AACF,CAAC"}

package/dist/esm/views/ThemeUpdate.native.js

@@ -26,7 +26,7 @@ function createThemeUpdateState(values, className) {
 var ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {
 	"use no memo";
 	var values = getInlineValuesFromProps(props, getConfig());
-	var css = (process.env.TAMAGUI_DID_OUTPUT_CSS, null);
+	var css = (process.env.TAMAGUI_RUNTIME, null);
 	var rulesToInsert = null;
 	if (css && shouldInsertStyleRules(css.identifier)) {
 		updateRules(css.identifier, css.rules);

package/dist/esm/views/ThemeUpdate.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeUpdate.native.js","names":[],"sources":["esm/views/ThemeUpdate.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport React from \"react\";\nimport { getConfig } from \"../config\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme } from \"../helpers/variables\";\nimport { Theme } from \"./Theme\";\n\nvar useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : function() {};\nvar updateStates = /* @__PURE__ */ new WeakMap();\nfunction createThemeUpdateState(values, className) {\n\tvar cached = updateStates.get(values);\n\tif (cached) return cached;\n\tvar state = {\n\t\tkey: getInlineValuesKey(values),\n\t\tclassName,\n\t\tvalues,\n\t\tgetTheme(parentTheme, themeName, config) {\n\t\t\treturn getMergedInlineTheme(parentTheme, values, themeName, config);\n\t\t}\n\t};\n\tupdateStates.set(values, state);\n\treturn state;\n}\nvar ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {\n\t\"use no memo\";\n\tvar values = getInlineValuesFromProps(props, getConfig());\n\tvar css = (process.env.TAMAGUI_DID_OUTPUT_CSS, null);\n\tvar rulesToInsert = null;\n\tif (css && shouldInsertStyleRules(css.identifier)) {\n\t\tupdateRules(css.identifier, css.rules);\n\t\trulesToInsert = { [css.identifier]: [\n\t\t\t\"variables\",\n\t\t\t\"\",\n\t\t\tcss.identifier,\n\t\t\tvoid 0,\n\t\t\tcss.rules\n\t\t] };\n\t}\n\tuseInsertEffectCompat(function() {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [css === null || css === void 0 ? void 0 : css.identifier]);\n\tif (!values) return props.children;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tref,\n\t\t_themeUpdate: createThemeUpdateState(values, css === null || css === void 0 ? void 0 : css.identifier),\n\t\tchildren: props.children\n\t});\n});\n\nexport { ThemeUpdate, createThemeUpdateState };"],"mappings":";;;;;;;;;;AASA,IAAI,wBAAwB,QAAQ,MAAM,sBAAsB,4BAA4B,WAAW,CAAC;AACxG,IAAI,+BAA+B,IAAI,QAAQ;AAC/C,SAAS,uBAAuB,QAAQ,WAAW;CAClD,IAAI,SAAS,aAAa,IAAI,MAAM;CACpC,IAAI,QAAQ,OAAO;CACnB,IAAI,QAAQ;EACX,KAAK,mBAAmB,MAAM;EAC9B;EACA;EACA,SAAS,aAAa,WAAW,QAAQ;GACxC,OAAO,qBAAqB,aAAa,QAAQ,WAAW,MAAM;EACnE;CACD;CACA,aAAa,IAAI,QAAQ,KAAK;CAC9B,OAAO;AACR;AACA,IAAI,cAAc,mBAAmB,SAAS,aAAa,OAAO,KAAK;CACtE;CACA,IAAI,SAAS,yBAAyB,OAAO,UAAU,CAAC;CACxD,IAAI,OAAO,QAAQ,IAAI,wBAAwB;CAC/C,IAAI,gBAAgB;CACpB,IAAI,OAAO,uBAAuB,IAAI,UAAU,GAAG;EAClD,YAAY,IAAI,YAAY,IAAI,KAAK;EACrC,gBAAgB,GAAG,IAAI,aAAa;GACnC;GACA;GACA,IAAI;GACJ,KAAK;GACL,IAAI;EACL,EAAE;CACH;CACA,sBAAsB,WAAW;EAChC,IAAI,eAAe,iBAAiB,aAAa;CAClD,GAAG,CAAC,QAAQ,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC;CAC7D,IAAI,CAAC,QAAQ,OAAO,MAAM;CAC1B,OAAuB,oBAAI,OAAO;EACjC;EACA,cAAc,uBAAuB,QAAQ,QAAQ,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,UAAU;EACrG,UAAU,MAAM;CACjB,CAAC;AACF,CAAC"}
+{"version":3,"file":"ThemeUpdate.native.js","names":[],"sources":["esm/views/ThemeUpdate.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport React from \"react\";\nimport { getConfig } from \"../config\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme } from \"../helpers/variables\";\nimport { Theme } from \"./Theme\";\n\nvar useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : function() {};\nvar updateStates = /* @__PURE__ */ new WeakMap();\nfunction createThemeUpdateState(values, className) {\n\tvar cached = updateStates.get(values);\n\tif (cached) return cached;\n\tvar state = {\n\t\tkey: getInlineValuesKey(values),\n\t\tclassName,\n\t\tvalues,\n\t\tgetTheme(parentTheme, themeName, config) {\n\t\t\treturn getMergedInlineTheme(parentTheme, values, themeName, config);\n\t\t}\n\t};\n\tupdateStates.set(values, state);\n\treturn state;\n}\nvar ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {\n\t\"use no memo\";\n\tvar values = getInlineValuesFromProps(props, getConfig());\n\tvar css = (process.env.TAMAGUI_RUNTIME, null);\n\tvar rulesToInsert = null;\n\tif (css && shouldInsertStyleRules(css.identifier)) {\n\t\tupdateRules(css.identifier, css.rules);\n\t\trulesToInsert = { [css.identifier]: [\n\t\t\t\"variables\",\n\t\t\t\"\",\n\t\t\tcss.identifier,\n\t\t\tvoid 0,\n\t\t\tcss.rules\n\t\t] };\n\t}\n\tuseInsertEffectCompat(function() {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [css === null || css === void 0 ? void 0 : css.identifier]);\n\tif (!values) return props.children;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tref,\n\t\t_themeUpdate: createThemeUpdateState(values, css === null || css === void 0 ? void 0 : css.identifier),\n\t\tchildren: props.children\n\t});\n});\n\nexport { ThemeUpdate, createThemeUpdateState };"],"mappings":";;;;;;;;;;AASA,IAAI,wBAAwB,QAAQ,MAAM,sBAAsB,4BAA4B,WAAW,CAAC;AACxG,IAAI,+BAA+B,IAAI,QAAQ;AAC/C,SAAS,uBAAuB,QAAQ,WAAW;CAClD,IAAI,SAAS,aAAa,IAAI,MAAM;CACpC,IAAI,QAAQ,OAAO;CACnB,IAAI,QAAQ;EACX,KAAK,mBAAmB,MAAM;EAC9B;EACA;EACA,SAAS,aAAa,WAAW,QAAQ;GACxC,OAAO,qBAAqB,aAAa,QAAQ,WAAW,MAAM;EACnE;CACD;CACA,aAAa,IAAI,QAAQ,KAAK;CAC9B,OAAO;AACR;AACA,IAAI,cAAc,mBAAmB,SAAS,aAAa,OAAO,KAAK;CACtE;CACA,IAAI,SAAS,yBAAyB,OAAO,UAAU,CAAC;CACxD,IAAI,OAAO,QAAQ,IAAI,iBAAiB;CACxC,IAAI,gBAAgB;CACpB,IAAI,OAAO,uBAAuB,IAAI,UAAU,GAAG;EAClD,YAAY,IAAI,YAAY,IAAI,KAAK;EACrC,gBAAgB,GAAG,IAAI,aAAa;GACnC;GACA;GACA,IAAI;GACJ,KAAK;GACL,IAAI;EACL,EAAE;CACH;CACA,sBAAsB,WAAW;EAChC,IAAI,eAAe,iBAAiB,aAAa;CAClD,GAAG,CAAC,QAAQ,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC;CAC7D,IAAI,CAAC,QAAQ,OAAO,MAAM;CAC1B,OAAuB,oBAAI,OAAO;EACjC;EACA,cAAc,uBAAuB,QAAQ,QAAQ,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,UAAU;EACrG,UAAU,MAAM;CACjB,CAAC;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "3.0.0-beta.922.1",
+  "version": "3.0.0",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -100,32 +100,34 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.922.1",
-    "@tamagui/constants": "3.0.0-beta.922.1",
-    "@tamagui/dom": "3.0.0-beta.922.1",
-    "@tamagui/helpers": "3.0.0-beta.922.1",
-    "@tamagui/is-equal-shallow": "3.0.0-beta.922.1",
-    "@tamagui/native": "3.0.0-beta.922.1",
-    "@tamagui/normalize-css-color": "3.0.0-beta.922.1",
-    "@tamagui/style-grammar": "3.0.0-beta.922.1",
-    "@tamagui/timer": "3.0.0-beta.922.1",
-    "@tamagui/types": "3.0.0-beta.922.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.922.1",
-    "@tamagui/use-event": "3.0.0-beta.922.1",
-    "@tamagui/use-force-update": "3.0.0-beta.922.1"
+    "@tamagui/animation-helpers": "3.0.0",
+    "@tamagui/compose-refs": "3.0.0",
+    "@tamagui/constants": "3.0.0",
+    "@tamagui/dom": "3.0.0",
+    "@tamagui/helpers": "3.0.0",
+    "@tamagui/is-equal-shallow": "3.0.0",
+    "@tamagui/native": "3.0.0",
+    "@tamagui/normalize-css-color": "3.0.0",
+    "@tamagui/react-native-types": "3.0.0",
+    "@tamagui/style-grammar": "3.0.0",
+    "@tamagui/types": "3.0.0",
+    "@tamagui/use-did-finish-ssr": "3.0.0",
+    "@tamagui/use-event": "3.0.0",
+    "@tamagui/use-force-update": "3.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.922.1",
+    "@tamagui/build": "3.0.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.86.2",
-    "typescript": "~6.0.3",
+    "react-native": "0.87.1",
+    "typescript": "7.0.2",
     "vitest": "4.1.0"
   },
   "peerDependencies": {
     "react": ">=19",
     "react-dom": "*"
-  }
+  },
+  "releaseSourceCommit": "15fbca480b143f876f6975601e23a17d3f90d2ee"
 }

package/reset.css

@@ -45,6 +45,17 @@ button,
   box-sizing: border-box;
 }
 
+/* `all: unset` above also unsets display, and this rule and the design
+   system's `:where(.is_View)` base are both zero specificity, so whichever
+   sheet loads last wins. Restate the base display so a tamagui-rendered
+   <button> or <p> keeps its layout however the sheets are ordered. */
+:where(.is_View) {
+  display: flex;
+}
+:where(.is_Text) {
+  display: inline;
+}
+
 a.tm-button,
 .tm-anchor:has(.tm-button) {
   text-decoration: none;

package/src/_withNativeStyle.tsx

@@ -1,5 +1,5 @@
 import { setRef } from '@tamagui/compose-refs'
-import React, { useCallback, useContext, useRef } from 'react'
+import React, { useCallback, useContext, useRef, useState } from 'react'
 import { _withStableStyle } from './_withStableStyle'
 import {
   getNativeStyleEngine,
@@ -38,6 +38,9 @@ export const _withNativeStyle = (
   }) {
     const { ref, _expressions: _ignoredExpressions, ...rest } = props
     const link = useRef<NativeStyleEngineLinkHandle | null>(null)
+    // a host the engine refuses (a nitro view) never gets theme pushes, so
+    // this view renders through the theme-subscribed fallback instead
+    const [refused, setRefused] = useState(false)
     const themeState = getThemeState(_scopeId)
     const stateName = themeState?.name
     const theme = themeState?.theme
@@ -55,10 +58,12 @@ export const _withNativeStyle = (
             stateName,
             theme
           )
+          if (!link.current) setRefused(true)
         }
       },
       [ref, _scopeId, stateName, theme]
     )
+    if (refused) return <Fallback {...props} />
     const stateStyle =
       stateName && theme
         ? resolveNativeStyleMapping(themeStyleKeys, stateName, theme)

package/src/config.ts

@@ -37,6 +37,7 @@ const getConfigFromGlobalOrLocal = (): TamaguiInternalConfig | null => {
     // if it never runs, it's a true duplicate (warn)
     if (
       process.env.NODE_ENV === 'development' &&
+      globalThis.__tamaguiEvaluationConfig !== globalThis.__tamaguiConfig &&
       !globalThis.__tamaguiHasWarnedGlobalFallback &&
       !globalThis.__tamaguiPendingCheck
     ) {
@@ -71,16 +72,12 @@ export const getSetting = <Key extends keyof GenericTamaguiSettings>(
   if (process.env.NODE_ENV === 'development') {
     if (!config) throw new Error(haventCalledErrorMessage)
   }
-  return (
-    config!.settings[key] ??
-    // @ts-expect-error
-    config[key]
-  )
+  return config!.settings[key]
 }
 
 export function getStyleCompat(): StyleCompat {
   const config = getConfigFromGlobalOrLocal()
-  return (config?.settings.styleCompat ?? (config as any)?.styleCompat) || 'web'
+  return config?.settings?.styleCompat || 'web'
 }
 
 export const setConfig = (next: TamaguiInternalConfig) => {
@@ -91,6 +88,9 @@ export const setConfig = (next: TamaguiInternalConfig) => {
   if (conf !== previous || globalThis.__tamaguiConfig !== previousGlobal) return
   conf = next
   globalThis.__tamaguiConfig = next
+  if (process.env.TAMAGUI_ENVIRONMENT === 'tamagui') {
+    globalThis.__tamaguiEvaluationConfig = next
+  }
 }
 
 export const setConfigFont = (name: string, font: any, fontParsed: any) => {

package/src/contexts/ComponentContext.tsx

@@ -5,6 +5,9 @@ import type { ComponentContextI } from '../types'
 const componentContextKeys = [
   'disableSSR',
   'inText',
+  ...(process.env.TAMAGUI_TARGET === 'native'
+    ? (['parentFontSize', 'parentLineHeight', 'animatedText'] as const)
+    : []),
   'language',
   'animationDriver',
   'setParentFocusState',
@@ -18,6 +21,11 @@ export const ComponentContext = createStyledContext<
   {
     disableSSR: undefined,
     inText: false,
+    ...(process.env.TAMAGUI_TARGET === 'native' && {
+      parentFontSize: undefined,
+      parentLineHeight: undefined,
+      animatedText: null,
+    }),
     language: null,
     animationDriver: null,
     setParentFocusState: null,

package/src/createComponent.tsx

@@ -1,4 +1,4 @@
-import { composeRefs } from '@tamagui/compose-refs'
+import { composeRefs, setRef } from '@tamagui/compose-refs'
 import {
   getPlatformDriver,
   isAndroid,
@@ -21,6 +21,8 @@ import { defaultComponentStateMounted } from './defaultComponentState'
 import { getWebEvents, useEvents, wrapWithGestureDetector } from './eventHandling'
 import { componentDisplayName } from './helpers/componentDisplayName'
 import { getSplitStyles } from './helpers/getSplitStyles'
+import { isTamaguiElement } from './helpers/isTamaguiElement'
+import { NativeTextBinding } from './helpers/NativeTextBinding'
 import { getConfigRevisionState } from './helpers/grammarConfig'
 import { getStyleStaticConfig, type StyleStaticConfig } from './helpers/styleStaticConfig'
 import {
@@ -91,7 +93,6 @@ const avoidReRenderKeys = new Set([
   'focus',
   'focusWithin',
   'media',
-  'group',
 ])
 
 const groupPseudoKeys = [
@@ -309,10 +310,15 @@ export function createComponent<
       resolvedStyleStaticConfig = nextStyleStaticConfig
       resolvedDefaultProps = nextStyleStaticConfig.defaultProps
       // the relative-position default is a style, so it joins the base layer
-      // under everything the call site writes
+      // under everything the call site writes. a styled HOC skips it: the
+      // frame its render mounts owns the host element and its own default,
+      // and a wrapper's base reaches that frame as call-site className, where
+      // it would beat the frame's authored position (an absolute background
+      // collapsing to relative)
       if (
         isWeb &&
         !staticConfig.isText &&
+        !staticConfig.isStyledHOC &&
         config.settings.defaultPosition === 'relative' &&
         nextStyleStaticConfig.baseStyle?.position === undefined
       ) {
@@ -385,16 +391,6 @@ export function createComponent<
           React.useContext(NativeMenuContext)
         : false
 
-    if (
-      !process.env.TAMAGUI_IS_CORE_NODE &&
-      process.env.NODE_ENV === 'development' &&
-      debugProp === 'profile' &&
-      !time
-    ) {
-      const timer = require('@tamagui/timer').timer()
-      time = timer.start()
-      globalThis['time'] = time
-    }
     // pick up globalThis.time if set externally (e.g. by a profiling harness)
     if (process.env.NODE_ENV === 'development' && !time && (globalThis as any).time) {
       time = (globalThis as any).time
@@ -635,11 +631,27 @@ export function createComponent<
       elementType = animationDriver[isText ? 'Text' : 'View'] || elementType
     }
 
-    // internal use only
+    // internal use only. it says "a theme is already mounted above you, don't
+    // read one again", which a styled HOC sets on everything its render
+    // forwards props to. a `theme` key still wins: the HOC strips the caller's
+    // theme before rendering, so one arriving here was set by the component
+    // itself (Checkbox's activeTheme, Tabs' selected tab) and is the whole
+    // reason that element exists. it is the presence of the key, never its
+    // value, because the disabled path skips hooks and a component that swaps
+    // `theme` between null and a name across renders must not change hook order
     const disableThemeProp =
-      process.env.TAMAGUI_TARGET === 'native' ? false : props['data-disable-theme']
-
-    const disableTheme = disableThemeProp || isHOC
+      process.env.TAMAGUI_TARGET === 'native'
+        ? false
+        : props['data-disable-theme'] && !('theme' in props)
+
+    // a styled HOC leaves theming to the component it wraps and hands it the
+    // theme prop. on native the HOC's own styles resolve to values here, before
+    // that, so an HOC given a theme themes itself and the wrapped component
+    // inherits it instead of applying it a second time. keyed on presence, like
+    // disableThemeProp, so hook order never changes across renders
+    const hocThemesSelf =
+      process.env.TAMAGUI_TARGET === 'native' && isHOC && 'theme' in props
+    const disableTheme = disableThemeProp || (isHOC && !hocThemesSelf)
 
     if (process.env.NODE_ENV === 'development' && time) time`theme-props`
 
@@ -746,7 +758,7 @@ export function createComponent<
 
     // stateRef.current is this instance's key into useMedia's per-component
     // States map (setMediaShouldUpdate below writes under the same key)
-    const mediaState = useMedia(componentContext, debugProp, stateRef.current)
+    const mediaState = useMedia(stateRef.current, debugProp, stateRef.current)
 
     setDidGetVariableValue(false)
 
@@ -769,6 +781,7 @@ export function createComponent<
       canPlatformPseudo: componentState.platformPseudo,
       displayName,
       styledContext: styledContextValue,
+      prevStyle: isWeb ? undefined : stateRef.current.prevStyle,
     } as const
 
     const themeName = themeState?.name || ''
@@ -1151,7 +1164,10 @@ export function createComponent<
         useStyleListener(
           (nextStyles?.style || {}) as any,
           effectiveTransition,
-          hasActivePseudo
+          hasActivePseudo,
+          process.env.TAMAGUI_TARGET === 'native'
+            ? nextStyles?.nativeTextMetrics
+            : undefined
         )
       }
 
@@ -1173,31 +1189,22 @@ export function createComponent<
         }
       }
 
-      // don't change this ever or else you break ComponentContext and cause re-rendering
-      // use a Set of listeners so multiple components can register
-      componentContext.mediaEmitListeners =
-        componentContext.mediaEmitListeners || new Set()
-
-      // only register once per component instance
-      if (!stateRef.current.mediaEmitCleanup) {
-        const updateListener = (next: Record<string, boolean>) => {
-          stateRef.current.nextMedia = next
-          stateRef.current.updateStyleListener?.()
-        }
-        componentContext.mediaEmitListeners.add(updateListener)
-        stateRef.current.mediaEmitCleanup = () => {
-          componentContext.mediaEmitListeners?.delete(updateListener)
-        }
-      }
-
-      componentContext.mediaEmit =
-        componentContext.mediaEmit ||
-        ((next) => {
-          // notify all registered components
-          for (const listener of componentContext.mediaEmitListeners!) {
-            listener(next)
-          }
+      // a media change restyles only this instance: its useMedia emits through
+      // this state ref. a context-wide emitter made every component in the
+      // provider restyle on every other component's media change (quadratic).
+      // one dimension change fires one update per changed media key, so like
+      // nativeMediaUpdate this coalesces to a single restyle per event turn,
+      // against the media state every key has settled to by then
+      stateRef.current.mediaEmit ||= (next) => {
+        const sr = stateRef.current
+        sr.nextMedia = next
+        if (sr.mediaEmitQueued) return
+        sr.mediaEmitQueued = true
+        queueMicrotask(() => {
+          sr.mediaEmitQueued = false
+          sr.updateStyleListener?.()
         })
+      }
 
       stateRef.current.setStateShallow = (nextOrGetNext) => {
         const prev = stateRef.current.nextState || state
@@ -1302,13 +1309,18 @@ export function createComponent<
     } = splitStyles || {}
     const groupSetRevision = useGroupSetRevision(pseudoGroups, mediaGroups)
 
+    // native style stability: persist the resolved style for next render's
+    // inline comparison (see getSplitStyles prevStyle tracking)
+    if (!isWeb) {
+      stateRef.current.prevStyle = splitStylesStyle || null
+    }
+
     const propsWithAnimation = props as UseAnimationProps
 
     const {
       asChild,
       children,
       themeShallow,
-      spaceDirection: _spaceDirection,
       onPress,
       onLongPress,
       onPressIn,
@@ -1340,7 +1352,7 @@ export function createComponent<
     }
 
     if (isHOC) {
-      if (typeof _themeProp !== 'undefined') {
+      if (typeof _themeProp !== 'undefined' && !hocThemesSelf) {
         viewProps.theme = _themeProp
       }
       if (typeof passThrough !== 'undefined') {
@@ -1368,6 +1380,14 @@ export function createComponent<
     // once you set animation prop don't remove it, you can set to undefined/false
     // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
     let animationStyles: any
+    let animatedText =
+      process.env.TAMAGUI_TARGET === 'native'
+        ? isText &&
+          splitStyles?.nativeTextMetrics &&
+          !splitStyles.nativeTextMetrics.inheritsFontSize
+          ? null
+          : componentContext.animatedText
+        : null
     const shouldUseAnimation =
       // if it supports css vars we run it on server too to get matching initial style
       (inputStyle === 'css' ? willBeAnimatedClient : willBeAnimated) &&
@@ -1398,6 +1418,11 @@ export function createComponent<
       stateRef.current.prevPseudoState = extractPseudoState(state)
 
       const animations = useAnimations({
+        ...(process.env.TAMAGUI_TARGET === 'native' && {
+          inheritedText: splitStyles?.nativeTextMetrics?.inheritsFontSize
+            ? componentContext.animatedText
+            : null,
+        }),
         props: propsWithAnimation,
         // clone style to prevent animation driver mutations from leaking to viewProps
         // during SSR/pre-hydration (CSS driver mutates style.transition in place)
@@ -1415,6 +1440,7 @@ export function createComponent<
       })
 
       if (animations) {
+        if (process.env.TAMAGUI_TARGET === 'native') animatedText = animations.textChannel
         if (animations.ref) {
           // @ts-ignore
           animatedRef = animations.ref
@@ -1476,6 +1502,13 @@ export function createComponent<
         stateRef.current.willHydrate
       ) || nonTamaguiProps
 
+    // the composed ref keeps one identity for the life of the component so react
+    // never detaches and reattaches the host mid-life. that means it can't close
+    // over forwardedRef, which would pin the first render's ref forever - read it
+    // off stateRef instead, and record what it actually attached to so a swapped
+    // ref can be handed the host below (#4031)
+    stateRef.current.composedForwardedRef = forwardedRef
+
     if (!stateRef.current.composedRef) {
       stateRef.current.composedRef = composeRefs<TamaguiElement>(
         (x) => {
@@ -1483,8 +1516,10 @@ export function createComponent<
           if (process.env.TAMAGUI_TARGET === 'native') {
             updateNativeStyleLink(stateRef.current, x)
           }
+          const current = stateRef.current.composedForwardedRef
+          stateRef.current.attachedForwardedRef = x ? current : undefined
+          setRef<TamaguiElement>(current, x as TamaguiElement)
         },
-        forwardedRef,
         setElementProps,
         animatedRef
       )
@@ -1503,6 +1538,22 @@ export function createComponent<
       viewProps.onClick = onClick
     }
 
+    // react only re-runs a ref callback when its identity changes, and ours never
+    // does, so hand the host over by hand when a parent swaps the forwarded ref -
+    // react-hook-form re-registering a field after reset() is the common case.
+    // the comparison reads what the ref callback attached, never a value written
+    // during render: a render-phase "previous" pointer reads back its own write
+    // on react's second pass and the handover silently no-ops under StrictMode
+    useIsomorphicLayoutEffect(() => {
+      const attached = stateRef.current.attachedForwardedRef
+      if (attached === forwardedRef) return
+      if (attached) setRef<TamaguiElement | null>(attached, null)
+      stateRef.current.attachedForwardedRef = forwardedRef
+      if (stateRef.current.host) {
+        setRef<TamaguiElement>(forwardedRef, stateRef.current.host)
+      }
+    }, [forwardedRef])
+
     // handle pointer events (native: maps to touch events, web: no-op)
     usePointerEvents(props, viewProps)
 
@@ -1588,16 +1639,10 @@ export function createComponent<
 
     // unmount-only cleanup. this must NOT live on the enter effect above: that
     // effect re-runs on every unmounted transition (true -> 'should-enter' ->
-    // false), and a cleanup returned there ran mid-lifecycle — dropping the
-    // mediaEmit listener right after mount for value-input avoidReRenders
-    // drivers, with no re-registration (render only registers while
-    // mediaEmitCleanup is unset), so media styles silently stopped applying
+    // false), and a cleanup there would run mid-lifecycle
     useIsomorphicLayoutEffect(() => {
       return () => {
         componentSetStates.delete(setState)
-        stateRef.current.mediaEmitCleanup?.()
-        // clear so a render after a simulated unmount (StrictMode dev) can re-register
-        stateRef.current.mediaEmitCleanup = undefined
       }
     }, [])
 
@@ -1833,6 +1878,23 @@ export function createComponent<
         }
       : null
 
+    // press plumbing detached mid-press (a conditional pressStyle/onPress removed
+    // by the same tap's re-render racing the touch-up, e.g. a selection flip):
+    // the release then lands on detached handlers and press latches true,
+    // sticking the press wash with no recovery on native. with no handlers
+    // attached no future event can clear it, so any active press is
+    // definitionally stale — drop it. group subscribers keep theirs: their press
+    // may be parent-driven, and the group channel still delivers its release.
+    useIsomorphicLayoutEffect(() => {
+      const hadPressPlumbing = stateRef.current.hadAttachPress
+      stateRef.current.hadAttachPress = attachPress
+      if (hadPressPlumbing && !attachPress && !pseudoGroups?.size) {
+        const clearPress =
+          stateRef.current.setStateShallow ?? stateRef.current.baseSetStateShallow
+        clearPress?.({ press: false, pressIn: false })
+      }
+    }, [attachPress, pseudoGroups])
+
     if (process.env.TAMAGUI_TARGET === 'native' && events && !asChild) {
       // replicating TouchableWithoutFeedback
       Object.assign(events, {
@@ -1907,6 +1969,8 @@ export function createComponent<
             onMouseDown,
             onMouseEnter,
             onMouseLeave,
+            onFocus,
+            onBlur,
           },
           webStyleEvents
         )
@@ -1983,6 +2047,26 @@ export function createComponent<
         }
 
         content = React.createElement(elementType, viewProps, content || children)
+        if (
+          process.env.TAMAGUI_TARGET === 'native' &&
+          !shouldUseAnimation &&
+          !isHOC &&
+          !staticConfig.isDOM &&
+          !asChild &&
+          splitStyles?.nativeTextMetrics?.inheritsFontSize &&
+          componentContext.animatedText &&
+          animationDriver?.useTextMetrics
+        ) {
+          content = (
+            <NativeTextBinding
+              element={content as ReactElement<any>}
+              useTextMetrics={animationDriver.useTextMetrics}
+              inheritedText={componentContext.animatedText}
+              lineHeight={splitStyles.nativeTextMetrics.lineHeight}
+              isInput={staticConfig.isInput}
+            />
+          )
+        }
       }
 
       if (process.env.NODE_ENV === 'development' && time) time`use-children`
@@ -1998,7 +2082,7 @@ export function createComponent<
         stateRef,
         isHOC,
         isCompositeComponent,
-        hasRealPressEvents
+        hasRealPressEvents && !isInsideNativeMenu
       )
     }
 
@@ -2030,7 +2114,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`create-element`
 
-    if (conditionalStates?.has('focus-within')) {
+    if (process.env.TAMAGUI_TARGET === 'web' && conditionalStates?.has('focus-within')) {
       content = (
         <ComponentContext.Provider
           {...componentContext}
@@ -2050,7 +2134,43 @@ export function createComponent<
       )
     }
 
-    // Text components set inText context for children so nested Text can inherit styles
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      const textMetrics =
+        !staticConfig.isDOM &&
+        !isHOC &&
+        isText &&
+        !(asChild && isTamaguiElement(children))
+          ? splitStyles?.nativeTextMetrics
+          : undefined
+      const provideText =
+        !!textMetrics &&
+        children !== null &&
+        typeof children === 'object' &&
+        (!componentContext.inText ||
+          textMetrics.fontSize !== componentContext.parentFontSize ||
+          textMetrics.lineHeight !== componentContext.parentLineHeight ||
+          animatedText !== componentContext.animatedText)
+      const provideFocus = conditionalStates?.has('focus-within')
+      if (provideText || provideFocus) {
+        content = (
+          <ComponentContext.Provider
+            {...componentContext}
+            inText={provideText || componentContext.inText}
+            parentFontSize={textMetrics?.fontSize ?? componentContext.parentFontSize}
+            parentLineHeight={
+              textMetrics ? textMetrics.lineHeight : componentContext.parentLineHeight
+            }
+            animatedText={animatedText}
+            setParentFocusState={
+              provideFocus ? setStateShallow : componentContext.setParentFocusState
+            }
+          >
+            {content}
+          </ComponentContext.Provider>
+        )
+      }
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web' && !asChild && isText && !hasTextAncestor) {
       content = (
         <ComponentContext.Provider {...componentContext} inText={true}>
@@ -2090,7 +2210,7 @@ export function createComponent<
     // SSR style support - for non compiled styles we render them inline until client takes over
     // on client we then switch over to our global sheet insert, because rendering inline is expensive
     if (
-      !process.env.TAMAGUI_DID_OUTPUT_CSS &&
+      process.env.TAMAGUI_RUNTIME !== 'island' &&
       process.env.TAMAGUI_TARGET === 'web' &&
       startedUnhydrated &&
       splitStyles