@tamagui/core 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/index.js

@@ -15,6 +15,7 @@ export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
+export * from "./helpers/isTamaguiElement";
 export * from "./hooks/useConstant";
 export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
@@ -25,7 +26,6 @@ export * from "./views/Theme";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
 export * from "./views/TextAncestorContext";
-export * from "./views/SafeAreaProvider";
 export {
   createTokens
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n\nexport * from './constants/pseudos'\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './views/Animated'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\nexport * from './views/SafeAreaProvider'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "sourcesContent": ["export * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n\nexport * from './constants/pseudos'\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/isTamaguiElement'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './views/Animated'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;",
   "names": []
 }

package/dist/views/Theme.js

@@ -15,8 +15,12 @@ const Theme = /* @__PURE__ */ __name((props) => {
     return props.children;
   }
   const name = props.name;
-  const theme = themes[name] || themes[`${name}-${parentName}`];
+  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`;
+  const theme = activeName ? themes[activeName] : null;
   const themeManager = useConstant(() => {
+    if (!theme) {
+      return null;
+    }
     const manager = new ThemeManager();
     if (name) {
       manager.setActiveTheme(name, themes[name]);
@@ -24,15 +28,18 @@ const Theme = /* @__PURE__ */ __name((props) => {
     return manager;
   });
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
+    if (!themeManager) {
+      return;
+    }
+    themeManager.setActiveTheme(activeName, theme);
     return parent.onChangeTheme((next) => {
       if (next) {
         themeManager.setActiveTheme(next, themes[next]);
         setParentName(next);
       }
     });
-  }, [themes, name]);
-  if (!name) {
+  }, [themes, activeName]);
+  if (!name || !theme) {
     return props.children;
   }
   const contents = themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {

package/dist/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName, Themes } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('no themes???', props)\n    return props.children\n  }\n  const name = props.name as string\n  const theme = themes[name] || themes[`${name}-${parentName}`]\n  const themeManager = useConstant<ThemeManager>(() => {\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme(name, themes[name])\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    themeManager.setActiveTheme(name, theme)\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme(next, themes[next])\n        setParentName(next)\n      }\n    })\n  }, [themes, name])\n\n  if (!name) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,gBAAgB;AAC7B,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,QAAQ,OAAO,SAAS,OAAO,GAAG,QAAQ;AAChD,QAAM,eAAe,YAA0B,MAAM;AACnD,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,MAAM,OAAO;AAAA;AAEtC,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,iBAAa,eAAe,MAAM;AAClC,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,MAAM,OAAO;AACzC,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ;AAEZ,MAAI,CAAC,MAAM;AACT,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GAxDY;",
+  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName, Themes } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('no themes???', props)\n    return props.children\n  }\n  const name = props.name as string\n  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`\n  const theme = activeName ? themes[activeName] : null\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!theme) {\n      return null\n    }\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme(name, themes[name])\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    themeManager.setActiveTheme(activeName, theme)\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme(next, themes[next])\n        setParentName(next)\n      }\n    })\n  }, [themes, activeName])\n\n  if (!name || !theme) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,gBAAgB;AAC7B,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,aAAa,CAAC,OAAO,OAAO,QAAQ,SAAS,OAAO,GAAG,QAAQ;AACrE,QAAM,QAAQ,aAAa,OAAO,cAAc;AAChD,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,MAAM,OAAO;AAAA;AAEtC,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,iBAAa,eAAe,YAAY;AACxC,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,MAAM,OAAO;AACzC,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ;AAEZ,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GA/DY;",
   "names": []
 }

package/dist/views/ThemeInverse.js

@@ -15,7 +15,6 @@ const ThemeInverse = /* @__PURE__ */ __name((props) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const name = inversions[themeName] || inversions[defaultTheme] || null;
-  console.log("todo fixme invert", { themeName, defaultTheme, next: name });
   return /* @__PURE__ */ React.createElement(Theme, {
     name
   }, props.children);

package/dist/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  console.log('todo fixme invert', { themeName, defaultTheme, next: name })\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,UAAQ,IAAI,qBAAqB,EAAE,WAAW,cAAc,MAAM;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GALP;",
+  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GAJP;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "source": "src/index.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -16,11 +16,10 @@
   ],
   "dependencies": {
     "@tamagui/helpers": "^1.0.0-alpha.5",
-    "@tamagui/use-debounce": "^1.0.0-alpha.5",
+    "@tamagui/use-debounce": "^1.0.0-alpha.6",
     "@tamagui/use-force-update": "^1.0.0-alpha.5",
     "react": "*",
-    "react-dom": "*",
-    "react-native-safe-area-context": "^3.3.0"
+    "react-dom": "*"
   },
   "peerDependencies": {
     "react-native-web": "*"
@@ -37,5 +36,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "e12f14aa087c41ea5ba3933a05f33fada0be03c0"
+  "gitHead": "18a942d7a08109c8f5b8692a2adb20c69d56a7e1"
 }

package/src/createComponent.tsx

@@ -68,6 +68,44 @@ export function createComponent<A extends Object = DefaultProps>(
   // see onConfiguredOnce below which attaches a name then to this component
 
   const component = forwardRef<View, A>((props: any, forwardedRef) => {
+    const forceUpdate = useForceUpdate()
+    const features = useFeatures(props, { forceUpdate })
+    const manager = useContext(ThemeManagerContext)
+    const [state, set_] = useState(() => ({
+      hover: false,
+      press: false,
+      pressIn: false,
+      theme: manager.name,
+    }))
+    const set = (next: Partial<typeof state>) =>
+      set_((prev) => {
+        for (const key in next) {
+          if (prev[key] !== next[key]) {
+            return { ...prev, ...next }
+          }
+        }
+        return prev
+      })
+
+    // from react-native-web
+    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
+      Children.toArray(props.children).forEach((item) => {
+        if (typeof item === 'string') {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)
+        }
+      })
+    }
+
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false
+    const hostRef = useRef(null)
+
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames,
+    } = getSplitStyles(props, staticConfig, (manager.theme as any) || initialTheme)
+
     const {
       tag,
       hitSlop,
@@ -101,40 +139,19 @@ export function createComponent<A extends Object = DefaultProps>(
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
-      // TODO feature load layou hook
-      onLayout,
-    } = props
 
-    const forceUpdate = useForceUpdate()
-    const features = useFeatures(props, { forceUpdate })
-    const manager = useContext(ThemeManagerContext)
-    const [state, set_] = useState(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name,
-    }))
-    const set = (next: Partial<typeof state>) =>
-      set_((prev) => {
-        for (const key in next) {
-          if (prev[key] !== next[key]) {
-            return { ...prev, ...next }
-          }
-        }
-        return prev
-      })
+      accessible,
+      accessibilityRole,
 
-    // from react-native-web
-    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
-      Children.toArray(props.children).forEach((item) => {
-        if (typeof item === 'string') {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`)
-        }
-      })
-    }
+      // TODO feature load layout hook
+      onLayout,
+      ...viewProps
+    } = viewPropsIn
 
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false
-    const hostRef = useRef(null)
+    if (!isWeb) {
+      if (accessible) viewProps.accessible = accessible
+      if (accessibilityRole) viewProps.accessibilityRole = accessibilityRole
+    }
 
     if (isWeb) {
       // from react-native-web
@@ -160,12 +177,6 @@ export function createComponent<A extends Object = DefaultProps>(
 
     const isTracking = useRef(false)
 
-    const { viewProps, pseudos, style, classNames } = getSplitStyles(
-      props,
-      staticConfig,
-      (manager.theme as any) || initialTheme
-    )
-
     // hasEverHadEvents prevents repareting if you remove onPress or similar...
     const internal = useRef<{ isMounted: boolean; hasEverHadEvents?: boolean }>()
     if (!internal.current) {

package/src/createVariable.ts

@@ -11,6 +11,10 @@ export class Variable {
     this.name = name
     this.variable = isWeb ? `var(--${name})` : this.val
   }
+
+  toString() {
+    return isWeb ? this.variable : this.val
+  }
 }
 
 type VariableIn = { val: string | number; name: string }

package/src/helpers/getSplitStyles.tsx

@@ -28,7 +28,6 @@ export const getSplitStyles = (
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const viewProps: Record<string, any> = {}
   const style: any[] = []
-  const blacklistProps = isSplittingDefaultProps ? blacklistDefaultProps : blacklistFinalProps
 
   let pseudos: { hoverStyle?: ViewStyle; pressStyle?: ViewStyle } | null = null
   let cur: ViewStyle | null = null
@@ -130,8 +129,9 @@ export const getSplitStyles = (
         cur[key] = val
         continue
       }
-      // TODO this blacklist should be configurable + better set up
-      if (!blacklistProps[key]) {
+
+      // pass to view props
+      if (!staticConfig.variants || !(key in staticConfig.variants)) {
         viewProps[key] = val
       }
     }
@@ -181,19 +181,6 @@ const getSubStyle = (
   return styleOut
 }
 
-const blacklistDefaultProps = {
-  ...validStyles,
-  ...stylePropsText,
-}
-
-const blacklistFinalProps = {
-  ...blacklistDefaultProps,
-  tag: true,
-  debug: true,
-  space: true,
-  hitSlop: true,
-}
-
 const mapTransformKeys = {
   x: 'translateX',
   y: 'translateY',

package/src/helpers/isTamaguiElement.tsx

@@ -0,0 +1,5 @@
+import React, { isValidElement } from 'react'
+
+export const isTamaguiElement = (child: any): child is React.ReactElement => {
+  return isValidElement(child) && !!child.type['staticConfig']?.parsed
+}

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './helpers/isObj'
 export * from './helpers/getStylesAtomic'
 export * from './helpers/matchMedia'
 export * from './helpers/themeable'
+export * from './helpers/isTamaguiElement'
 
 export * from './hooks/useConstant'
 export * from './hooks/useMedia'
@@ -29,4 +30,3 @@ export * from './views/Theme'
 export * from './views/ThemeInverse'
 export * from './views/ThemeProvider'
 export * from './views/TextAncestorContext'
-export * from './views/SafeAreaProvider'

package/src/views/Theme.tsx

@@ -22,8 +22,12 @@ export const Theme = (props: ThemeProps) => {
     return props.children
   }
   const name = props.name as string
-  const theme = themes[name] || themes[`${name}-${parentName}`]
-  const themeManager = useConstant<ThemeManager>(() => {
+  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`
+  const theme = activeName ? themes[activeName] : null
+  const themeManager = useConstant<ThemeManager | null>(() => {
+    if (!theme) {
+      return null
+    }
     const manager = new ThemeManager()
     if (name) {
       manager.setActiveTheme(name, themes[name])
@@ -32,16 +36,19 @@ export const Theme = (props: ThemeProps) => {
   })
 
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme)
+    if (!themeManager) {
+      return
+    }
+    themeManager.setActiveTheme(activeName, theme)
     return parent.onChangeTheme((next) => {
       if (next) {
         themeManager.setActiveTheme(next, themes[next])
         setParentName(next)
       }
     })
-  }, [themes, name])
+  }, [themes, activeName])
 
-  if (!name) {
+  if (!name || !theme) {
     return props.children
   }
 

package/src/views/ThemeInverse.tsx

@@ -18,6 +18,5 @@ export const ThemeInverse = (props: { children: any }) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const name = inversions[themeName] || inversions[defaultTheme] || null
-  console.log('todo fixme invert', { themeName, defaultTheme, next: name })
   return <Theme name={name}>{props.children}</Theme>
 }

package/types.d.ts

@@ -11,6 +11,7 @@ export declare class Variable {
 	val: string | number;
 	variable: string | number;
 	constructor({ val, name }: VariableIn);
+	toString(): string | number;
 }
 export declare type VariableIn = {
 	val: string | number;
@@ -491,6 +492,7 @@ export declare const themeable: ThemeableHOC;
 export interface ThemeableHOC {
 	<R extends ReactElement<any, any> | null, P extends ThemeableProps = {}>(component: (props: P) => R): (props: P) => R;
 }
+export declare const isTamaguiElement: (child: any) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function useConstant<T>(fn: () => T): T;
 export declare const mediaState: {
 	[key in keyof MediaQueryState]: boolean;
@@ -549,9 +551,5 @@ export declare const ThemeInverse: (props: {
 }) => JSX.Element;
 export declare const TextAncestorContext: any;
 export declare const TextAncestorProvider: (props: any) => any;
-export declare const SafeAreaProvider: ({ initialWindowMetrics, children, }: {
-	children?: any;
-	initialWindowMetrics?: any;
-}) => JSX.Element;
 
 export {};

package/src/views/SafeAreaProvider.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import {
-  Metrics,
-  SafeAreaProvider as RNSafeAreaProvider,
-  initialWindowMetrics as defaultInitialWindowMetrics,
-} from 'react-native-safe-area-context'
-
-let defaultMetrics: Metrics | null = null
-
-export const SafeAreaProvider = ({
-  initialWindowMetrics,
-  children,
-}: {
-  children?: any
-  initialWindowMetrics?: any
-}) => {
-  if (!initialWindowMetrics && !defaultMetrics) {
-    defaultMetrics = Platform.select({
-      web: {
-        frame: { x: 0, y: 0, width: 0, height: 0 },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 },
-      },
-      default: defaultInitialWindowMetrics,
-    })
-  }
-
-  return (
-    <RNSafeAreaProvider initialMetrics={initialWindowMetrics ?? defaultMetrics}>
-      {children}
-    </RNSafeAreaProvider>
-  )
-}