@tamagui/web 2.7.7 → 3.0.0-beta.643.1

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

@@ -2,17 +2,19 @@ import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { getSetting } from "../config.native.js";
 import { Theme } from "./Theme.native.js";
-var ThemeProvider = function (props) {
-  "use no memo";
 
-  var forceClassName = getSetting("addThemeClassName") === void 0;
-  return /* @__PURE__ */jsx(Theme, {
-    className: props.className,
-    name: props.defaultTheme,
-    forceClassName,
-    _isRoot: useId,
-    children: props.children
-  });
+var ThemeProvider = function(props) {
+	"use no memo";
+	var addThemeClassName = props.isSubtreeRoot ? false : getSetting("addThemeClassName");
+	var forceClassName = props.isSubtreeRoot || addThemeClassName === void 0;
+	return /* @__PURE__ */ jsx(Theme, {
+		className: props.className,
+		name: props.defaultTheme,
+		forceClassName,
+		_isRoot: useId,
+		children: props.children
+	});
 };
+
 export { ThemeProvider };
 //# sourceMappingURL=ThemeProvider.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","useId","getSetting","Theme","ThemeProvider","props","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["ThemeProvider.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { useId } from \"react\";\nimport { getSetting } from \"../config\";\nimport { Theme } from \"./Theme\";\n\nvar ThemeProvider = function(props) {\n\t\"use no memo\";\n\tvar forceClassName = getSetting(\"addThemeClassName\") === void 0;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tclassName: props.className,\n\t\tname: props.defaultTheme,\n\t\tforceClassName,\n\t\t_isRoot: useId,\n\t\tchildren: props.children\n\t});\n};\n\nexport { ThemeProvider };"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK,QAAQ,OAAO;AAC7B,SAASC,UAAU,QAAQ,qBAAW;AACtC,SAASC,KAAK,QAAQ,mBAAS;AAE/B,IAAIC,aAAa,GAAG,SAAAA,CAASC,KAAK,EAAE;EACnC,aAAa;;EACb,IAAIC,cAAc,GAAGJ,UAAU,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC;EAC/D,OAAO,eAAgBF,GAAG,CAACG,KAAK,EAAE;IACjCI,SAAS,EAAEF,KAAK,CAACE,SAAS;IAC1BC,IAAI,EAAEH,KAAK,CAACI,YAAY;IACxBH,cAAc;IACdI,OAAO,EAAET,KAAK;IACdU,QAAQ,EAAEN,KAAK,CAACM;EACjB,CAAC,CAAC;AACH,CAAC;AAED,SAASP,aAAa","ignoreList":[]}
+{"version":3,"file":"ThemeProvider.native.js","names":[],"sources":["esm/views/ThemeProvider.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { useId } from \"react\";\nimport { getSetting } from \"../config\";\nimport { Theme } from \"./Theme\";\n\nvar ThemeProvider = function(props) {\n\t\"use no memo\";\n\tvar addThemeClassName = props.isSubtreeRoot ? false : getSetting(\"addThemeClassName\");\n\tvar forceClassName = props.isSubtreeRoot || addThemeClassName === void 0;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tclassName: props.className,\n\t\tname: props.defaultTheme,\n\t\tforceClassName,\n\t\t_isRoot: useId,\n\t\tchildren: props.children\n\t});\n};\n\nexport { ThemeProvider };"],"mappings":";;;;;;AAKA,IAAI,gBAAgB,SAAS,OAAO;CACnC;CACA,IAAI,oBAAoB,MAAM,gBAAgB,QAAQ,WAAW,mBAAmB;CACpF,IAAI,iBAAiB,MAAM,iBAAiB,sBAAsB,KAAK;CACvE,OAAuB,oBAAI,OAAO;EACjC,WAAW,MAAM;EACjB,MAAM,MAAM;EACZ;EACA,SAAS;EACT,UAAU,MAAM;CACjB,CAAC;AACF"}

package/dist/esm/views/View.mjs

@@ -1,8 +1,12 @@
 import { validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.mjs";
-const View = createComponent({
-  acceptsClassName: true,
-  validStyles
-});
-export { View };
+import { setComponentDisplayName } from "../helpers/componentDisplayName.mjs";
+
+const viewStaticConfig = {
+	acceptsClassName: true,
+	validStyles
+};
+const View = setComponentDisplayName(createComponent(viewStaticConfig), "View");
+
+export { View, viewStaticConfig };
 //# sourceMappingURL=View.mjs.map

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

@@ -1 +1 @@
-{"version":3,"names":["validStyles","createComponent","View","acceptsClassName"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,eAAA,QAAuB;AAczB,MAAMC,IAAA,GAAOD,eAAA,CAKlB;EACAE,gBAAA,EAAkB;EAClBH;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"View.js","names":[],"sources":["esm/views/View.js"],"sourcesContent":["import { validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { setComponentDisplayName } from \"../helpers/componentDisplayName\";\nconst viewStaticConfig = {\n  acceptsClassName: true,\n  validStyles\n};\nconst View = setComponentDisplayName(\n  createComponent(\n    viewStaticConfig\n  ),\n  \"View\"\n);\nexport {\n  View,\n  viewStaticConfig\n};\n//# sourceMappingURL=View.js.map\n"],"mappings":";;;;;AAGA,MAAM,mBAAmB;CACvB,kBAAkB;CAClB;AACF;AACA,MAAM,OAAO,wBACX,gBACE,gBACF,GACA,MACF"}

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

@@ -1,8 +1,12 @@
 import { validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.native.js";
-var View = createComponent({
-  acceptsClassName: true,
-  validStyles
-});
-export { View };
+import { setComponentDisplayName } from "../helpers/componentDisplayName.native.js";
+
+var viewStaticConfig = {
+	acceptsClassName: true,
+	validStyles
+};
+var View = setComponentDisplayName(createComponent(viewStaticConfig), "View");
+
+export { View, viewStaticConfig };
 //# sourceMappingURL=View.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["validStyles","createComponent","View","acceptsClassName"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,eAAA,QAAuB;AAczB,IAAAC,IAAM,GAAAD,eAAO;EAMlBE,gBAAA,EAAkB;EAClBH;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"View.native.js","names":[],"sources":["esm/views/View.native.js"],"sourcesContent":["import { validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { setComponentDisplayName } from \"../helpers/componentDisplayName\";\nvar viewStaticConfig = {\n  acceptsClassName: true,\n  validStyles\n};\nvar View = setComponentDisplayName(createComponent(viewStaticConfig), \"View\");\nexport {\n  View,\n  viewStaticConfig\n};\n//# sourceMappingURL=View.js.map\n"],"mappings":";;;;;AAGA,IAAI,mBAAmB;CACrB,kBAAkB;CAClB;AACF;AACA,IAAI,OAAO,wBAAwB,gBAAgB,gBAAgB,GAAG,MAAM"}

package/internal-runtime/index.cjs

@@ -0,0 +1,2 @@
+// compat with tamagui static compiler
+Object.assign(module.exports, require('../dist/cjs/internal-runtime.cjs'))

package/internal-runtime/index.js

@@ -0,0 +1,4 @@
+// compat with bundlers that resolve this directory instead of the package `exports`
+// map (metro without package exports). ESM so the resolved graph matches what the
+// exports map hands a modern bundler, instead of downgrading it to the CJS build.
+export * from '../dist/esm/internal-runtime.mjs'

package/internal-runtime/index.native.js

@@ -0,0 +1,2 @@
+// metro without package exports, native: the react-native artifact
+export * from '../dist/esm/internal-runtime.native.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -15,6 +15,15 @@
   "sideEffects": [
     "*.css"
   ],
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "inject-styles",
+    "inject-styles.cjs",
+    "internal-runtime",
+    "reset.css"
+  ],
   "main": "dist/cjs",
   "module": "dist/esm",
   "types": "./types/index.d.ts",
@@ -30,6 +39,27 @@
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
     },
+    "./dom": {
+      "react-native": {
+        "types": "./types/dom/index.native.d.ts",
+        "default": "./dist/esm/dom/index.native.js"
+      },
+      "types": "./types/dom/index.d.ts",
+      "browser": "./dist/esm/dom/index.mjs",
+      "module": "./dist/esm/dom/index.mjs",
+      "import": "./dist/esm/dom/index.mjs",
+      "require": "./dist/cjs/dom/index.cjs",
+      "default": "./dist/esm/dom/index.mjs"
+    },
+    "./internal-runtime": {
+      "types": "./types/internal-runtime.d.ts",
+      "react-native": "./dist/esm/internal-runtime.native.js",
+      "browser": "./dist/esm/internal-runtime.mjs",
+      "module": "./dist/esm/internal-runtime.mjs",
+      "import": "./dist/esm/internal-runtime.mjs",
+      "require": "./dist/cjs/internal-runtime.cjs",
+      "default": "./dist/esm/internal-runtime.mjs"
+    },
     "./inject-styles": {
       "types": "./types/inject-styles.d.ts",
       "react-native": "./dist/esm/inject-styles.mjs",
@@ -51,26 +81,28 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.7.7",
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/is-equal-shallow": "2.7.7",
-    "@tamagui/native": "2.7.7",
-    "@tamagui/normalize-css-color": "2.7.7",
-    "@tamagui/timer": "2.7.7",
-    "@tamagui/types": "2.7.7",
-    "@tamagui/use-did-finish-ssr": "2.7.7",
-    "@tamagui/use-event": "2.7.7",
-    "@tamagui/use-force-update": "2.7.7"
+    "@tamagui/compose-refs": "3.0.0-beta.643.1",
+    "@tamagui/constants": "3.0.0-beta.643.1",
+    "@tamagui/dom": "3.0.0-beta.643.1",
+    "@tamagui/helpers": "3.0.0-beta.643.1",
+    "@tamagui/is-equal-shallow": "3.0.0-beta.643.1",
+    "@tamagui/native": "3.0.0-beta.643.1",
+    "@tamagui/normalize-css-color": "3.0.0-beta.643.1",
+    "@tamagui/style-grammar": "3.0.0-beta.643.1",
+    "@tamagui/timer": "3.0.0-beta.643.1",
+    "@tamagui/types": "3.0.0-beta.643.1",
+    "@tamagui/use-did-finish-ssr": "3.0.0-beta.643.1",
+    "@tamagui/use-event": "3.0.0-beta.643.1",
+    "@tamagui/use-force-update": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",
     "react-dom": "*",
-    "react-native": "0.83.2",
-    "typescript": "~5.9.2",
+    "react-native": "0.86.2",
+    "typescript": "~6.0.3",
     "vitest": "4.0.4"
   },
   "peerDependencies": {

package/reset.css

@@ -40,15 +40,7 @@ button,
   all: unset;
 }
 
-p,
-input,
-textarea,
-button,
-ul,
-ol,
-li,
-pre,
-dialog {
+:where(p, input, textarea, button, ul, ol, li, pre, dialog) {
   all: unset;
   box-sizing: border-box;
 }

package/src/_withNativeStyle.tsx

@@ -0,0 +1,84 @@
+import { setRef } from '@tamagui/compose-refs'
+import React, { useCallback, useContext, useRef } from 'react'
+import { _withStableStyle } from './_withStableStyle'
+import {
+  getNativeStyleEngine,
+  linkNativeStyleMapping,
+  resolveNativeStyleMapping,
+  type NativeStyleEngineLinkHandle,
+  type NativeStyleThemeMapping,
+} from './helpers/nativeStyleEngine'
+import { getThemeState, ThemeStateContext } from './hooks/useThemeState'
+
+/** internal: emitted by the native compiler when experimental.nativeFastPath is on */
+export const _withNativeStyle = (
+  Component: any,
+  baseStyle: Record<string, unknown>,
+  themeStyleKeys: NativeStyleThemeMapping
+) => {
+  const Fallback = _withStableStyle(
+    Component,
+    (theme) => {
+      const themedStyle: Record<string, unknown> = {}
+      for (const styleKey in themeStyleKeys) {
+        themedStyle[styleKey] = theme[themeStyleKeys[styleKey]]?.get()
+      }
+      return [baseStyle, themedStyle]
+    },
+    true,
+    false
+  )
+
+  const Native = React.memo(function NativeStyleView({
+    _scopeId,
+    ...props
+  }: {
+    _scopeId: string
+    [key: string]: any
+  }) {
+    const { ref, _expressions: _ignoredExpressions, ...rest } = props
+    const link = useRef<NativeStyleEngineLinkHandle | null>(null)
+    const themeState = getThemeState(_scopeId)
+    const stateName = themeState?.name
+    const theme = themeState?.theme
+    const hostRef = useCallback(
+      (host: unknown) => {
+        link.current?.unlink()
+        link.current = null
+        setRef(ref, host)
+        if (host && stateName && theme) {
+          link.current = linkNativeStyleMapping(
+            host,
+            baseStyle,
+            themeStyleKeys,
+            _scopeId,
+            stateName,
+            theme
+          )
+        }
+      },
+      [ref, _scopeId, stateName, theme]
+    )
+    const stateStyle =
+      stateName && theme
+        ? resolveNativeStyleMapping(themeStyleKeys, stateName, theme)
+        : undefined
+
+    if (process.env.NODE_ENV === 'development' && (!stateName || !theme)) {
+      throw new Error(
+        `[@tamagui/core] native fast path cannot resolve theme ${JSON.stringify(stateName)}`
+      )
+    }
+
+    return <Component ref={hostRef} style={[baseStyle, stateStyle]} {...rest} />
+  })
+
+  return React.memo(function NativeStyleBoundary(props: any) {
+    const scopeId = useContext(ThemeStateContext)
+    return getNativeStyleEngine() && scopeId ? (
+      <Native {...props} _scopeId={scopeId} />
+    ) : (
+      <Fallback {...props} />
+    )
+  })
+}

package/src/_withStableStyle.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import { getConfigMaybe } from './config'
+import { getVariable } from './createVariable'
 import { useMedia } from './hooks/useMedia'
 import { useTheme } from './hooks/useTheme'
 import { ThemeStateContext } from './hooks/useThemeState'
@@ -8,6 +9,7 @@ import { ThemeStateContext } from './hooks/useThemeState'
 
 const EMPTY_EXPRESSIONS: any[] = []
 const EMPTY_THEME = {}
+const FALLBACK_THEME_CACHE = new WeakMap<object, Record<string, any>>()
 
 export const _withStableStyle = (
   Component: any,
@@ -15,54 +17,70 @@ export const _withStableStyle = (
   hasThemeKeys?: boolean,
   hasMediaKeys?: boolean
 ) =>
-  React.memo(
-    React.forwardRef((props: any, ref) => {
-      const { _expressions = EMPTY_EXPRESSIONS, ...rest } = props
+  React.memo(function WithStableStyle(props: any) {
+    const { ref, ...propsWithoutRef } = props
+    const { _expressions = EMPTY_EXPRESSIONS, ...rest } = propsWithoutRef
 
-      const parentId = useContext(ThemeStateContext)
+    const parentId = useContext(ThemeStateContext)
 
-      // compile-time constants per wrapper, so conditional hooks are stable
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const theme = hasThemeKeys && parentId ? useTheme() : null
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const media = hasMediaKeys ? useMedia() : null
+    // compile-time constants per wrapper, so conditional hooks are stable
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const theme = hasThemeKeys && parentId ? useTheme() : null
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const media = hasMediaKeys ? useMedia() : null
 
-      const resolvedExpressions = media
-        ? _expressions.map((expr: any) =>
-            Array.isArray(expr)
-              ? !!(media[expr[0]] && expr[1])
-              : typeof expr === 'string'
-                ? media[expr]
-                : expr
-          )
-        : _expressions
+    const resolvedExpressions = media
+      ? _expressions.map((expr: any) =>
+          // ['gtLg', cond] needs the media query and the runtime condition
+          Array.isArray(expr)
+            ? !!(media[expr[0]] && expr[1])
+            : typeof expr === 'string'
+              ? media[expr]
+              : expr
+        )
+      : _expressions
 
-      let resolvedTheme: any = theme || EMPTY_THEME
-      if (hasThemeKeys && !parentId) {
-        // monorepo edge case: ThemeStateContext is from a different instance
-        const config = getConfigMaybe()
-        const themes = config?.themes
-        if (themes) {
-          for (const k in themes) {
-            resolvedTheme = themes.light || themes.dark || themes[k]
-            break
+    let resolvedTheme: any = theme || EMPTY_THEME
+    if (hasThemeKeys && !parentId) {
+      // monorepo edge case: ThemeStateContext is from a different instance
+      const config = getConfigMaybe()
+      const themes = config?.themes
+      if (themes) {
+        for (const k in themes) {
+          const fallbackTheme = themes.light || themes.dark || themes[k]
+          let gettableTheme = FALLBACK_THEME_CACHE.get(fallbackTheme)
+          if (!gettableTheme) {
+            gettableTheme = {}
+            for (const key in fallbackTheme) {
+              const value = fallbackTheme[key]
+              gettableTheme[key] =
+                typeof (value as any)?.get === 'function'
+                  ? value
+                  : {
+                      ...(value && typeof value === 'object' ? value : { val: value }),
+                      get: () => getVariable(value),
+                    }
+            }
+            FALLBACK_THEME_CACHE.set(fallbackTheme, gettableTheme)
           }
+          resolvedTheme = gettableTheme
+          break
         }
-        if (process.env.NODE_ENV === 'development') {
-          console.warn(
-            '[@tamagui] _withStableStyle: no ThemeStateContext found. ' +
-              'This usually means duplicate tamagui instances in a monorepo. ' +
-              'Falling back to default theme from config.'
-          )
-        }
       }
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          '[@tamagui] _withStableStyle: no ThemeStateContext found. ' +
+            'This usually means duplicate tamagui instances in a monorepo. ' +
+            'Falling back to default theme from config.'
+        )
+      }
+    }
 
-      return (
-        <Component
-          ref={ref}
-          style={createStyle(resolvedTheme, resolvedExpressions)}
-          {...rest}
-        />
-      )
-    })
-  )
+    return (
+      <Component
+        ref={ref}
+        style={createStyle(resolvedTheme, resolvedExpressions)}
+        {...rest}
+      />
+    )
+  })

package/src/config.ts

@@ -7,8 +7,9 @@ import type {
   TamaguiInternalConfig,
   Token,
   Tokens,
-  TokensMerged,
+  TokensParsed,
 } from './types'
+import { formatDiagnostic } from './helpers/formatDiagnostic'
 
 export type StyleCompat = 'legacy' | 'react-native' | 'web'
 
@@ -93,16 +94,21 @@ export const setConfigFont = (name: string, font: any, fontParsed: any) => {
     if (!config) throw new Error(haventCalledErrorMessage)
   }
   config!.fonts[name] = font
-  config!.fontsParsed[`$${name}`] = fontParsed
+  config!.fontsParsed[name] = fontParsed
 }
 
 export const getConfig = () => {
   const config = getConfigFromGlobalOrLocal()
   if (!config) {
     throw new Error(
-      process.env.NODE_ENV !== 'production'
-        ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering. Also, make sure all of your tamagui dependencies are on the same version (\`tamagui\`, \`@tamagui/package-name\`, etc.) not just in your package.json, but in your lockfile.`
-        : 'Err0'
+      formatDiagnostic(
+        'Err0',
+        'TamaguiConfig',
+        'no config is available',
+        'Call createTamagui before rendering and deduplicate Tamagui package versions',
+        'config',
+        config
+      )
     )
   }
   return config
@@ -112,44 +118,29 @@ export const getConfigMaybe = () => {
   return getConfigFromGlobalOrLocal()
 }
 
-// on globalThis for the same reason setConfig puts the config there: a project
-// can load two copies of this package, and only the one that ran createTamagui
-// would have this otherwise
-export function setTokens(next: TokensMerged) {
-  globalThis.__tamaguiTokensMerged = next
+let tokens: TokensParsed
+export function setTokens(next: TokensParsed) {
+  tokens = next
 }
 
-const getTokensMerged = (): TokensMerged => globalThis.__tamaguiTokensMerged
+// prefer the config over the module local: a project can load two copies of this
+// package, and only the one that ran createTamagui filled its local. the config
+// travels on globalThis so either copy reaches it
+const getTokensParsed = (): TokensParsed =>
+  getConfigFromGlobalOrLocal()?.tokensParsed ?? tokens
 
-export const getTokens = ({
-  prefixed,
-}: {
-  /**
-   * Force either with $ or without $ prefix
-   */
-  prefixed?: boolean
-} = {}): TokensMerged => {
-  const config = getConfigFromGlobalOrLocal()
+export const getTokens = (): TokensParsed => {
   if (process.env.NODE_ENV === 'development') {
-    if (!config) throw new Error(haventCalledErrorMessage)
+    if (!getConfigFromGlobalOrLocal()) throw new Error(haventCalledErrorMessage)
   }
-  const { tokens, tokensParsed } = config!
-  if (prefixed === false) return tokens as any
-  if (prefixed === true) return tokensParsed as any
-  return getTokensMerged()
+  return getTokensParsed()
 }
 
 export const getTokenObject = (value: Token, group?: keyof Tokens) => {
-  const config = getConfigFromGlobalOrLocal()
-  const tokensMerged = getTokensMerged()
-  return (
-    config!.specificTokens[value] ??
-    (group
-      ? tokensMerged[group]?.[value]
-      : tokensMerged[
-          Object.keys(tokensMerged).find((cat) => tokensMerged[cat][value]) || ''
-        ]?.[value])
-  )
+  const tokens = getTokensParsed()
+  return group
+    ? tokens[group]?.[value]
+    : tokens[Object.keys(tokens).find((cat) => tokens[cat][value]) || '']?.[value]
 }
 
 export const getToken = (value: Token, group?: keyof Tokens, useVariable = isWeb) => {

package/src/contexts/ComponentContext.tsx

@@ -2,14 +2,31 @@ import { useContext } from 'react'
 import { createStyledContext } from '../helpers/createStyledContext'
 import type { ComponentContextI } from '../types'
 
-export const ComponentContext = createStyledContext<ComponentContextI>({
-  disableSSR: undefined,
-  inText: false,
-  language: null,
-  animationDriver: null,
-  setParentFocusState: null,
-  insets: null,
-})
+const componentContextKeys = [
+  'disableSSR',
+  'inText',
+  'language',
+  'animationDriver',
+  'setParentFocusState',
+  'insets',
+] as const
+
+export const ComponentContext = createStyledContext<
+  ComponentContextI,
+  (typeof componentContextKeys)[number]
+>(
+  {
+    disableSSR: undefined,
+    inText: false,
+    language: null,
+    animationDriver: null,
+    setParentFocusState: null,
+    insets: null,
+  },
+  {
+    keys: componentContextKeys,
+  }
+)
 
 export const useConfiguration = () => {
   return useContext(ComponentContext)