@tamagui/core 1.0.0-alpha.0 → 1.0.0-alpha.12

package/dist/views/ThemeManagerContext.js

@@ -4,16 +4,22 @@ import { createContext } from "react";
 class ThemeManager {
   constructor() {
     this.name = "light";
+    this.parentName = null;
     this.keys = new Map();
     this.listeners = new Map();
-    this.callbacks = new Set();
+    this.themeListeners = new Set();
     this.theme = null;
   }
-  setActiveTheme(name, theme) {
+  setActiveTheme({
+    name,
+    theme,
+    parentName
+  }) {
     if (name === this.name)
       return;
     this.name = name;
     this.theme = theme;
+    this.parentName = parentName || null;
     this.update();
   }
   track(uuid, keys) {
@@ -30,12 +36,12 @@ class ThemeManager {
         this.listeners.get(uuid)?.();
       }
     }
-    this.callbacks.forEach((cb) => cb(this.name));
+    this.themeListeners.forEach((cb) => cb(this.name, this));
   }
   onChangeTheme(cb) {
-    this.callbacks.add(cb);
+    this.themeListeners.add(cb);
     return () => {
-      this.callbacks.delete(cb);
+      this.themeListeners.delete(cb);
     };
   }
   onUpdate(uuid, cb) {

package/dist/views/ThemeManagerContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/views/ThemeManagerContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  callbacks = new Set<Function>()\n  theme = null\n\n  setActiveTheme(name: string | null, theme?: any) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.callbacks.forEach((cb) => cb(this.name))\n  }\n\n  onChangeTheme(cb: (name: string | null) => void) {\n    this.callbacks.add(cb)\n    return () => {\n      this.callbacks.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
-  "mappings": ";;AAAA;AAEO,mBAAmB;AAAA,EAAnB,cAFP;AAGE,gBAAsB;AACtB,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,qBAAY,IAAI;AAChB,iBAAQ;AAAA;AAAA,EAER,eAAe,MAAqB,OAAa;AAC/C,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,SAAK,UAAU,QAAQ,CAAC,OAAO,GAAG,KAAK;AAAA;AAAA,EAGzC,cAAc,IAAmC;AAC/C,SAAK,UAAU,IAAI;AACnB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AAAA;AAAA;AAAA,EAI1B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AA1ChB;AA+CA,MAAM,sBAAsB,cAA4B,IAAI;",
+  "sourcesContent": ["import { createContext } from 'react'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  parentName: string | null = null\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  theme = null\n\n  setActiveTheme({\n    name,\n    theme,\n    parentName,\n  }: {\n    parentName?: string | null\n    name: string | null\n    theme?: any\n  }) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.parentName = parentName || null\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
+  "mappings": ";;AAAA;AAIO,mBAAmB;AAAA,EAAnB,cAJP;AAKE,gBAAsB;AACtB,sBAA4B;AAC5B,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,0BAAiB,IAAI;AACrB,iBAAQ;AAAA;AAAA,EAER,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,KAKC;AACD,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK,aAAa,cAAc;AAChC,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,SAAK,eAAe,QAAQ,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA;AAAA,EAGpD,cAAc,IAAmB;AAC/B,SAAK,eAAe,IAAI;AACxB,WAAO,MAAM;AACX,WAAK,eAAe,OAAO;AAAA;AAAA;AAAA,EAI/B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AApDhB;AAyDA,MAAM,sBAAsB,cAA4B,IAAI;",
   "names": []
 }

package/package.json

@@ -1,25 +1,32 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.12",
   "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "typings": "types.d.ts",
+  "main": "dist/cjs",
+  "module": "dist",
+  "typings": "types",
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch"
   },
+  "files": [
+    "types",
+    "dist",
+    "src"
+  ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.0",
+    "@tamagui/helpers": "^1.0.0-alpha.12",
+    "@tamagui/ow": "^0.28.1",
+    "@tamagui/use-debounce": "^1.0.0-alpha.12",
+    "@tamagui/use-force-update": "^1.0.0-alpha.12",
     "react": "*",
-    "react-dom": "*",
-    "react-native-safe-area-context": "^3.3.0"
+    "react-dom": "*"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.0",
+    "@tamagui/build": "^1.0.0-alpha.12",
     "@types/react": "^17.0.35",
     "esbuild": "^0.11.20",
     "typescript": "^4.4.4"
@@ -29,5 +36,6 @@
   },
   "engines": {
     "node": ">=16"
-  }
+  },
+  "gitHead": "d50261a4e08d2212395af4f2d8f49555fc780c3e"
 }

package/src/constants/platform.ts

@@ -1,7 +1,7 @@
 import { useEffect, useLayoutEffect } from 'react'
 import { Platform } from 'react-native'
 
-export const isWeb = process.env.TAMAGUI_TARGET !== 'web' ? false : Platform?.OS === 'web'
+export const isWeb = process.env.TAMAGUI_TARGET === 'web' ? true : Platform?.OS === 'web'
 export const isSSR = isWeb && typeof window === 'undefined'
 export const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect
 export const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')

package/src/createComponent.tsx

@@ -1,4 +1,5 @@
 import { concatClassName, stylePropsView } from '@tamagui/helpers'
+import { useForceUpdate } from '@tamagui/use-force-update'
 import React, {
   Children,
   Fragment,
@@ -20,7 +21,6 @@ import { addStylesUsingClassname, useStylesAsClassname } from './helpers/addStyl
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
 import { getSplitStyles } from './helpers/getSplitStyles'
 import { useFeatures } from './hooks/useFeatures'
-import { useForceUpdate } from './hooks/useForceUpdate'
 import { usePressable } from './hooks/usePressable'
 import {
   SpaceTokens,
@@ -68,6 +68,46 @@ 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 theme = (manager.theme as any) || initialTheme
+
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames,
+    } = getSplitStyles(props, staticConfig, theme)
+
     const {
       tag,
       hitSlop,
@@ -101,40 +141,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 +179,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) {
@@ -228,6 +241,7 @@ export function createComponent<A extends Object = DefaultProps>(
           ]
         : [defaultsClassName, props.className, classNames, stylesClassNames]
 
+      // @ts-ignore we are optimizing using arguments
       const className = concatClassName(...classList)
       if (process.env.NODE_ENV === 'development') {
         if (props['debug']) {
@@ -465,7 +479,7 @@ export function createComponent<A extends Object = DefaultProps>(
     } else {
       if (!hasWarnedOnce) {
         hasWarnedOnce = true
-        console.log('⚠️ we need to account for default styles for media queries')
+        console.log('⚠️ TODO account for default styles for media queries')
       }
     }
     // @ts-ignore
@@ -488,10 +502,14 @@ export function createComponent<A extends Object = DefaultProps>(
   const res = component as any as StaticComponent<A, void>
 
   // add extractable HoC
-  res['extractable'] = (Component: any) => {
+  res['extractable'] = (Component: any, conf?: StaticConfig) => {
     Component['staticConfig'] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component.defaultProps,
+      defaultProps: {
+        ...Component.defaultProps,
+        ...conf?.defaultProps,
+      },
     })
     return Component
   }

package/src/createFont.ts

@@ -1,6 +1,11 @@
+import { validateFont } from './helpers/validate'
 import { GenericFont } from './types'
 
 export const createFont = <A extends GenericFont>(font: A): A => {
+  if (process.env.NODE_ENV === 'development') {
+    validateFont(font)
+  }
+
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 

package/src/createTamagui.ts

@@ -2,6 +2,7 @@ import { getStyleRules } from '@tamagui/helpers'
 
 import { Variable, createVariable, isVariable } from './createVariable'
 import { createTamaguiProvider } from './helpers/createTamaguiProvider'
+import { validateConfig } from './helpers/validate'
 import { configureMedia } from './hooks/useMedia'
 import {
   CreateTamaguiConfig,
@@ -27,7 +28,9 @@ export type CreateTamaguiProps = TamaguiProviderProps &
 let conf: TamaguiInternalConfig | null
 
 export const getHasConfigured = () => !!conf
-export const getTamaguiConfig = () => conf!
+
+export const getTamagui = () => conf!
+export const getTokens = () => conf!.tokensParsed
 
 type ConfigListener = (conf: TamaguiInternalConfig) => void
 const configListeners = new Set<ConfigListener>()
@@ -46,6 +49,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 ): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>
   ? TamaguiInternalConfig<A, B, C, D>
   : unknown {
+  if (process.env.NODE_ENV === 'development') {
+    // config is re-run by the @tamagui/static, dont double validate
+    if (!config['parsed']) {
+      validateConfig(config)
+    }
+  }
   // test env loads a few times as it runs diff tests
   if (conf) {
     console.warn('Called createTamagui twice! Should never do so')
@@ -157,6 +166,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     themeConfig,
     themeParsed,
     tokensParsed,
+    parsed: true,
     getCSS() {
       return `${themeConfig.css}\n${[...getStyleRules()].join('\n')}`
     },

package/src/createTokens.ts

@@ -1,9 +1,14 @@
 import { Variable, createVariable } from './createVariable'
+import { validateTokens } from './helpers/validate'
 import { CreateTokens } from './types'
 
-// tokens.color.dark.red ===>{ var: `color-dark-red`, val: '' }
+// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  if (process.env.NODE_ENV === 'development') {
+    validateTokens(tokens)
+  }
+
   return setupTokens(tokens) as any
 }
 

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/createPropMapper.ts

@@ -1,4 +1,5 @@
-import { getTamaguiConfig } from '../createTamagui'
+import { isWeb } from '../constants/platform'
+import { getTamagui } from '../createTamagui'
 import { Variable } from '../createVariable'
 import { StaticConfig, TamaguiInternalConfig } from '../types'
 import { isObj } from './isObj'
@@ -9,7 +10,7 @@ export const createPropMapper = (c: StaticConfig) => {
   const defaultProps = c.defaultProps || {}
 
   return (key: string, value: any, theme: any, props: any) => {
-    const conf = getTamaguiConfig()
+    const conf = getTamagui()
     if (!conf) {
       console.trace('no conf! err')
       return
@@ -37,7 +38,7 @@ export const createPropMapper = (c: StaticConfig) => {
           : val
 
       if (isObj(res)) {
-        resolveTokens(res, conf, fontFamily)
+        resolveTokens(res, conf, theme, fontFamily)
       }
 
       return res
@@ -53,7 +54,7 @@ export const createPropMapper = (c: StaticConfig) => {
 
     if (value && value[0] === '$') {
       shouldReturn = true
-      value = getToken(key, value, conf, fontFamily)
+      value = getToken(key, value, conf, theme, fontFamily)
     }
 
     if (value instanceof Variable) {
@@ -69,19 +70,19 @@ export const createPropMapper = (c: StaticConfig) => {
   }
 }
 
-const resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {
+const resolveTokens = (res: any, conf: TamaguiInternalConfig, theme: any, fontFamily: any) => {
   for (const rKey in res) {
     const fKey = conf.shorthands[rKey] || rKey
     const val = res[rKey]
     if (val instanceof Variable) {
       res[fKey] = val.variable
     } else if (typeof val === 'string') {
-      const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val
+      const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily) : val
       res[fKey] = fVal
     } else {
       if (isObj(val)) {
         // for things like shadowOffset which is a sub-object
-        resolveTokens(val, conf, fontFamily)
+        resolveTokens(val, conf, theme, fontFamily)
       }
       // nullish values cant be tokens so need no exrta parsing
     }
@@ -92,10 +93,17 @@ const getToken = (
   key: string,
   value: string,
   { tokensParsed, themeParsed }: TamaguiInternalConfig,
+  theme: any,
   fontFamily: string | undefined = '$body'
 ) => {
   if (themeParsed[value]) {
-    return themeParsed[value].variable
+    if (isWeb && themeParsed[value].variable) {
+      return themeParsed[value].variable
+    } else {
+      if (value && value[0] === '$') {
+        return theme[`${value.slice(1)}`]?.val || themeParsed[value]?.val
+      }
+    }
   }
   let valOrVar: any
   if (key === 'fontFamily') {

package/src/helpers/getSplitStyles.tsx

@@ -8,7 +8,7 @@ import {
 import { ViewStyle } from 'react-native'
 
 import { isWeb } from '../constants/platform'
-import { mediaQueryConfig } from '../hooks/useMedia'
+import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
 import { StaticConfigParsed, ThemeObject } from '../types'
 import { createMediaStyle } from './createMediaStyle'
 import { fixNativeShadow } from './fixNativeShadow'
@@ -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
@@ -54,14 +53,15 @@ export const getSplitStyles = (
       const mediaProps = { ...props, ...valInit }
       // TODO media + hover
       const mediaStyle = getSubStyle(valInit, staticConfig, theme, props)
-      const mediaStyles = getStylesAtomic(mediaStyle)
-      if (process.env.NODE_ENV === 'development') {
-        if (props['debug']) {
-          console.log('mediaStyles', keyInit, { mediaProps, mediaStyle, mediaStyles })
+
+      if (isWeb) {
+        const mediaStyles = getStylesAtomic(mediaStyle)
+        if (process.env.NODE_ENV === 'development') {
+          if (props['debug']) {
+            console.log('mediaStyles', keyInit, { mediaProps, mediaStyle, mediaStyles })
+          }
         }
-      }
-      for (const style of mediaStyles) {
-        if (isWeb) {
+        for (const style of mediaStyles) {
           const out = createMediaStyle(style, mediaKey, mediaQueryConfig)
           classNames = classNames || []
           classNames.push(out.identifier)
@@ -70,8 +70,10 @@ export const getSplitStyles = (
           if (process.env.NODE_ENV === 'development' && props['debug']) {
             console.log('mediaProp', style.identifier, out, mediaProps, mediaStyle, mediaStyles)
           }
-        } else {
-          console.log('TODO native media style logic')
+        }
+      } else {
+        if (mediaState[mediaKey]) {
+          style.push(mediaStyle)
         }
       }
       continue
@@ -130,8 +132,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 +184,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/helpers/matchMedia.native.ts

@@ -1,3 +1,6 @@
 import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
 
 export const matchMedia = (media: string) => new MediaQueryList(media)
+
+// @ts-ignore
+globalThis['matchMedia'] = matchMedia

package/src/helpers/matchMedia.ts

@@ -2,7 +2,15 @@ export const matchMedia =
   (typeof window !== 'undefined' && window.matchMedia) ||
   (function matchMediaFallback(query: string) {
     return {
-      addListener() {},
+      addListener() {
+        if (
+          process.env.NODE_ENV === 'development' &&
+          !process.env.IS_STATIC &&
+          process.env.TAMAGUI_TARGET !== 'web'
+        ) {
+          console.log('warning: matchMedia not loading! Is native picking up .native.js files?')
+        }
+      },
       removeListener() {},
       matches: false,
     }

package/src/helpers/validate.ts

@@ -0,0 +1,59 @@
+// published a patched version that works on native
+import ow from '@tamagui/ow'
+
+export const validateConfig = (conf: any) => {
+  if (!conf) {
+    console.warn('no conf?')
+    return
+  }
+  try {
+    ow(conf, validConfig)
+  } catch (err: any) {
+    console.log('Given config:\n', JSON.stringify(conf, null, 2))
+    throw err
+  }
+}
+
+const validConfig = ow.object.exactShape({
+  defaultTheme: ow.optional.string,
+  disableRootThemeClass: ow.optional.boolean,
+  shorthands: ow.optional.object.valuesOfType(ow.string),
+  themes: ow.object.valuesOfType(ow.object),
+  tokens: ow.object.valuesOfType(ow.object),
+  media: ow.object.valuesOfType(ow.object),
+})
+
+const validFont = ow.object.exactShape({
+  family: ow.string,
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+  weight: ow.object.nonEmpty.valuesOfType(ow.string),
+  letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),
+})
+
+const validTokens = ow.object.exactShape({
+  font: ow.object.valuesOfType(validFont),
+  size: ow.object.nonEmpty.valuesOfType(ow.number),
+  space: ow.object.nonEmpty.valuesOfType(ow.number),
+  zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
+  radius: ow.object.nonEmpty.valuesOfType(ow.number),
+  color: ow.object.nonEmpty.valuesOfType(ow.string),
+})
+
+export const validateTokens = (tokens: any) => {
+  try {
+    ow(tokens, validTokens)
+  } catch (err: any) {
+    console.log('Given tokens:\n', JSON.stringify(tokens, null, 2))
+    throw err
+  }
+}
+
+export const validateFont = (font: any) => {
+  try {
+    ow(font, validFont)
+  } catch (err: any) {
+    console.log('Given font:\n', JSON.stringify(font, null, 2))
+    throw err
+  }
+}