@tamagui/core 1.0.1-rc.9 → 1.0.1

package/dist/esm/hooks/useTheme.js

@@ -9,6 +9,7 @@ import {
 } from "../helpers/ThemeManager";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { GetThemeUnwrapped } from "./getThemeUnwrapped";
+import { useServerRef } from "./useServerHooks";
 const emptyProps = { name: null };
 function getDefaultThemeProxied() {
   const config = getConfig();
@@ -19,13 +20,24 @@ function getDefaultThemeProxied() {
   });
 }
 const useTheme = (props = emptyProps) => {
-  var _a;
+  var _a, _b;
   if (isRSC) {
     return getDefaultThemeProxied();
   }
-  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(props);
+  const state = useServerRef();
+  if (isClient && !state.current) {
+    state.current = {
+      keys: /* @__PURE__ */ new Set()
+    };
+  }
+  (_a = state.current) == null ? void 0 : _a.keys.clear();
+  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(
+    props,
+    false,
+    isClient ? () => state.current.keys.size === 0 : void 0
+  );
   if (process.env.NODE_ENV === "development") {
-    if (isWeb && isNewTheme && className === ((_a = themeManager == null ? void 0 : themeManager.parentManager) == null ? void 0 : _a.state.className)) {
+    if (isWeb && isNewTheme && className === ((_b = themeManager == null ? void 0 : themeManager.parentManager) == null ? void 0 : _b.state.className)) {
       console.error("Should always change, duplicating ThemeMananger bug", themeManager);
     }
     if (props.debug === "verbose") {
@@ -49,7 +61,8 @@ const useTheme = (props = emptyProps) => {
       theme,
       name,
       className,
-      themeManager
+      themeManager,
+      state
     });
   }, [theme, isNewTheme, name, className, themeManager]);
 };
@@ -58,7 +71,8 @@ function getThemeProxied({
   name,
   className,
   themeManager,
-  isNewTheme
+  isNewTheme,
+  state
 }) {
   return createProxy(theme, {
     has(_, key) {
@@ -88,7 +102,20 @@ function getThemeProxied({
       if (!themeManager) {
         return theme[key];
       }
-      return themeManager.getValue(key);
+      const val = themeManager.getValue(key);
+      if (val && state) {
+        if (isClient) {
+          return new Proxy(val, {
+            get(_2, subkey) {
+              if (subkey === "val") {
+                state.current.keys.add(key);
+              }
+              return Reflect.get(val, subkey);
+            }
+          });
+        }
+      }
+      return val;
     }
   });
 }
@@ -97,7 +124,7 @@ const GetIsNewTheme = Symbol();
 const getThemeManager = (theme) => theme == null ? void 0 : theme[GetThemeManager];
 const getThemeIsNewTheme = (theme) => theme == null ? void 0 : theme[GetIsNewTheme];
 const activeThemeManagers = /* @__PURE__ */ new Set();
-const useChangeThemeEffect = (props, root = false) => {
+const useChangeThemeEffect = (props, root = false, disableUpdate) => {
   if (isRSC) {
     return {
       ...createState().state,
@@ -129,20 +156,8 @@ const useChangeThemeEffect = (props, root = false) => {
         return;
       }
       activeThemeManagers.add(themeManager);
-      const disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(() => {
-        if (!(isNewTheme || isWeb)) {
-          setThemeState({
-            ...themeState,
-            state: { ...themeManager.state },
-            isNewTheme: false
-          });
-        } else {
-          updateState();
-        }
-      });
       return () => {
         activeThemeManagers.delete(themeManager);
-        disposeChangeListener == null ? void 0 : disposeChangeListener();
       };
     }, [disable, state, isNewTheme, debug]);
   }
@@ -152,12 +167,7 @@ const useChangeThemeEffect = (props, root = false) => {
     if (!parentManager)
       throw "impossible";
     if (process.env.NODE_ENV === "development" && props.debug === "verbose")
-      console.log(
-        "useTheme hasNoThemeUpdatingProps",
-        parentManager.state.name,
-        "isInversingOnMount",
-        isInversingOnMount
-      );
+      console.log("useTheme hasNoThemeUpdatingProps", parentManager.state.name, "isInversingOnMount", isInversingOnMount);
     return {
       ...parentManager.state,
       className: isInversingOnMount ? "" : parentManager.state.className,
@@ -172,27 +182,11 @@ const useChangeThemeEffect = (props, root = false) => {
     themeManager
   };
   function createState(prev) {
+    if (prev && (disableUpdate == null ? void 0 : disableUpdate())) {
+      return prev;
+    }
     const _ = new ThemeManager(props, root ? "root" : parentManager);
     const isNewTheme2 = _ !== parentManager;
-    if (process.env.NODE_ENV === "development" && debug)
-      [
-        console.groupCollapsed("useTheme create() isNewTheme", isNewTheme2),
-        console.log(
-          "parent.state.name",
-          parentManager == null ? void 0 : parentManager.state.name,
-          "\n",
-          "props",
-          props,
-          "\n",
-          isClient ? parentManager : "",
-          "getState",
-          isNewTheme2 && isClient ? _.getState(props) : "",
-          "\n",
-          "state",
-          isClient ? { ..._.state } : ""
-        ),
-        console.groupEnd()
-      ];
     const mounted2 = !props.inverse ? true : root || (prev == null ? void 0 : prev.mounted);
     return {
       isNewTheme: isNewTheme2,
@@ -201,12 +195,13 @@ const useChangeThemeEffect = (props, root = false) => {
       mounted: mounted2
     };
   }
-  function updateState() {
-    const next = themeManager.getState(props, parentManager);
-    const shouldChange = themeManager.getStateShouldChange(
-      next,
-      isNewTheme ? state : null
-    );
+  function updateState(updatingManager) {
+    if (disableUpdate == null ? void 0 : disableUpdate()) {
+      return;
+    }
+    const manager = updatingManager ?? themeManager;
+    const next = manager.getState(props, parentManager);
+    const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null);
     if (shouldChange) {
       setThemeState(createState);
     } else {

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  ThemeManager,\n  ThemeManagerState,\n  hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\n\nexport type ChangedThemeResponse = {\n  themeManager: ThemeManager | null\n  name: string\n  isNewTheme?: boolean\n  theme?: ThemeParsed | null\n  className?: string\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\n  const config = getConfig()\n  const name = Object.keys(config.themes)[0]\n  return getThemeProxied({\n    theme: config.themes[name],\n    name,\n  })\n}\n\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  if (isRSC) {\n    return getDefaultThemeProxied()\n  }\n\n  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(props)\n\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we aren't creating too many ThemeManagers\n    if (\n      isWeb &&\n      isNewTheme &&\n      className === themeManager?.parentManager?.state.className\n    ) {\n      console.error('Should always change, duplicating ThemeMananger bug', themeManager)\n    }\n    if (props.debug === 'verbose') {\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { ...props, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        console.log('  ', key, logs[key])\n      }\n      console.groupEnd()\n    }\n  }\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return getDefaultThemeProxied()\n  }\n\n  return useMemo(() => {\n    return getThemeProxied({\n      isNewTheme,\n      theme,\n      name,\n      className,\n      themeManager,\n    })\n  }, [theme, isNewTheme, name, className, themeManager])\n}\n\nfunction getThemeProxied({\n  theme,\n  name,\n  className,\n  themeManager,\n  isNewTheme,\n}: {\n  theme: any\n  name: string\n  className?: string\n  themeManager?: ThemeManager | null\n  isNewTheme?: boolean\n}) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string') {\n        if (key[0] === '$') key = key.slice(1)\n        return themeManager?.allKeys.has(key)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      } else if (key === GetThemeManager) {\n        return themeManager\n      } else if (key === GetIsNewTheme) {\n        return isNewTheme\n      } else if (key === 'name') {\n        return name\n      } else if (key === 'className') {\n        return className\n      } else if (\n        !name ||\n        key === '__proto__' ||\n        typeof key === 'symbol' ||\n        key === '$typeof'\n      ) {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') key = key.slice(1)\n      if (!themeManager) {\n        return theme[key]\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\nconst GetIsNewTheme = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined =>\n  theme?.[GetThemeManager]\nexport const getThemeIsNewTheme = (theme: any): ThemeManager | undefined =>\n  theme?.[GetIsNewTheme]\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  props: ThemeProps,\n  root = false\n): ChangedThemeResponse => {\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      ...createState().state,\n      themeManager: null,\n    }\n  }\n  const parentManager = useContext(ThemeManagerContext)\n\n  const {\n    debug,\n    // @ts-expect-error internal use only\n    disable,\n  } = props\n\n  if (disable) {\n    if (!parentManager) throw new Error('Disable topmost')\n    return {\n      ...parentManager.state,\n      isNewTheme: false,\n      themeManager: parentManager,\n    }\n  }\n\n  type State = {\n    isNewTheme: boolean\n    state: ThemeManagerState\n    themeManager: ThemeManager\n    mounted?: boolean\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { isNewTheme, state, themeManager, mounted } = themeState\n\n  if (!isServer) {\n    useEffect(() => {\n      if (disable) return\n      // SSR safe inverse (because server can't know prefers scheme)\n      // could be done through fancy selectors like how we do prefers-media\n      // but may be a bit of explosion of selectors\n      if (props.inverse && !mounted) {\n        setThemeState({ ...themeState, mounted: true })\n        return\n      }\n      activeThemeManagers.add(themeManager)\n      const disposeChangeListener = parentManager?.onChangeTheme(() => {\n        if (!(isNewTheme || isWeb)) {\n          setThemeState({\n            ...themeState,\n            state: { ...themeManager.state },\n            isNewTheme: false,\n          })\n        } else {\n          updateState()\n        }\n      })\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeChangeListener?.()\n      }\n    }, [disable, state, isNewTheme, debug])\n  }\n\n  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n  const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount\n\n  if (shouldReturnParentState) {\n    if (!parentManager) throw 'impossible'\n    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')\n      console.log(\n        'useTheme hasNoThemeUpdatingProps',\n        parentManager.state.name,\n        'isInversingOnMount',\n        isInversingOnMount\n      )\n    return {\n      ...parentManager.state,\n      className: isInversingOnMount ? '' : parentManager.state.className,\n      themeManager: parentManager,\n      isNewTheme: false,\n    }\n  }\n\n  // run inline in render\n  updateState()\n\n  return {\n    ...state,\n    isNewTheme,\n    themeManager,\n  }\n\n  function createState(prev?: State) {\n    const _ = new ThemeManager(props, root ? 'root' : parentManager)\n    const isNewTheme = _ !== parentManager\n    if (process.env.NODE_ENV === 'development' && debug)\n      [\n        console.groupCollapsed('useTheme create() isNewTheme', isNewTheme),\n        console.log(\n          'parent.state.name',\n          parentManager?.state.name,\n          '\\n',\n          'props',\n          props,\n          '\\n',\n          isClient ? parentManager : '',\n          'getState',\n          isNewTheme && isClient ? _.getState(props) : '',\n          '\\n',\n          'state',\n          isClient ? { ..._.state } : ''\n        ),\n        console.groupEnd(),\n      ]\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted\n    return {\n      // ThemeManager returns parentManager if no change\n      isNewTheme,\n      state: { ..._.state },\n      themeManager: _,\n      mounted,\n    }\n  }\n\n  function updateState() {\n    const next = themeManager.getState(props, parentManager)\n    const shouldChange = themeManager.getStateShouldChange(\n      next,\n      isNewTheme ? state : null\n    )\n    if (shouldChange) {\n      setThemeState(createState)\n    } else {\n      if (!next && parentManager?.state.name !== state.name) {\n        // were changing back to parent state\n        setThemeState(createState)\n      }\n    }\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["isNewTheme", "mounted"]
+  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  ThemeManager,\n  ThemeManagerState,\n  hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport type ChangedThemeResponse = {\n  themeManager: ThemeManager | null\n  name: string\n  isNewTheme?: boolean\n  theme?: ThemeParsed | null\n  className?: string\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\n  const config = getConfig()\n  const name = Object.keys(config.themes)[0]\n  return getThemeProxied({\n    theme: config.themes[name],\n    name,\n  })\n}\n\ninterface UseThemeState {\n  keys: Set<string>\n}\n\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  if (isRSC) {\n    return getDefaultThemeProxied()\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (isClient && !state.current) {\n    state.current = {\n      keys: new Set(),\n    }\n  }\n  state.current?.keys.clear()\n\n  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(\n    props,\n    false,\n    isClient ? () => state.current.keys.size === 0 : undefined\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we aren't creating too many ThemeManagers\n    if (\n      isWeb &&\n      isNewTheme &&\n      className === themeManager?.parentManager?.state.className\n    ) {\n      console.error('Should always change, duplicating ThemeMananger bug', themeManager)\n    }\n    if (props.debug === 'verbose') {\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { ...props, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        console.log('  ', key, logs[key])\n      }\n      console.groupEnd()\n    }\n  }\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return getDefaultThemeProxied()\n  }\n\n  return useMemo(() => {\n    return getThemeProxied({\n      isNewTheme,\n      theme,\n      name,\n      className,\n      themeManager,\n      state,\n    })\n  }, [theme, isNewTheme, name, className, themeManager])\n}\n\nfunction getThemeProxied({\n  theme,\n  name,\n  className,\n  themeManager,\n  isNewTheme,\n  state,\n}: {\n  theme: any\n  name: string\n  className?: string\n  themeManager?: ThemeManager | null\n  isNewTheme?: boolean\n  state?: React.RefObject<UseThemeState>\n}) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string') {\n        if (key[0] === '$') key = key.slice(1)\n        return themeManager?.allKeys.has(key)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      } else if (key === GetThemeManager) {\n        return themeManager\n      } else if (key === GetIsNewTheme) {\n        return isNewTheme\n      } else if (key === 'name') {\n        return name\n      } else if (key === 'className') {\n        return className\n      } else if (\n        !name ||\n        key === '__proto__' ||\n        typeof key === 'symbol' ||\n        key === '$typeof'\n      ) {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') key = key.slice(1)\n      if (!themeManager) {\n        return theme[key]\n      }\n      const val = themeManager.getValue(key)\n      if (val && state) {\n        if (isClient) {\n          return new Proxy(val as any, {\n            get(_, subkey) {\n              if (subkey === 'val') {\n                state.current!.keys.add(key as any)\n              }\n              return Reflect.get(val, subkey)\n            },\n          })\n        }\n      }\n      return val\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\nconst GetIsNewTheme = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined =>\n  theme?.[GetThemeManager]\nexport const getThemeIsNewTheme = (theme: any): ThemeManager | undefined =>\n  theme?.[GetIsNewTheme]\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  props: ThemeProps,\n  root = false,\n  disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      ...createState().state,\n      themeManager: null,\n    }\n  }\n  const parentManager = useContext(ThemeManagerContext)\n\n  const {\n    debug,\n    // @ts-expect-error internal use only\n    disable,\n  } = props\n\n  if (disable) {\n    if (!parentManager) throw new Error('Disable topmost')\n    return {\n      ...parentManager.state,\n      isNewTheme: false,\n      themeManager: parentManager,\n    }\n  }\n\n  type State = {\n    isNewTheme: boolean\n    state: ThemeManagerState\n    themeManager: ThemeManager\n    mounted?: boolean\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { isNewTheme, state, themeManager, mounted } = themeState\n\n  if (!isServer) {\n    useEffect(() => {\n      if (disable) return\n      // SSR safe inverse (because server can't know prefers scheme)\n      // could be done through fancy selectors like how we do prefers-media\n      // but may be a bit of explosion of selectors\n      if (props.inverse && !mounted) {\n        setThemeState({ ...themeState, mounted: true })\n        return\n      }\n      activeThemeManagers.add(themeManager)\n      // const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {\n      //   // console.log('hi', props, state, name, manager)\n      //   if (state.theme !== manager.state.theme) {\n      //     console.warn('now update to', manager.state.name)\n      //     updateState(manager)\n      //   }\n      // })\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        // disposeChangeListener?.()\n      }\n    }, [disable, state, isNewTheme, debug])\n  }\n\n  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n  const shouldReturnParentState = hasNoThemeUpdatingProps(props) || isInversingOnMount\n\n  if (shouldReturnParentState) {\n    if (!parentManager) throw 'impossible'\n    // prettier-ignore\n    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme hasNoThemeUpdatingProps', parentManager.state.name, 'isInversingOnMount', isInversingOnMount)\n    return {\n      ...parentManager.state,\n      className: isInversingOnMount ? '' : parentManager.state.className,\n      themeManager: parentManager,\n      isNewTheme: false,\n    }\n  }\n\n  // run inline in render\n  updateState()\n\n  return {\n    ...state,\n    isNewTheme,\n    themeManager,\n  }\n\n  function createState(prev?: State) {\n    if (prev && disableUpdate?.()) {\n      return prev\n    }\n    // returns previous theme manager if no change\n    const _ = new ThemeManager(props, root ? 'root' : parentManager)\n    const isNewTheme = _ !== parentManager\n    // prettier-ignore\n\n    // if (prev?.isNewTheme && _.state.theme !== parentManager?.state.theme) {\n    //   console.warn('notify')\n    //   _.notify()\n    // }\n\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted\n    return {\n      // ThemeManager returns parentManager if no change\n      isNewTheme,\n      state: { ..._.state },\n      themeManager: _,\n      mounted,\n    }\n  }\n\n  function updateState(updatingManager?: ThemeManager) {\n    if (disableUpdate?.()) {\n      return\n    }\n    const manager = updatingManager ?? themeManager\n    const next = manager.getState(props, parentManager)\n    const shouldChange = manager.getStateShouldChange(next, isNewTheme ? state : null)\n    // console.log(`got it`, next, isNewTheme, shouldChange, { ...updatingManager?.state })\n    if (shouldChange) {\n      setThemeState(createState)\n    } else {\n      if (!next && parentManager?.state.name !== state.name) {\n        // were changing back to parent state\n        setThemeState(createState)\n      }\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["_", "isNewTheme", "mounted"]
 }

package/dist/esm/views/TamaguiProvider.js

@@ -23,6 +23,9 @@ function TamaguiProvider({
   }
   if (isClient) {
     React.useLayoutEffect(() => {
+      if (document.documentElement.classList.contains("t_unmounted")) {
+        document.documentElement.classList.remove("t_unmounted");
+      }
       if (disableInjectCSS)
         return;
       const style = document.createElement("style");

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TamaguiProvider.tsx"],
-  "sourcesContent": ["import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonNestingContext } from '../contexts/ButtonNestingContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        className={`t_${Object.keys(config.themes)[0] || 'light'}`}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  if (!(isWeb && isServer)) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonNestingContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonNestingContext.Provider>\n  )\n}\n"],
-  "mappings": "AAiBM;AAjBN,SAAS,UAAU,OAAO,UAAU,aAAa;AACjD,YAAY,WAAW;AAEvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,WAAW,KAAK,OAAO,KAAK,OAAO,MAAM,EAAE,MAAM;AAAA,MAEhD;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,EAAE,SAAS,WAAW;AACxB,sBAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,oBAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO;AAAA,IACpC,8BAAC,oBAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,8BAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,QAE3E;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonNestingContext } from '../contexts/ButtonNestingContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        className={`t_${Object.keys(config.themes)[0] || 'light'}`}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  if (!(isWeb && isServer)) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      // for easier support of hidden-until-js mount animations\n      // user must set t_unmounted on documentElement from SSR\n      if (document.documentElement.classList.contains('t_unmounted')) {\n        document.documentElement.classList.remove('t_unmounted')\n      }\n\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonNestingContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonNestingContext.Provider>\n  )\n}\n"],
+  "mappings": "AAiBM;AAjBN,SAAS,UAAU,OAAO,UAAU,aAAa;AACjD,YAAY,WAAW;AAEvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,WAAW,KAAK,OAAO,KAAK,OAAO,MAAM,EAAE,MAAM;AAAA,MAEhD;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,EAAE,SAAS,WAAW;AACxB,sBAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAG1B,UAAI,SAAS,gBAAgB,UAAU,SAAS,aAAa,GAAG;AAC9D,iBAAS,gBAAgB,UAAU,OAAO,aAAa;AAAA,MACzD;AAEA,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,oBAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO;AAAA,IACpC,8BAAC,oBAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,8BAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,QAE3E;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
-import React, { useMemo } from "react";
+import { Children, cloneElement } from "react";
 import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { useChangeThemeEffect } from "../hooks/useTheme";
@@ -9,16 +9,16 @@ function Theme(props) {
     return props.children;
   }
   const isRoot = !!props["_isRoot"];
-  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(
-    props,
-    isRoot
-  );
+  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot);
   const disableThemeClass = props.disableThemeClass;
   const missingTheme = !(name && theme);
-  let contents = useMemo(() => {
-    const next = props["data-themeable"] ? React.cloneElement(props.children, { ["data-themeable"]: true }) : props.children;
-    return missingTheme ? next : wrapThemeManagerContext(next, themeManager);
-  }, [missingTheme, props.children, themeManager]);
+  let contents = useThemeManagerContext(
+    props["data-themeable"] ? Children.map(
+      props.children,
+      (child) => cloneElement(child, { ["data-themeable"]: true })
+    ) : props.children,
+    themeManager
+  );
   if (process.env.NODE_ENV === "development" && missingTheme) {
     name && !theme && console.warn(`No theme found by name ${name}`);
     return props.children;
@@ -38,10 +38,10 @@ function Theme(props) {
   }
   return contents;
 }
-function wrapThemeManagerContext(children, themeManager, shouldReset) {
-  if (!themeManager) {
+function useThemeManagerContext(children, themeManager, shouldReset) {
+  const value = themeManager;
+  if (!value)
     return children;
-  }
   let next = children;
   if (shouldReset && themeManager) {
     next = /* @__PURE__ */ jsx(Theme, {
@@ -50,12 +50,12 @@ function wrapThemeManagerContext(children, themeManager, shouldReset) {
     });
   }
   return /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
-    value: themeManager,
+    value,
     children: next
   });
 }
 export {
   Theme,
-  wrapThemeManagerContext
+  useThemeManagerContext
 };
 //# sourceMappingURL=Theme.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(\n    props,\n    isRoot\n  )\n\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !(name && theme)\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  let contents = useMemo(() => {\n    const next = props['data-themeable']\n      ? React.cloneElement(props.children, { ['data-themeable']: true })\n      : props.children\n\n    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)\n  }, [missingTheme, props.children, themeManager])\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || missingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // be sure to memoize themeManager to avoid reparenting\n  if (!themeManager) {\n    return children\n  }\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n}\n"],
-  "mappings": "AA+CM;AA/CN,SAAS,aAAa;AACtB,OAAO,SAAS,eAAe;AAE/B,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,YAAY,UAAU,IAAI;AAAA,IAC3D;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,EAAE,QAAQ;AAI/B,MAAI,WAAW,QAAQ,MAAM;AAC3B,UAAM,OAAO,MAAM,oBACf,MAAM,aAAa,MAAM,UAAU,EAAE,CAAC,mBAAmB,KAAK,CAAC,IAC/D,MAAM;AAEV,WAAO,eAAe,OAAO,wBAAwB,MAAM,YAAY;AAAA,EACzE,GAAG,CAAC,cAAc,MAAM,UAAU,YAAY,CAAC;AAE/C,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,OAAO,iBAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,wBACd,UACA,cACA,aACA;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,oBAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAClC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { Children, cloneElement, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot)\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !(name && theme)\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  let contents = useThemeManagerContext(\n    props['data-themeable']\n      ? Children.map(props.children, (child) =>\n          cloneElement(child, { ['data-themeable']: true })\n        )\n      : props.children,\n    themeManager\n  )\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || missingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function useThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // disabled super memoize it - listener first strategy\n  const value = themeManager // useMemo(() => themeManager, [!!themeManager])\n  // be sure to memoize themeManager to avoid reparenting\n  if (!value) return children\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return <ThemeManagerContext.Provider value={value}>{next}</ThemeManagerContext.Provider>\n}\n"],
+  "mappings": "AA4CM;AA5CN,SAAS,aAAa;AACtB,SAAgB,UAAU,oBAA6B;AAEvD,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,UAAU,IAAI,qBAAqB,OAAO,MAAM;AACnF,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,EAAE,QAAQ;AAI/B,MAAI,WAAW;AAAA,IACb,MAAM,oBACF,SAAS;AAAA,MAAI,MAAM;AAAA,MAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,mBAAmB,KAAK,CAAC;AAAA,IAClD,IACA,MAAM;AAAA,IACV;AAAA,EACF;AAEA,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,OAAO,iBAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,uBACd,UACA,cACA,aACA;AAEA,QAAM,QAAQ;AAEd,MAAI,CAAC;AAAO,WAAO;AAEnB,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,oBAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SAAO,oBAAC,oBAAoB,UAApB;AAAA,IAA6B;AAAA,IAAe;AAAA,GAAK;AAC3D;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-rc.9",
+  "version": "1.0.1",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,28 +28,28 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-rc.9",
-    "@tamagui/constants": "^1.0.1-rc.9",
-    "@tamagui/helpers": "^1.0.1-rc.9",
-    "@tamagui/react-native-use-pressable": "^1.0.1-rc.9",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-rc.9",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-rc.9",
-    "@tamagui/use-event": "^1.0.1-rc.9",
-    "@tamagui/use-force-update": "^1.0.1-rc.9",
+    "@tamagui/compose-refs": "^1.0.1",
+    "@tamagui/constants": "^1.0.1",
+    "@tamagui/helpers": "^1.0.1",
+    "@tamagui/react-native-use-pressable": "^1.0.1",
+    "@tamagui/react-native-use-responder-events": "^1.0.1",
+    "@tamagui/use-did-finish-ssr": "^1.0.1",
+    "@tamagui/use-event": "^1.0.1",
+    "@tamagui/use-force-update": "^1.0.1",
     "normalize-css-color": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.9",
+    "@tamagui/build": "^1.0.1",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.7.4",
-    "vitest": "^0.25.7"
+    "vitest": "^0.26.2"
   },
   "exports": {
     "./package.json": "./package.json",

package/src/createComponent.tsx

@@ -20,7 +20,6 @@ import React, {
   createElement,
   forwardRef,
   memo,
-  startTransition,
   useCallback,
   useContext,
   useEffect,
@@ -61,7 +60,7 @@ import {
 } from './types'
 import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
-import { wrapThemeManagerContext } from './views/Theme'
+import { useThemeManagerContext } from './views/Theme'
 
 // let t
 // import { timer } from '@tamagui/timer'
@@ -558,7 +557,8 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
-        if (typeof item === 'string') {
+        // allow newlines because why not its annoying with mdx
+        if (typeof item === 'string' && item !== '\n') {
           // eslint-disable-next-line no-console
           console.error(
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
@@ -585,10 +585,17 @@ export function createComponent<
     const shouldSetMounted = needsMount && state.unmounted
     useEffect(() => {
       if (!shouldSetMounted) return
+      if (state.unmounted === true && needsMount) {
+        setStateShallow({
+          unmounted: false,
+        })
+        return
+      }
+
       setStateShallow({
         unmounted: false,
       })
-    }, [shouldSetMounted])
+    }, [shouldSetMounted, state.unmounted])
 
     let styles: Record<string, any>[]
 
@@ -618,11 +625,15 @@ export function createComponent<
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
     const classList = [
+      hasEnterStyle && ((state.unmounted && needsMount) || !isClient)
+        ? 't_will-mount'
+        : '',
       componentName ? componentClassName : '',
       fontFamilyClassName,
       themeIsNew ? theme.className : '',
       classNames ? Object.values(classNames).join(' ') : '',
     ]
+
     const className = classList.join(' ')
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -811,23 +822,20 @@ export function createComponent<
       stateRef.current.themeShouldReset = true
     }
 
-    const childEls =
-      !children || asChild
-        ? children
-        : wrapThemeManagerContext(
-            spacedChildren({
-              separator,
-              children,
-              space,
-              direction: props.spaceDirection || 'both',
-              isZStack,
-            }),
-            // only set context if changed theme
-            stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
-            stateRef.current.themeShouldReset
-          )
+    const innerContent = useThemeManagerContext(
+      spacedChildren({
+        separator,
+        children,
+        space,
+        direction: props.spaceDirection || 'both',
+        isZStack,
+      }),
+      // only set context if changed theme
+      stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
+      stateRef.current.themeShouldReset
+    )
 
-    let content: any
+    let content = !children || asChild ? children : innerContent
 
     if (asChild) {
       elementType = Slot
@@ -865,7 +873,7 @@ export function createComponent<
       }
     }
 
-    content = createElement(elementType, viewProps, childEls)
+    content = createElement(elementType, viewProps, content)
 
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (events || isAnimatedReactNativeWeb) {
@@ -921,7 +929,6 @@ export function createComponent<
             styles,
             pseudos,
             content,
-            childEls,
             shouldAvoidClasses,
             avoidClasses: avoidClassesWhileAnimating,
             animation: props.animation,
@@ -1162,41 +1169,38 @@ export type SpacedChildrenProps = {
   separator?: React.ReactNode
 }
 
-export function spacedChildren({
-  isZStack,
-  children,
-  space,
-  direction,
-  spaceFlex,
-  separator,
-}: SpacedChildrenProps) {
+export function spacedChildren(props: SpacedChildrenProps) {
+  const { isZStack, children, space, direction, spaceFlex, separator } = props
   const hasSpace = !!(space || spaceFlex)
   const hasSeparator = !(separator === undefined || separator === null)
   if (!(hasSpace || hasSeparator || isZStack)) {
     return children
   }
+
   const childrenList = Children.toArray(children)
+
   const len = childrenList.length
-  if (len <= 1 && !isZStack) {
-    if (len === 1) {
-      // forward space! only when one component doesn't make sense to forward space to all children
-      const [onlyChild] = childrenList
-      if (React.isValidElement(onlyChild) && onlyChild.type?.['shouldForwardSpace']) {
-        return React.cloneElement(onlyChild, {
-          space,
-          spaceFlex,
-          separator,
-        } as any)
-      }
-    }
+  if (len <= 1 && !isZStack && !childrenList[0]?.['type']?.['shouldForwardSpace']) {
     return childrenList
   }
+
   const final: React.ReactNode[] = []
-  for (const [index, child] of childrenList.entries()) {
+  for (let [index, child] of childrenList.entries()) {
     const isEmpty =
       child === null ||
       child === undefined ||
       (Array.isArray(child) && child.length === 0)
+
+    // forward space
+    if (!isEmpty && React.isValidElement(child) && child.type?.['shouldForwardSpace']) {
+      child = React.cloneElement(child, {
+        space,
+        spaceFlex,
+        separator,
+        key: child.key,
+      } as any)
+    }
+
     // push them all, but wrap some in Fragment
     if (isEmpty || !child || (child['key'] && !isZStack)) {
       final.push(child)

package/src/createTamagui.ts

@@ -212,7 +212,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     tokensParsed,
     parsed: true,
     getCSS: (separator = '\n') => {
-      return `.is_Text .is_Text {display:inline-flex;}
+      return `.t_unmounted .t_will-mount {opacity:0;visibility:hidden;}
+.is_Text .is_Text {display:inline-flex;}
 ._dsp_contents {display:contents;}
 ${themeConfig.cssRuleSets.join(separator)}
 ${themeConfig.themeRuleSets.join(separator)}

package/src/helpers/ThemeManager.tsx

@@ -42,6 +42,10 @@ export class ThemeManager {
     if (!parentManager) {
       throw new Error('Must set up root first')
     }
+
+    // copy over listeners
+    this.themeListeners = parentManager.themeListeners
+
     // no change no props
     if (hasNoThemeUpdatingProps(props)) {
       return parentManager
@@ -101,9 +105,9 @@ export class ThemeManager {
     state: ThemeManagerState | null = this.state
   ) {
     if (!nextState?.theme || nextState.theme === state?.theme) {
-      return null
+      return false
     }
-    return nextState
+    return true
   }
 
   getState(props = this.props, parentManager = this.parentManager) {
@@ -136,6 +140,7 @@ export class ThemeManager {
   }
 
   notify() {
+    console.log('notify', this.themeListeners.size, this.themeListeners)
     this.themeListeners.forEach((cb) => cb(this.state.name, this))
   }