@tamagui/core 1.0.1-beta.193 → 1.0.1-beta.194

package/src/createComponent.tsx

@@ -1,3 +1,4 @@
+import { useComposedRefs } from '@tamagui/compose-refs'
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
@@ -6,16 +7,13 @@ import {
   validPseudoKeys,
   validStyles,
 } from '@tamagui/helpers'
-import {
-  useElementLayout,
-  useMergeRefs,
-  usePlatformMethods,
-  useResponderEvents,
-} from '@tamagui/rnw'
+import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
+import type { ViewStyle } from '@tamagui/types-react-native'
 import { useForceUpdate } from '@tamagui/use-force-update'
 import React, {
   Children,
   Fragment,
+  RefObject,
   createElement,
   forwardRef,
   memo,
@@ -23,13 +21,11 @@ import React, {
   useContext,
   useEffect,
 } from 'react'
-import { Text, View, ViewStyle } from 'react-native'
 
-import { getConfig, onConfiguredOnce } from './config'
+import { onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
-import { assignNativePropsToWeb } from './helpers/assignNativePropsToWeb'
 import { getReturnVariablesAs } from './helpers/createPropMapper'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
 import {
@@ -42,8 +38,8 @@ import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
+import { getRect, measureLayout, useElementLayout } from './hooks/useElementLayout'
 import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
-import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
 import {
@@ -63,11 +59,20 @@ import {
 } from './types'
 import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
+import { Stack } from './views/Stack'
 import { wrapThemeManagerContext } from './views/Theme'
 
 React['keep']
 
+/**
+ * All things that need one-time setup after createTamagui is called
+ */
 let defaultComponentState: TamaguiComponentState | null = null
+let defaultComponentStateMounted: TamaguiComponentState | null = null
+let tamaguiConfig: TamaguiInternalConfig
+let AnimatedText: any
+let AnimatedView: any
+let initialTheme: any
 
 export const mouseUps = new Set<Function>()
 if (typeof document !== 'undefined') {
@@ -88,8 +93,17 @@ function mergeShorthands({ defaultProps }: StaticConfigParsed, { shorthands }: T
   }
 }
 
-let initialTheme: any
-let config: TamaguiInternalConfig
+/**
+ * Only on native do we need the actual underlying View/Text
+ * On the web we avoid react-native altogether in core.
+ */
+let BaseText: any
+let BaseView: any
+if (process.env.TAMAGUI_TARGET === 'native') {
+  const native = require('react-native')
+  BaseText = native.Text || native.default.Text
+  BaseView = native.View || native.default.View
+}
 
 export function createComponent<
   ComponentPropTypes extends Object = {},
@@ -106,10 +120,7 @@ export function createComponent<
   })()
 
   const defaultComponentClassName = `is_${staticConfig.componentName}`
-  let tamaguiConfig: TamaguiInternalConfig
-  let AnimatedText: any
-  let AnimatedView: any
-  let avoidClassesWhileAnimating = true
+  const avoidClassesWhileAnimating = true
   let defaultNativeStyle: any
   let tamaguiDefaultProps: any
   let initialSplitStyles: SplitStyleResult
@@ -126,7 +137,6 @@ export function createComponent<
     }
 
     const debugProp = props['debug']
-
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
     const componentClassName = props.asChild
@@ -136,14 +146,39 @@ export function createComponent<
       : defaultComponentClassName
 
     const forceUpdate = useForceUpdate()
-    config = config || getConfig()
     const theme = useTheme(props.theme, componentName, props, forceUpdate)
 
-    const states = useServerState<TamaguiComponentState>(defaultComponentState!)
+    /**
+     * Component state for tracking animations, pseudos
+     */
+    const hasEnterStyle = !!props.enterStyle
+    const needsMount = Boolean((isWeb ? isClient : true) && (hasEnterStyle || props.animation))
+    const states = useServerState<TamaguiComponentState>(
+      needsMount ? defaultComponentState! : defaultComponentStateMounted!
+    )
+
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0]
+    const setState = states[1]
+    const setStateShallow = useShallowSetState(setState)
+
+    const shouldSetMounted = needsMount && !state.mounted
+    const setMounted = shouldSetMounted
+      ? () => {
+          // for some reason without some small delay it doesn't animate css
+          setTimeout(
+            () => {
+              setStateShallow({
+                mounted: true,
+              })
+            },
+            isWeb ? 10 : 0
+          )
+        }
+      : undefined
 
     const shouldAvoidClasses =
       !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
+
     const shouldForcePseudo = !!propsIn.forceStyle
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
     const splitStyleState =
@@ -163,19 +198,45 @@ export function createComponent<
 
     const languageContext = isRSC ? null : useContext(FontLanguageContext)
 
+    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
+    const nextIsAnimated = !!(useAnimations && props.animation)
+    // conditional but if ever true stays true
+    const isAnimated = nextIsAnimated || state.hasAnimation
+    if (nextIsAnimated && !state.hasAnimation) {
+      setStateShallow({ hasAnimation: true })
+    }
+
+    const isTaggable = !Component || typeof Component === 'string'
+    // default to tag, fallback to component (when both strings)
+    const element = isWeb ? (isTaggable ? props.tag || Component : Component) : Component
+
+    const BaseTextComponent = BaseText || element || 'span'
+    const BaseViewComponent = BaseView || element || (hasTextAncestor ? 'span' : 'div')
+    let elementType = isText
+      ? (isAnimated ? AnimatedText : null) || BaseTextComponent
+      : (isAnimated ? AnimatedView : null) || BaseViewComponent
+
+    elementType = Component || elementType
+    const isStringElement = typeof elementType === 'string'
+
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
       theme,
       splitStyleState,
-      props.asChild ? null : initialSplitStyles?.classNames,
+      props.asChild ? null : initialSplitStyles,
       languageContext || undefined,
+      elementType,
       debugProp
     )
 
     const hostRef = useServerRef<TamaguiElement>(null)
-    const setState = states[1]
-    const setStateShallow = useShallowSetState(setState)
+
+    // animation setup
+    const isReactNativeWeb = Boolean(
+      staticConfig.isReactNativeWeb || (isAnimated && tamaguiConfig.animations.isReactNativeWeb)
+    )
+    const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating
 
     if (process.env.NODE_ENV === 'development') {
       if (!process.env.TAMAGUI_TARGET) {
@@ -187,7 +248,7 @@ export function createComponent<
         const name = `${
           componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
         }`
-        const type = staticConfig.isReactNativeWeb ? 'rnw' : 'tamagui'
+        const type = isReactNativeWeb ? 'rnw' : 'tamagui'
         const banner = `${name} ${propsIn['data-is'] || ''} ${type}`
         // eslint-disable-next-line no-console
         console.group(`%c 🐛 ${banner}`, 'background: yellow;')
@@ -221,55 +282,16 @@ export function createComponent<
       mediaKeys,
     } = splitStyles
 
-    // media queries
-    useIsomorphicLayoutEffect(() => {
-      if (!mediaKeys.length) {
-        return
-      }
-      const disposers: any[] = []
-      for (const key of mediaKeys) {
-        disposers.push(
-          addMediaQueryListener(key, (next: boolean) => {
-            setState((prev) => {
-              if (prev.mediaState![key] !== next) {
-                return {
-                  ...prev,
-                  mediaState: {
-                    ...prev.mediaState,
-                    [key]: next,
-                  },
-                }
-              }
-              return prev
-            })
-          })
-        )
-      }
-      return () => {}
-    }, [mediaKeys.join(',')])
-
-    // animations
-    const useAnimations = tamaguiConfig?.animations?.useAnimations as UseAnimationHook | undefined
-
-    const nextIsAnimated = !!(useAnimations && props.animation)
-    // conditional but if ever true stays true
-    const isAnimated = nextIsAnimated || state.hasAnimation
-    if (nextIsAnimated && !state.hasAnimation) {
-      setStateShallow({ hasAnimation: true })
-    }
-
     const animationFeatureStylesIn = props.animation
       ? { ...defaultNativeStyle, ...splitStylesStyle }
       : null
     const propsWithAnimation = props as UseAnimationProps
 
-    // lets make changing the key mandatory for adding/removing animations
-    // reason is animations are heavy no way around it, and must be run inline here (🙅 loading as a sub-component)
-    // because they need to sync update on first render. it's pretty rare too going to/from no animation => animation
-    // so requiring key change on animation change is least-bad option.
-    // plus, React use() may let us get away with conditional hooks soon :)
+    // once you set animation prop don't remove it, you can set to undefined/false
+    // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
+    let animationStyles: any
     if (!isRSC && isAnimated && useAnimations) {
-      const animationState = useAnimations(propsWithAnimation, {
+      const animations = useAnimations(propsWithAnimation, {
         state,
         pseudos,
         onDidAnimate: props.onDidAnimate,
@@ -321,7 +343,6 @@ export function createComponent<
             // enterStyle,
             pseudos.hoverStyle,
             pseudos.focusStyle,
-            pseudos.pressStyle,
             pseudos.pressStyle
           )
 
@@ -332,7 +353,7 @@ export function createComponent<
           exitStyle && isExiting && merge(style, exitStyle)
 
           if (process.env.NODE_ENV === 'development') {
-            if (debugProp) {
+            if (debugProp === 'verbose') {
               // eslint-disable-next-line no-console
               console.log('animation style', style)
             }
@@ -343,16 +364,41 @@ export function createComponent<
         //, delay
       })
 
-      // must be properly memoized
-      if (animationState !== state.animation) {
-        setStateShallow({
-          animation: animationState,
-        })
+      if (animations) {
+        animationStyles = animations.style
       }
     }
 
+    // media queries
+    useIsomorphicLayoutEffect(() => {
+      if (!mediaKeys.length) return
+      const disposers: any[] = []
+      for (const key of mediaKeys) {
+        disposers.push(
+          addMediaQueryListener(key, (next: boolean) => {
+            setState((prev) => {
+              if (prev.mediaState![key] !== next) {
+                return {
+                  ...prev,
+                  mediaState: {
+                    ...prev.mediaState,
+                    [key]: next,
+                  },
+                }
+              }
+              return prev
+            })
+          })
+        )
+      }
+      return () => {
+        for (const disposer of disposers) {
+          disposer()
+        }
+      }
+    }, [mediaKeys.join(',')])
+
     const {
-      tag,
       hitSlop,
       asChild,
       children,
@@ -382,20 +428,6 @@ export function createComponent<
       ...nonTamaguiProps
     } = viewPropsIn
 
-    // get the right component
-    const isTaggable = !Component || typeof Component === 'string'
-
-    // default to tag, fallback to component (when both strings)
-    const element = isWeb ? (isTaggable ? tag || Component : Component) : Component
-    const BaseTextComponent = !isWeb ? Text : element || 'span'
-    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? 'span' : 'div')
-    let elementType = isText
-      ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent
-      : (isAnimated ? AnimatedView || View : null) || BaseViewComponent
-
-    elementType = Component || elementType
-    const isStringElement = typeof elementType === 'string'
-
     const disabled =
       (props.accessibilityState != null && props.accessibilityState.disabled === true) ||
       props.accessibilityDisabled
@@ -404,26 +436,8 @@ export function createComponent<
     // so the type is pretty loose
     let viewProps: Record<string, any>
 
-    const hasEnterStyle = !!props.enterStyle
-    const shouldSetMounted = Boolean(
-      (isWeb ? isClient : true) && (hasEnterStyle || props.animation) && !state.mounted
-    )
-    const setMounted = shouldSetMounted
-      ? () => {
-          // for some reason without some small delay it doesn't animate css
-          setTimeout(
-            () => {
-              setStateShallow({
-                mounted: true,
-              })
-            },
-            isWeb ? 10 : 0
-          )
-        }
-      : undefined
-
     // if react-native-web view just pass all props down
-    if (process.env.TAMAGUI_TARGET === 'web' && !staticConfig.isReactNativeWeb) {
+    if (process.env.TAMAGUI_TARGET === 'web' && !isReactNativeWeb) {
       // otherwise replicate react-native-web functionality
       const {
         // event props
@@ -444,112 +458,14 @@ export function createComponent<
         onStartShouldSetResponder,
         onStartShouldSetResponderCapture,
 
-        // react-native props
-        nativeID,
-
-        // react-native-web accessibility props
-        // @ts-ignore
-        accessibilityActiveDescendant,
-        // @ts-ignore
-        accessibilityAtomic,
-        // @ts-ignore
-        accessibilityAutoComplete,
-        // @ts-ignore
-        accessibilityBusy,
-        // @ts-ignore
-        accessibilityChecked,
-        // @ts-ignore
-        accessibilityColumnCount,
-        // @ts-ignore
-        accessibilityColumnIndex,
-        // @ts-ignore
-        accessibilityColumnSpan,
-        // @ts-ignore
-        accessibilityControls,
-        // @ts-ignore
-        accessibilityCurrent,
-        // @ts-ignore
-        accessibilityDescribedBy,
-        // @ts-ignore
-        accessibilityDetails,
-        // @ts-ignore
-        accessibilityDisabled,
-        // @ts-ignore
-        accessibilityErrorMessage,
-        // @ts-ignore
-        accessibilityExpanded,
-        // @ts-ignore
-        accessibilityFlowTo,
-        // @ts-ignore
-        accessibilityHasPopup,
-        // @ts-ignore
-        accessibilityHidden,
-        // @ts-ignore
-        accessibilityInvalid,
-        // @ts-ignore
-        accessibilityKeyShortcuts,
-        // @ts-ignore
-        accessibilityLabel,
-        // @ts-ignore
-        accessibilityLabelledBy,
-        // @ts-ignore
-        accessibilityLevel,
-        // @ts-ignore
-        accessibilityLiveRegion,
-        // @ts-ignore
-        accessibilityModal,
-        // @ts-ignore
-        accessibilityMultiline,
-        // @ts-ignore
-        accessibilityMultiSelectable,
-        // @ts-ignore
-        accessibilityOrientation,
-        // @ts-ignore
-        accessibilityOwns,
-        // @ts-ignore
-        accessibilityPlaceholder,
-        // @ts-ignore
-        accessibilityPosInSet,
-        // @ts-ignore
-        accessibilityPressed,
-        // @ts-ignore
-        accessibilityReadOnly,
-        // @ts-ignore
-        accessibilityRequired,
-        // @ts-ignore
-        accessibilityRole,
-        // @ts-ignore
-        accessibilityRoleDescription,
-        // @ts-ignore
-        accessibilityRowCount,
-        // @ts-ignore
-        accessibilityRowIndex,
-        // @ts-ignore
-        accessibilityRowSpan,
-        // @ts-ignore
-        accessibilitySelected,
-        // @ts-ignore
-        accessibilitySetSize,
-        // @ts-ignore
-        accessibilitySort,
-        // @ts-ignore
-        accessibilityValueMax,
-        // @ts-ignore
-        accessibilityValueMin,
-        // @ts-ignore
-        accessibilityValueNow,
-        // @ts-ignore
-        accessibilityValueText,
-
-        // deprecated
-        accessible,
-        accessibilityState,
-        accessibilityValue,
-
         // android
         collapsable,
         focusable,
 
+        // deprecated,
+        accessible,
+        accessibilityDisabled,
+
         onLayout,
 
         ...webProps
@@ -557,12 +473,11 @@ export function createComponent<
 
       viewProps = webProps
 
-      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps)
-
       if (!isRSC) {
-        useElementLayout(hostRef, onLayout)
+        usePlatformMethods(hostRef as RefObject<Element>)
+
+        useElementLayout(hostRef as RefObject<Element>, onLayout as any)
 
-        // from react-native-web
         useResponderEvents(hostRef, {
           onMoveShouldSetResponder,
           onMoveShouldSetResponderCapture,
@@ -580,14 +495,7 @@ export function createComponent<
           onSelectionChangeShouldSetResponderCapture,
           onStartShouldSetResponder,
           onStartShouldSetResponderCapture,
-        })
-
-        // from react-native-web
-        const platformMethodsRef = usePlatformMethods(viewProps)
-
-        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef as any, setMounted)
-
-        viewProps.ref = setRef
+        } as any)
       }
 
       if (props.href != undefined && hrefAttrs != undefined) {
@@ -640,12 +548,10 @@ export function createComponent<
       }
     } else {
       viewProps = nonTamaguiProps
-      if (forwardedRef) {
-        // @ts-ignore
-        viewProps.ref = forwardedRef
-      }
     }
 
+    viewProps.ref = useComposedRefs(hostRef as any, forwardedRef, setMounted)
+
     if (process.env.NODE_ENV === 'development' && !isText && isWeb && !staticConfig.isHOC) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === 'string') {
@@ -672,8 +578,6 @@ export function createComponent<
 
     let styles: any[]
 
-    const animationStyles = state.animation ? state.animation.style : null
-
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
         ...defaultNativeStyle,
@@ -705,32 +609,16 @@ export function createComponent<
       }
     }
 
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      let fontFamily = isText
-        ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily
-        : null
-      if (fontFamily && fontFamily[0] === '$') {
-        fontFamily = fontFamily.slice(1)
-      }
-
-      if (process.env.NODE_ENV === 'development') {
-        if (fontFamily?.startsWith(`var(`)) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Received variable instead of resolved name of font, this is a bug. Please report on Github.`,
-            {
-              fontFamily,
-              props,
-              splitStyles,
-              staticConfig,
-            }
-          )
-        }
-      }
+    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily : null
+    if (fontFamily && fontFamily[0] === '$') {
+      fontFamily = fontFamily.slice(1)
+    }
+    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
+    if (process.env.TAMAGUI_TARGET === 'web') {
       const classList = [
         componentName ? componentClassName : '',
-        fontFamily ? `font_${fontFamily}` : '',
+        fontFamilyClassName,
         theme.className,
         classNames ? Object.values(classNames).join(' ') : '',
       ]
@@ -738,18 +626,9 @@ export function createComponent<
       const className = classList.join(' ')
       const style = animationStyles ?? splitStyles.style
 
-      // TODO this is specific to reanimated rn
-      const isAnimatedReactNativeWeb = props.animation && avoidClassesWhileAnimating
-
-      // temp fix for animated react-native-web restore pre-styleq functionality
       if (isAnimatedReactNativeWeb) {
         viewProps.style = style
-        viewProps.dataSet = {
-          ...viewProps.dataSet,
-          className,
-          id: props.id,
-        }
-      } else if (staticConfig.isReactNativeWeb) {
+      } else if (isReactNativeWeb) {
         const rnwStyle = { $$css: true }
         for (const name of className.split(' ')) {
           rnwStyle[name] = name
@@ -772,13 +651,9 @@ export function createComponent<
     }
 
     if (process.env.TAMAGUI_TARGET === 'native') {
-      // add ref
-      const mergedRef = useMergeRefs(forwardedRef, hostRef, setMounted)
-      viewProps.ref = mergedRef
-
       // swap out the right family based on weight/style
       if (splitStyles.fontFamily) {
-        const faceInfo = config.fontsParsed[splitStyles.fontFamily]?.face
+        const faceInfo = tamaguiConfig.fontsParsed[splitStyles.fontFamily]?.face
         if (faceInfo) {
           const [weight, style] = (() => {
             let weight: string | undefined
@@ -820,10 +695,7 @@ export function createComponent<
       isHoverable &&
       !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
 
-    const handlesPressEvents = !isStringElement && !asChild
-    const pressKey = handlesPressEvents ? 'onPress' : 'onClick'
-    const pressInKey = handlesPressEvents ? 'onPressIn' : 'onMouseDown'
-    const pressOutKey = handlesPressEvents ? 'onPressOut' : 'onMouseUp'
+    const handlesPressEvents = !isWeb && !asChild
 
     // check presence to prevent reparenting bugs, allows for onPress={x ? function : undefined} usage
     const shouldAttach =
@@ -844,7 +716,7 @@ export function createComponent<
     const events =
       shouldAttach && !isRSC
         ? {
-            [pressOutKey]: attachPress
+            onPressOut: attachPress
               ? (e) => {
                   unPress()
                   onPressOut?.(e)
@@ -861,7 +733,7 @@ export function createComponent<
                     if (state.pressIn) {
                       next.press = true
                     }
-                    if (Object.keys(next).length) {
+                    if (attachHover || state.pressIn) {
                       setStateShallow(next)
                     }
                     onHoverIn?.(e)
@@ -887,7 +759,7 @@ export function createComponent<
                   }
                 : undefined,
             }),
-            [pressInKey]: attachPress
+            onPressIn: attachPress
               ? (e) => {
                   setStateShallow({
                     press: true,
@@ -900,15 +772,15 @@ export function createComponent<
                     mouseUps.add(unPress)
                   }
                 }
-              : null,
-            [pressKey]: attachPress
+              : undefined,
+            onPress: attachPress
               ? (e) => {
                   unPress()
                   // @ts-ignore
                   onClick?.(e)
                   onPress?.(e)
                 }
-              : null,
+              : undefined,
 
             // replicating TouchableWithoutFeedback
             ...(!isWeb && {
@@ -974,33 +846,6 @@ export function createComponent<
       }
     }
 
-    // EVENTS: web
-    if (!isRSC && isWeb) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const [pressableProps] = usePressable(
-        events
-          ? {
-              disabled,
-              ...(hitSlop && {
-                hitSlop,
-              }),
-              onPressOut: events[pressOutKey],
-              onPressIn: events[pressInKey],
-              onPress: events[pressKey],
-            }
-          : {
-              disabled: true,
-            }
-      )
-      if (events) {
-        if (handlesPressEvents) {
-          Object.assign(viewProps, pressableProps)
-        } else {
-          Object.assign(viewProps, events)
-        }
-      }
-    }
-
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
@@ -1021,9 +866,6 @@ export function createComponent<
       // only ever create once, use .configure() to update later
       const pressability = usePressability(events)
       if (attachPress && events) {
-        const dontComposePressabilityKeys = {
-          onClick: true,
-        }
         if (hitSlop) {
           viewProps.hitSlop = hitSlop
         }
@@ -1039,33 +881,32 @@ export function createComponent<
     content = createElement(elementType, viewProps, childEls)
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      // only necessary when animating because some AnimatedView which wraps RNW View doesn't forward dataSet className
-      const isAnimatedRNWView = isAnimated && typeof elementType !== 'string' // assuming for now as reanimated is only driver
-      const shouldWrapWithComponentTheme =
-        !!theme.className &&
-        isAnimatedRNWView &&
-        getReturnVariablesAs(props, splitStyleState) === 'non-color-value'
-      const shouldWrapWithHover = Boolean(events || isRSC) && attachHover
-
-      if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
-        const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : ''
-        const hoverClassName = shouldWrapWithHover ? 't_Hoverable' : ''
+      if (events) {
         content = (
           <span
-            className={`${hoverClassName} ${themeClassName}`}
-            style={{
-              display: 'contents',
-            }}
-            {...(events &&
-              shouldWrapWithHover && {
-                onMouseEnter: events.onMouseEnter,
-                onMouseLeave: events.onMouseLeave,
-              })}
+            style={styleDisplayContents}
+            onMouseEnter={events.onMouseEnter}
+            onMouseLeave={events.onMouseLeave}
+            onClick={events.onPress}
+            onMouseDown={events.onPressIn}
+            onMouseUp={events.onPressOut}
+            onTouchStart={events.onPressIn}
+            onTouchEnd={events.onPressOut}
           >
             {content}
           </span>
         )
       }
+
+      // special weird case since there's a bug in RNW where we can't animate + pass style { $$css }
+      // but we need is_font classnames... need to see about RNW bug and then can remove this
+      if (isText && isAnimatedReactNativeWeb) {
+        content = (
+          <span className={fontFamilyClassName} style={styleDisplayContents}>
+            {content}
+          </span>
+        )
+      }
     }
 
     if (process.env.NODE_ENV === 'development') {
@@ -1098,48 +939,44 @@ export function createComponent<
     component.displayName = staticConfig.componentName
   }
 
-  // Once configuration is run and all components are registered
-  // get default props + className and analyze styles
   onConfiguredOnce((conf) => {
-    if (!defaultComponentState) {
-      defaultComponentState = Object.freeze({
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        // only used by enterStyle
-        mounted: false,
-        animation: null,
-        mediaState: getInitialMediaState(),
-      })
-    }
-
-    // in static mode we just use these to lookup configuration
-    // ... we likely want this? need to test
-    if (process.env.IS_STATIC === 'is_static') return
-
-    tamaguiConfig = conf
-
-    // do this to make sure shorthands don't duplicate with.. longhands
-    mergeShorthands(staticConfig, tamaguiConfig)
+    // one time only setup
+    if (!tamaguiConfig) {
+      tamaguiConfig = conf
+
+      if (!defaultComponentState) {
+        defaultComponentState = {
+          hover: false,
+          press: false,
+          pressIn: false,
+          focus: false,
+          mounted: false,
+          mediaState: getInitialMediaState(),
+        }
+        defaultComponentStateMounted = {
+          ...defaultComponentState,
+          mounted: true,
+        }
+      }
 
-    if (tamaguiConfig.animations) {
-      avoidClassesWhileAnimating = !!tamaguiConfig.animations.avoidClasses
-      AnimatedText = tamaguiConfig.animations.Text
-      AnimatedView = tamaguiConfig.animations.View
-    }
+      if (tamaguiConfig.animations) {
+        AnimatedText = tamaguiConfig.animations.Text
+        AnimatedView = tamaguiConfig.animations.View
+      }
 
-    if (!initialTheme) {
-      const next = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]
-      initialTheme = proxyThemeVariables(next)
-      if (!initialTheme && process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.log(`Warning: Missing theme`)
+      if (!initialTheme) {
+        const next = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]
+        initialTheme = proxyThemeVariables(next)
+        if (!initialTheme && process.env.NODE_ENV === 'development') {
+          // eslint-disable-next-line no-console
+          console.log(`Warning: Missing theme`)
+        }
       }
     }
 
-    // adds in user defined default props
-    config = getConfig()
+    // per-component setup
+    // do this to make sure shorthands don't duplicate with.. longhands
+    mergeShorthands(staticConfig, tamaguiConfig)
 
     let defaultPropsIn = staticConfig.defaultProps || {}
 
@@ -1148,23 +985,18 @@ export function createComponent<
     // find last unprocessed and process
     const parentNames = [...(staticConfig.parentNames || []), staticConfig.componentName]
 
-    if (config.defaultProps && parentNames && staticConfig.componentName) {
+    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
       defaultPropsIn = mergeConfigDefaultProps(
         staticConfig.componentName,
         defaultPropsIn,
-        config.defaultProps,
+        tamaguiConfig.defaultProps,
         parentNames,
-        conf
+        tamaguiConfig
       )
     }
 
     const debug = defaultPropsIn['debug']
 
-    if (process.env.NODE_ENV === 'development' && debug === 'break') {
-      // eslint-disable-next-line no-debugger
-      debugger
-    }
-
     // remove all classNames
     const [parentProps, parentClassNames] = mergeProps(defaultPropsIn, {}, true)
 
@@ -1286,12 +1118,14 @@ export const Spacer = createComponent<SpacerProps>({
   memo: true,
   componentName: 'Spacer',
   validStyles,
+
   defaultProps: {
     ...stackDefaultStyles,
     // avoid nesting issues
     tag: 'span',
     size: true,
   },
+
   variants: {
     size: {
       '...size': (size, { tokens }) => {
@@ -1324,10 +1158,6 @@ export const Spacer = createComponent<SpacerProps>({
       both: {},
     },
   } as const,
-
-  defaultVariants: {
-    direction: 'both',
-  },
 })
 
 export type SpacedChildrenProps = {
@@ -1387,7 +1217,7 @@ export function spacedChildren({
         if (hasSpace) {
           final.push(
             createSpacer({
-              key: `_${index}_before_sep_spacer`,
+              key: `_${index}_00tmgui`,
               direction,
               space,
               spaceFlex,
@@ -1402,7 +1232,7 @@ export function spacedChildren({
         if (hasSpace) {
           final.push(
             createSpacer({
-              key: `_${index}_after_sep_spacer`,
+              key: `_${index}01tmgui`,
               direction,
               space,
               spaceFlex,
@@ -1412,7 +1242,7 @@ export function spacedChildren({
       } else {
         final.push(
           createSpacer({
-            key: `_${index}_spacer`,
+            key: `_${index}02tmgui`,
             direction,
             space,
             spaceFlex,
@@ -1446,48 +1276,6 @@ function isUnspaced(child: React.ReactNode) {
   return child?.['type']?.['isVisuallyHidden'] || child?.['type']?.['isUnspaced']
 }
 
-function AbsoluteFill(props: { children?: any }) {
-  return (
-    <View pointerEvents="box-none" style={absoluteFill}>
-      {props.children}
-    </View>
-  )
-}
-
-const absoluteFill = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-} as const
-
-// this can be done with CSS entirely right?
-// const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor
-// if (shouldWrapTextAncestor) {
-//   // from react-native-web
-//   content = createElement(TextAncestorContext.Provider, { value: true }, content)
-// }
-
-export function processIDRefList(idRefList: string | Array<string>): string {
-  return Array.isArray(idRefList) ? idRefList.join(' ') : idRefList
-}
-
-export const accessibilityRoleToWebRole = {
-  adjustable: 'slider',
-  button: 'button',
-  header: 'heading',
-  image: 'img',
-  imagebutton: null,
-  keyboardkey: null,
-  label: null,
-  link: 'link',
-  none: 'presentation',
-  search: 'search',
-  summary: 'region',
-  text: null,
-}
-
 function addPseudoToStyles(
   styles: any[],
   initialPseudos: SplitStyleResult['pseudos'],
@@ -1608,3 +1396,45 @@ function merge(base: ViewStyle, next: ViewStyle) {
     }
   }
 }
+
+// react native compat (web only)
+function usePlatformMethods(hostRef: RefObject<Element>) {
+  useIsomorphicLayoutEffect(() => {
+    const node = hostRef.current
+    if (!node) return
+    // @ts-ignore
+    node.measure = (callback) => measureLayout(node, null, callback)
+    // @ts-ignore
+    node.measureLayout = (relativeToNode, success) => measureLayout(node, relativeToNode, success)
+    // @ts-ignore
+    node.measureInWindow = (callback) => {
+      if (!node) return
+      setTimeout(() => {
+        const { height, left, top, width } = getRect(node as HTMLElement)!
+        callback(left, top, width, height)
+      }, 0)
+    }
+  }, [hostRef])
+}
+
+const AbsoluteFill: any = createComponent({
+  componentName: 'AbsoluteFill',
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: 'column',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: 'box-none',
+  },
+})
+
+const styleDisplayContents = {
+  display: 'contents',
+}
+
+const dontComposePressabilityKeys = {
+  onClick: true,
+}