@tamagui/web 1.84.1 → 1.85.0

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/views/ThemeDebug.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeDebug.tsx"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAO,gBAAgB;AAC3C,SAAS,oBAAoB;AA6DvB,mBA+BE,KA7BE,YAFJ;AAxDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,aAAa,gBAAgB,GAC7B,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,GAC9C,WAAW,eAAe,GAC1B,KAAK,MAAM;AAoCjB,WAlCI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,UAAU,MAAM;AACd,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,UAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEA,WAAW,cAAiB;",
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAO,gBAAgB;AAC3C,SAAS,oBAAoB;AA6DvB,mBA+BE,KA7BE,YAFJ;AAxDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,aAAa,gBAAgB,GAC7B,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,GAC9C,WAAW,eAAe,GAC1B,KAAK,MAAM;AAoCjB,WAlCI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,UAAU,MAAM;AACd,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,UAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEA,WAAW,cAAiB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.84.1",
+  "version": "1.85.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,23 +27,25 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.84.1",
-    "@tamagui/constants": "1.84.1",
-    "@tamagui/helpers": "1.84.1",
-    "@tamagui/normalize-css-color": "1.84.1",
-    "@tamagui/timer": "1.84.1",
-    "@tamagui/use-did-finish-ssr": "1.84.1",
-    "@tamagui/use-event": "1.84.1",
-    "@tamagui/use-force-update": "1.84.1"
+    "@tamagui/compose-refs": "1.85.0",
+    "@tamagui/constants": "1.85.0",
+    "@tamagui/helpers": "1.85.0",
+    "@tamagui/normalize-css-color": "1.85.0",
+    "@tamagui/timer": "1.85.0",
+    "@tamagui/use-did-finish-ssr": "1.85.0",
+    "@tamagui/use-event": "1.85.0",
+    "@tamagui/use-force-update": "1.85.0"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.84.1",
+    "@tamagui/build": "1.85.0",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
     "vitest": "^0.34.3"
   },

package/src/createComponent.tsx

@@ -145,7 +145,7 @@ let hasSetupBaseViews = false
 export function createComponent<
   ComponentPropTypes extends StackProps | TextProps = {},
   Ref = TamaguiElement,
-  BaseProps = never
+  BaseProps = never,
 >(staticConfig: StaticConfig) {
   let config: TamaguiInternalConfig | null = null
   let defaultProps = staticConfig.defaultProps
@@ -361,6 +361,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`stateref`
 
+    // TODO can remove and fold into stateRef
     const hostRef = useRef<TamaguiElement>(null)
 
     /**
@@ -371,7 +372,7 @@ export function createComponent<
 
     // after we get states mount we need to turn off isAnimated for server side
     const hasAnimationProp = Boolean(
-      props.animation || (props.style && hasAnimatedStyleValue(props.style))
+      'animation' in props || (props.style && hasAnimatedStyleValue(props.style))
     )
 
     // disable for now still ssr issues
@@ -464,8 +465,8 @@ export function createComponent<
     const componentClassName = props.asChild
       ? ''
       : props.componentName
-      ? `is_${props.componentName}`
-      : defaultComponentClassName
+        ? `is_${props.componentName}`
+        : defaultComponentClassName
 
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
@@ -554,8 +555,11 @@ export function createComponent<
       if (debugProp && debugProp !== 'profile') {
         // prettier-ignore
         const name = `${
-          componentName || Component?.displayName || Component?.name || "[Unnamed Component]"
-        }`;
+          componentName ||
+          Component?.displayName ||
+          Component?.name ||
+          '[Unnamed Component]'
+        }`
         const type = isAnimatedReactNative ? '(animated)' : isReactNative ? '(rnw)' : ''
         const dataIs = propsIn['data-is'] || ''
         const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type} id ${internalID}`

package/src/createTamagui.ts

@@ -322,14 +322,16 @@ function getThemesDeduped(themes: ThemesLikeObject): DedupedThemes {
     const darkOrLightSpecificPrefix = themeName.startsWith('dark')
       ? 'dark'
       : themeName.startsWith('light')
-      ? 'light'
-      : ''
+        ? 'light'
+        : ''
 
     const rawTheme = themes[themeName]
 
     // dont force referential equality but may need something more consistent than JSON.stringify
     // separate between dark/light
-    const key = darkOrLightSpecificPrefix + JSON.stringify(rawTheme)
+    const key =
+      darkOrLightSpecificPrefix +
+      JSON.stringify(Object.entries(rawTheme).sort((a, b) => (a[0] > b[0] ? -1 : 1)))
 
     // if existing, avoid
     if (existing.has(key)) {

package/src/createVariables.ts

@@ -10,8 +10,8 @@ export type DeepVariableObject<A extends DeepTokenObject> = {
   [Key in keyof A]: A[Key] extends string | number
     ? Variable<A[Key]>
     : A[Key] extends DeepTokenObject
-    ? DeepVariableObject<A[Key]>
-    : never
+      ? DeepVariableObject<A[Key]>
+      : never
 }
 
 const cache = new WeakMap()

package/src/helpers/ThemeManager.tsx

@@ -36,7 +36,7 @@ export function getHasThemeUpdatingProps(props: ThemeProps) {
 let uid = 0
 
 export class ThemeManager {
-  id = uid++
+  id = 0
   themeListeners = new Set<ThemeListener>()
   parentManager: ThemeManager | null = null
   state: ThemeManagerState = emptyState
@@ -45,6 +45,9 @@ export class ThemeManager {
     public props: ThemeProps = {},
     parentManager?: ThemeManager | 'root' | null | undefined
   ) {
+    uid = (uid + 1) % Number.MAX_VALUE
+    this.id = uid
+
     if (parentManager === 'root') {
       this.updateStateFromProps(props, false)
       return

package/src/helpers/ThemeManagerContext.tsx

@@ -1,5 +1,3 @@
 import { createContext } from 'react'
 
-import { ThemeManager } from './ThemeManager'
-
-export const ThemeManagerContext = createContext<ThemeManager | null>(null)
+export const ThemeManagerIDContext = createContext<number>(1)

package/src/helpers/createMediaStyle.ts

@@ -98,10 +98,12 @@ export const createMediaStyle = (
     const precedenceImportancePrefix = groupMediaKey
       ? ''
       : enableMediaPropOrder
-      ? // this new array should be cached
-        new Array(priority).fill(':root').join('')
-      : // @ts-ignore
-        prefixes[mediaKey]
+        ? // this new array should be cached
+          new Array(priority)
+            .fill(':root')
+            .join('')
+        : // @ts-ignore
+          prefixes[mediaKey]
     const prefix = groupMediaKey ? `@container ${containerName}` : '@media'
 
     if (groupMediaKey) {

package/src/helpers/getSplitStyles.tsx

@@ -352,7 +352,8 @@ export const getSplitStyles: StyleSplitter = (
           }
           viewProps[nativeA11yProp] = valInit
           continue
-        } else if (nativeAccessibilityValue[keyInit]) {
+        }
+        if (nativeAccessibilityValue[keyInit]) {
           let field = nativeAccessibilityValue[keyInit]
           if (viewProps['accessibilityValue']) {
             viewProps['accessibilityValue'][field] = valInit
@@ -441,61 +442,60 @@ export const getSplitStyles: StyleSplitter = (
           if (keyInit in accessibilityDirectMap) {
             viewProps[accessibilityDirectMap[keyInit]] = valInit
             continue
-          } else {
-            switch (keyInit) {
-              case 'accessibilityRole': {
-                if (valInit === 'none') {
-                  viewProps.role = 'presentation'
-                } else {
-                  viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
-                }
-                continue
-              }
-              case 'accessibilityLabelledBy':
-              case 'accessibilityFlowTo':
-              case 'accessibilityControls':
-              case 'accessibilityDescribedBy': {
-                viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
-                  processIDRefList(valInit)
-                continue
-              }
-              case 'accessibilityKeyShortcuts': {
-                if (Array.isArray(valInit)) {
-                  viewProps['aria-keyshortcuts'] = valInit.join(' ')
-                }
-                continue
-              }
-              case 'accessibilityLiveRegion': {
-                viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
-                continue
+          }
+          switch (keyInit) {
+            case 'accessibilityRole': {
+              if (valInit === 'none') {
+                viewProps.role = 'presentation'
+              } else {
+                viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
               }
-              case 'accessibilityReadOnly': {
-                viewProps['aria-readonly'] = valInit
-                // Enhance with native semantics
-                if (
-                  elementType === 'input' ||
-                  elementType === 'select' ||
-                  elementType === 'textarea'
-                ) {
-                  viewProps.readOnly = true
-                }
-                continue
+              continue
+            }
+            case 'accessibilityLabelledBy':
+            case 'accessibilityFlowTo':
+            case 'accessibilityControls':
+            case 'accessibilityDescribedBy': {
+              viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
+                processIDRefList(valInit)
+              continue
+            }
+            case 'accessibilityKeyShortcuts': {
+              if (Array.isArray(valInit)) {
+                viewProps['aria-keyshortcuts'] = valInit.join(' ')
               }
-              case 'accessibilityRequired': {
-                viewProps['aria-required'] = valInit
-                // Enhance with native semantics
-                if (
-                  elementType === 'input' ||
-                  elementType === 'select' ||
-                  elementType === 'textarea'
-                ) {
-                  viewProps.required = valInit
-                }
-                continue
+              continue
+            }
+            case 'accessibilityLiveRegion': {
+              viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
+              continue
+            }
+            case 'accessibilityReadOnly': {
+              viewProps['aria-readonly'] = valInit
+              // Enhance with native semantics
+              if (
+                elementType === 'input' ||
+                elementType === 'select' ||
+                elementType === 'textarea'
+              ) {
+                viewProps.readOnly = true
               }
-              default: {
-                didUseKeyInit = false
+              continue
+            }
+            case 'accessibilityRequired': {
+              viewProps['aria-required'] = valInit
+              // Enhance with native semantics
+              if (
+                elementType === 'input' ||
+                elementType === 'select' ||
+                elementType === 'textarea'
+              ) {
+                viewProps.required = valInit
               }
+              continue
+            }
+            default: {
+              didUseKeyInit = false
             }
           }
         }
@@ -741,21 +741,6 @@ export const getSplitStyles: StyleSplitter = (
         const isEnter = key === 'enterStyle'
         const isExit = key === 'exitStyle'
 
-        // dev-time warning that helps clear confusion around need for animation  when using enter/exit style
-        if (
-          process.env.NODE_ENV === 'development' &&
-          !styleProps.isAnimated &&
-          !componentState.unmounted &&
-          (isEnter || isExit)
-        ) {
-          console.warn(
-            `No animation prop given to component ${staticConfig.componentName || ''} ${
-              props['data-at'] || ''
-            } with enterStyle / exitStyle, these styles will be ignored`,
-            { props }
-          )
-        }
-
         // don't continue here on isEnter && !state.unmounted because we need to merge defaults
         if (!descriptor || (isExit && !styleProps.isExiting)) {
           continue
@@ -776,7 +761,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed("pseudo (classes)", key);
+            console.groupCollapsed('pseudo (classes)', key)
 
             log({ pseudoStyleObject, pseudoStyles })
             console.groupEnd()
@@ -815,7 +800,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed("pseudo", key, { isDisabled });
+            console.groupCollapsed('pseudo', key, { isDisabled })
 
             log(pseudoStyleObject, {
               isDisabled,
@@ -874,7 +859,7 @@ export const getSplitStyles: StyleSplitter = (
         continue
       }
       // media
-      else if (isMedia) {
+      if (isMedia) {
         if (!val) continue
 
         if (isMedia === 'platform') {
@@ -1338,7 +1323,7 @@ export const getSplitStyles: StyleSplitter = (
           viewPropsOrder: Object.keys(viewProps),
           rulesToInsert,
           parentSplitStyles,
-        };
+        }
         for (const key in logs) {
           log(key, logs[key])
         }

package/src/helpers/getThemeCSSRules.ts

@@ -15,7 +15,8 @@ export function getThemeCSSRules(props: {
 
   if (process.env.TAMAGUI_TARGET === 'native') {
     return cssRuleSets
-  } else if (
+  }
+  if (
     !process.env.TAMAGUI_DOES_SSR_CSS ||
     process.env.TAMAGUI_DOES_SSR_CSS === 'mutates-themes' ||
     process.env.TAMAGUI_DOES_SSR_CSS === 'false'
@@ -46,7 +47,7 @@ export function getThemeCSSRules(props: {
     const isDarkBase = themeName === 'dark'
     const isLightBase = themeName === 'light'
     const baseSelectors = names.map((name) => `${CNP}${name}`)
-    const selectorsSet = new Set(baseSelectors)
+    const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : [])
 
     // since we dont specify dark/light in classnames we have to do an awkward specificity war
     // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
@@ -94,9 +95,9 @@ export function getThemeCSSRules(props: {
 
           // for light/dark/light:
           selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())
-          selectorsSet.add(
-            `${parentSelectors.join(' ')} ${nextChildSelector}.is_inversed`.trim()
-          )
+          // selectorsSet.add(
+          //   `${parentSelectors.join(' ')} ${nextChildSelector}.is_inversed`.trim()
+          // )
         }
       }
     }

package/src/helpers/insertStyleRule.tsx

@@ -265,8 +265,8 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
     let scheme = selector.includes('t_dark')
       ? 'dark'
       : selector.includes('t_light')
-      ? 'light'
-      : ''
+        ? 'light'
+        : ''
     let name = selector.slice(selector.lastIndexOf('.t_') + 3)
 
     if (name.startsWith(scheme)) {

package/src/helpers/normalizeValueWithProperty.ts

@@ -68,7 +68,7 @@ export function reverseMapClassNameToValue(key: string, className: string) {
   rcache[cssRule] = res
   if (process.env.NODE_ENV === 'development') {
     // ensure we are parsing properly
-    if (typeof res === 'number' && isNaN(res)) {
+    if (typeof res === 'number' && Number.isNaN(res)) {
       console.info('Tamagui invalid parsed value, NaN:', {
         res,
         cssVal,

package/src/helpers/propMapper.ts

@@ -54,17 +54,17 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
 
   // prettier-ignore
   if (
-    process.env.NODE_ENV === "development" &&
+    process.env.NODE_ENV === 'development' &&
     fontFamily &&
-    fontFamily[0] === "$" &&
+    fontFamily[0] === '$' &&
     !(fontFamily in conf.fontsParsed)
   ) {
     // prettier-ignore
     console.warn(
-      `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(conf.fontsParsed).join(
-        ", ",
-      )}`,
-    );
+      `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(
+        conf.fontsParsed
+      ).join(', ')}`
+    )
   }
 
   if (!styleProps.noExpand) {

package/src/hooks/useTheme.tsx

@@ -9,7 +9,7 @@ import {
   ThemeManagerState,
   getHasThemeUpdatingProps,
 } from '../helpers/ThemeManager'
-import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { ThemeManagerIDContext } from '../helpers/ThemeManagerContext'
 import type {
   DebugProp,
   ThemeParsed,
@@ -61,8 +61,8 @@ export type ThemeGettable<Val> = Val & {
           ? any
           : Exclude<X, Variable>
         : Val extends VariableVal
-        ? string | number
-        : unknown)
+          ? string | number
+          : unknown)
 }
 
 export type UseThemeResult = {
@@ -106,8 +106,8 @@ export const useThemeWithState = (
 
   const { themeManager, state } = changedThemeState
 
-  if (!state?.theme) {
-    if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === 'development') {
+    if (!state?.theme) {
       if (process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== '1') {
         console.warn(
           `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
@@ -263,6 +263,21 @@ function someParentIsInversed(manager?: ThemeManager) {
 
 export const activeThemeManagers = new Set<ThemeManager>()
 
+const _uidToManager = new WeakMap<Object, ThemeManager>()
+const _idToUID: Record<number, Object> = {}
+const getId = (id: number) => _idToUID[id]
+
+export const getThemeManager = (id: number) => {
+  return _uidToManager.get(getId(id)!)
+}
+
+const registerThemeManager = (t: ThemeManager) => {
+  if (!_idToUID[t.id]) {
+    const id = (_idToUID[t.id] = {})
+    _uidToManager.set(id, t)
+  }
+}
+
 export const useChangeThemeEffect = (
   props: UseThemeWithStateProps,
   isRoot = false,
@@ -270,8 +285,8 @@ export const useChangeThemeEffect = (
   shouldUpdate?: () => boolean | undefined
 ): ChangedThemeResponse => {
   const { disable } = props
-
-  const parentManager = useContext(ThemeManagerContext)
+  const parentManagerId = useContext(ThemeManagerIDContext)
+  const parentManager = getThemeManager(parentManagerId)
 
   if ((!isRoot && !parentManager) || disable) {
     return {
@@ -335,11 +350,8 @@ export const useChangeThemeEffect = (
         return
       }
 
-      if (isNewTheme && themeManager) {
-        activeThemeManagers.add(themeManager)
-      }
-
       if (isNewTheme || getShouldUpdateTheme(themeManager)) {
+        activeThemeManagers.add(themeManager)
         setThemeState(createState)
       }
 
@@ -365,7 +377,14 @@ export const useChangeThemeEffect = (
 
           if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
             // prettier-ignore
-            console.info(` 🔸 onChange`, themeManager.id, { force, shouldTryUpdate, props, name, manager, keys, })
+            console.info(` 🔸 onChange`, themeManager.id, {
+              force,
+              shouldTryUpdate,
+              props,
+              name,
+              manager,
+              keys,
+            })
           }
 
           if (shouldTryUpdate) {
@@ -378,7 +397,9 @@ export const useChangeThemeEffect = (
       return () => {
         selfListenerDispose()
         disposeChangeListener?.()
-        activeThemeManagers.delete(themeManager)
+        if (isNewTheme) {
+          activeThemeManagers.delete(themeManager)
+        }
       }
     }, [
       themeManager,
@@ -479,6 +500,10 @@ export const useChangeThemeEffect = (
 
     const isNewTheme = Boolean(themeManager !== parentManager || props.inverse)
 
+    if (isNewTheme) {
+      registerThemeManager(themeManager)
+    }
+
     // only inverse relies on this for ssr
     const mounted = !props.inverse ? true : isRoot || prev?.mounted
 
@@ -503,8 +528,8 @@ export const useChangeThemeEffect = (
     }
 
     const shouldReturnPrev =
-      !force &&
       prev &&
+      !force &&
       // isEqualShallow uses the second arg as the keys so this should compare without state first...
       isEqualShallow(prev, response) &&
       // ... and then compare just the state, because we make a new state obj but is likely the same

package/src/hooks/useThemeName.tsx

@@ -1,11 +1,12 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { useContext, useState } from 'react'
 
-import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { ThemeManagerIDContext } from '../helpers/ThemeManagerContext'
 import { ThemeName } from '../types'
+import { getThemeManager } from './useTheme'
 
 export function useThemeName(opts?: { parent?: true }): ThemeName {
-  const manager = useContext(ThemeManagerContext)
+  const manager = getThemeManager(useContext(ThemeManagerIDContext)!)
   const [name, setName] = useState(manager?.state.name || '')
 
   useIsomorphicLayoutEffect(() => {

package/src/interfaces/GetRef.tsx

@@ -6,18 +6,22 @@ import { TamaguiComponent } from '../types'
 
 export type GetRef<C> = C extends TamaguiComponent<any, infer Ref>
   ? Ref
-  : C extends new (props: any) => Component
-  ? InstanceType<C>
-  : C extends abstract new (...args: any) => any
-  ? InstanceType<C>
-  : C extends Component
-  ? C
-  : (
-      C extends JSXElementConstructor<{ ref?: infer R }>
-        ? R
-        : C extends keyof JSX.IntrinsicElements
-        ? JSX.IntrinsicElements[C]['ref']
-        : unknown
-    ) extends Ref<infer T> | string | undefined
-  ? T
-  : unknown
+  : C extends new (
+        props: any
+      ) => Component
+    ? InstanceType<C>
+    : C extends abstract new (
+          ...args: any
+        ) => any
+      ? InstanceType<C>
+      : C extends Component
+        ? C
+        : (
+              C extends JSXElementConstructor<{ ref?: infer R }>
+                ? R
+                : C extends keyof JSX.IntrinsicElements
+                  ? JSX.IntrinsicElements[C]['ref']
+                  : unknown
+            ) extends Ref<infer T> | string | undefined
+          ? T
+          : unknown