diff --git a/packages/accordion/src/accordion.tsx b/packages/accordion/src/accordion.tsx
index afc5a4fe..d1b2691c 100644
--- a/packages/accordion/src/accordion.tsx
+++ b/packages/accordion/src/accordion.tsx
@@ -18,10 +18,7 @@ import type {
 
 const AccordionContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       type,
       disabled,
       collapsible = true,
@@ -29,9 +26,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       onValueChange: onValueChangeProps,
       defaultValue,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
       (string | undefined) | string[]
     >({
@@ -55,7 +50,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </AccordionContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeAccordion';
 
@@ -76,8 +70,7 @@ type AccordionItemContext = ItemProps & {
 
 const AccordionItemContext = React.createContext<AccordionItemContext | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  ({ asChild, value, disabled, ...viewProps }, ref) => {
+function Item({ ref, asChild, value, disabled, ...viewProps  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { value: rootValue } = useRootContext();
     const nativeID = React.useId();
 
@@ -95,7 +88,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </AccordionItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemNativeAccordion';
 
@@ -109,7 +101,7 @@ function useItemContext() {
   return context;
 }
 
-const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props }, ref) => {
+function Header({ ref, asChild, ...props  }: HeaderProps & { ref?: React.Ref<HeaderRef> }) {
   const { disabled: rootDisabled } = useRootContext();
   const { disabled: itemDisabled, isExpanded } = useItemContext();
 
@@ -123,12 +115,11 @@ const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props },
       {...props}
     />
   );
-});
+}
 
 Header.displayName = 'HeaderNativeAccordion';
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled: disabledProp, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled: disabledProp, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const {
       disabled: rootDisabled,
       type,
@@ -175,12 +166,10 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeAccordion';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const { type } = useRootContext();
     const { nativeID, isExpanded } = useItemContext();
 
@@ -201,7 +190,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeAccordion';
 
diff --git a/packages/accordion/src/accordion.web.tsx b/packages/accordion/src/accordion.web.tsx
index f8650f5d..328929ca 100644
--- a/packages/accordion/src/accordion.web.tsx
+++ b/packages/accordion/src/accordion.web.tsx
@@ -22,10 +22,7 @@ import type {
 
 const AccordionContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value: valueProp,
       onValueChange: onValueChangeProps,
       defaultValue,
@@ -35,9 +32,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       orientation = 'vertical',
       collapsible,
       ...props
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
       (string | undefined) | string[]
     >({
@@ -75,7 +70,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </AccordionContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebAccordion';
 
@@ -93,8 +87,7 @@ const AccordionItemContext = React.createContext<(ItemProps & { isExpanded: bool
   null
 );
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  ({ asChild, value: itemValue, disabled, ...props }, ref) => {
+function Item({ ref, asChild, value: itemValue, disabled, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { value, orientation, disabled: disabledRoot } = useRootContext();
 
@@ -133,7 +126,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </AccordionItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemWebAccordion';
 
@@ -147,7 +139,7 @@ function useItemContext() {
   return context;
 }
 
-const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props }, ref) => {
+function Header({ ref, asChild, ...props  }: HeaderProps & { ref?: React.Ref<HeaderRef> }) {
   const augmentedRef = useAugmentedRef({ ref });
   const { disabled, isExpanded } = useItemContext();
   const { orientation, disabled: disabledRoot } = useRootContext();
@@ -177,7 +169,7 @@ const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props },
       <Component ref={augmentedRef} {...props} />
     </Accordion.Header>
   );
-});
+}
 
 Header.displayName = 'HeaderWebAccordion';
 
@@ -189,8 +181,7 @@ const HIDDEN_STYLE: React.CSSProperties = {
   opacity: 0,
 };
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, disabled: disabledProp, ...props }, ref) => {
+function Trigger({ ref, asChild, disabled: disabledProp, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { disabled: disabledRoot } = useRootContext();
     const { disabled, isExpanded } = useItemContext();
     const triggerRef = React.useRef<HTMLButtonElement>(null);
@@ -246,12 +237,10 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebAccordion';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
 
     const { orientation, disabled: disabledRoot } = useRootContext();
@@ -283,7 +272,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Accordion.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebAccordion';
 
diff --git a/packages/alert-dialog/src/alert-dialog.tsx b/packages/alert-dialog/src/alert-dialog.tsx
index ced572d8..9be83762 100644
--- a/packages/alert-dialog/src/alert-dialog.tsx
+++ b/packages/alert-dialog/src/alert-dialog.tsx
@@ -26,8 +26,7 @@ import type {
 
 const AlertDialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -47,7 +46,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </AlertDialogContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeAlertDialog';
 
@@ -61,8 +59,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open: value, onOpenChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -82,7 +79,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeAlertDialog';
 
@@ -105,8 +101,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open: value } = useRootContext();
 
     if (!forceMount) {
@@ -118,12 +113,10 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeAlertDialog';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const { open: value, nativeID, onOpenChange } = useRootContext();
 
     React.useEffect(() => {
@@ -156,12 +149,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeAlertDialog';
 
-const Cancel = React.forwardRef<CancelRef, CancelProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Cancel({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: CancelProps & { ref?: React.Ref<CancelRef> }) {
     const { onOpenChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -182,12 +173,10 @@ const Cancel = React.forwardRef<CancelRef, CancelProps>(
       />
     );
   }
-);
 
 Cancel.displayName = 'CloseNativeAlertDialog';
 
-const Action = React.forwardRef<ActionRef, ActionProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Action({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: ActionProps & { ref?: React.Ref<ActionRef> }) {
     const { onOpenChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -208,25 +197,22 @@ const Action = React.forwardRef<ActionRef, ActionProps>(
       />
     );
   }
-);
 
 Action.displayName = 'ActionNativeAlertDialog';
 
-const Title = React.forwardRef<TitleRef, TitleProps>(({ asChild, ...props }, ref) => {
+function Title({ ref, asChild, ...props  }: TitleProps & { ref?: React.Ref<TitleRef> }) {
   const { nativeID } = useRootContext();
   const Component = asChild ? Slot.Text : Text;
   return <Component ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
-});
+}
 
 Title.displayName = 'TitleNativeAlertDialog';
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>(
-  ({ asChild, ...props }, ref) => {
+function Description({ ref, asChild, ...props  }: DescriptionProps & { ref?: React.Ref<DescriptionRef> }) {
     const { nativeID } = useRootContext();
     const Component = asChild ? Slot.Text : Text;
     return <Component ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
   }
-);
 
 Description.displayName = 'DescriptionNativeAlertDialog';
 
diff --git a/packages/alert-dialog/src/alert-dialog.web.tsx b/packages/alert-dialog/src/alert-dialog.web.tsx
index e2bfc96f..92ee07c6 100644
--- a/packages/alert-dialog/src/alert-dialog.web.tsx
+++ b/packages/alert-dialog/src/alert-dialog.web.tsx
@@ -30,8 +30,7 @@ import type {
 
 const AlertDialogContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -46,7 +45,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </AlertDialogContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootAlertWebDialog';
 
@@ -60,8 +58,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, role: _role, disabled, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { onOpenChange, open } = useRootContext();
     function onPress(ev: GestureResponderEvent) {
@@ -92,7 +89,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </AlertDialog.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerAlertWebDialog';
 
@@ -100,8 +96,7 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <AlertDialog.Portal forceMount={forceMount} children={children} container={container} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <AlertDialog.Overlay forceMount={forceMount}>
@@ -109,12 +104,10 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
       </AlertDialog.Overlay>
     );
   }
-);
 
 Overlay.displayName = 'OverlayAlertWebDialog';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { open } = useRootContext();
 
@@ -138,12 +131,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </AlertDialog.Content>
     );
   }
-);
 
 Content.displayName = 'ContentAlertWebDialog';
 
-const Cancel = React.forwardRef<CancelRef, CancelProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+function Cancel({ ref, asChild, onPress: onPressProp, disabled, ...props  }: CancelProps & { ref?: React.Ref<CancelRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { onOpenChange, open } = useRootContext();
 
@@ -176,12 +167,10 @@ const Cancel = React.forwardRef<CancelRef, CancelProps>(
       </>
     );
   }
-);
 
 Cancel.displayName = 'CancelAlertWebDialog';
 
-const Action = React.forwardRef<ActionRef, ActionProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+function Action({ ref, asChild, onPress: onPressProp, disabled, ...props  }: ActionProps & { ref?: React.Ref<ActionRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { onOpenChange, open } = useRootContext();
 
@@ -214,23 +203,21 @@ const Action = React.forwardRef<ActionRef, ActionProps>(
       </>
     );
   }
-);
 
 Action.displayName = 'ActionAlertWebDialog';
 
-const Title = React.forwardRef<TitleRef, TitleProps>(({ asChild, ...props }, ref) => {
+function Title({ ref, asChild, ...props  }: TitleProps & { ref?: React.Ref<TitleRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return (
     <AlertDialog.Title asChild>
       <Component ref={ref} {...props} />
     </AlertDialog.Title>
   );
-});
+}
 
 Title.displayName = 'TitleAlertWebDialog';
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>(
-  ({ asChild, ...props }, ref) => {
+function Description({ ref, asChild, ...props  }: DescriptionProps & { ref?: React.Ref<DescriptionRef> }) {
     const Component = asChild ? Slot.Text : Text;
     return (
       <AlertDialog.Description asChild>
@@ -238,7 +225,6 @@ const Description = React.forwardRef<DescriptionRef, DescriptionProps>(
       </AlertDialog.Description>
     );
   }
-);
 
 Description.displayName = 'DescriptionAlertWebDialog';
 
diff --git a/packages/aspect-ratio/src/aspect-ratio.tsx b/packages/aspect-ratio/src/aspect-ratio.tsx
index c7871b36..8466394c 100644
--- a/packages/aspect-ratio/src/aspect-ratio.tsx
+++ b/packages/aspect-ratio/src/aspect-ratio.tsx
@@ -10,12 +10,10 @@ type RootProps = Omit<SlottableViewProps, 'style'> & {
 
 type RootRef = ViewRef;
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, ratio = 1, style, ...props }, ref) => {
+function Root({ ref, asChild, ratio = 1, style, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} style={[style, { aspectRatio: ratio }]} {...props} />;
   }
-);
 
 Root.displayName = 'RootAspectRatio';
 
diff --git a/packages/avatar/src/avatar.tsx b/packages/avatar/src/avatar.tsx
index 5d68d434..169e64e6 100644
--- a/packages/avatar/src/avatar.tsx
+++ b/packages/avatar/src/avatar.tsx
@@ -20,7 +20,7 @@ interface IRootContext extends RootProps {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(({ asChild, alt, ...viewProps }, ref) => {
+function Root({ ref, asChild, alt, ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
   const [status, setStatus] = React.useState<AvatarState>('error');
   const Component = asChild ? Slot.View : View;
   return (
@@ -28,7 +28,7 @@ const Root = React.forwardRef<RootRef, RootProps>(({ asChild, alt, ...viewProps
       <Component ref={ref} {...viewProps} />
     </RootContext.Provider>
   );
-});
+}
 
 Root.displayName = 'RootAvatar';
 
@@ -40,53 +40,48 @@ function useRootContext() {
   return context;
 }
 
-const Image = React.forwardRef<ImageRef, ImageProps>(
-  (
-    { asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props },
-    ref
-  ) => {
-    const { alt, setStatus, status } = useRootContext();
-
-    useIsomorphicLayoutEffect(() => {
-      if (isValidSource(props?.source)) {
-        setStatus('loading');
-      }
-
-      return () => {
-        setStatus('error');
-      };
-    }, [props?.source]);
-
-    const onLoad = React.useCallback(
-      (e: NativeSyntheticEvent<ImageLoadEventData>) => {
-        setStatus('loaded');
-        onLoadingStatusChange?.('loaded');
-        onLoadProps?.(e);
-      },
-      [onLoadProps]
-    );
-
-    const onError = React.useCallback(
-      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
-        setStatus('error');
-        onLoadingStatusChange?.('error');
-        onErrorProps?.(e);
-      },
-      [onErrorProps]
-    );
-
-    if (status === 'error') {
-      return null;
+function Image({ ref, asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props }: ImageProps & { ref?: React.Ref<ImageRef> }) {
+  const { alt, setStatus, status } = useRootContext();
+
+  useIsomorphicLayoutEffect(() => {
+    if (isValidSource(props?.source)) {
+      setStatus('loading');
     }
 
-    const Component = asChild ? Slot.Image : RNImage;
-    return <Component ref={ref} alt={alt} onLoad={onLoad} onError={onError} {...props} />;
+    return () => {
+      setStatus('error');
+    };
+  }, [props?.source]);
+
+  const onLoad = React.useCallback(
+    (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+      setStatus('loaded');
+      onLoadingStatusChange?.('loaded');
+      onLoadProps?.(e);
+    },
+    [onLoadProps]
+  );
+
+  const onError = React.useCallback(
+    (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+      setStatus('error');
+      onLoadingStatusChange?.('error');
+      onErrorProps?.(e);
+    },
+    [onErrorProps]
+  );
+
+  if (status === 'error') {
+    return null;
   }
-);
+
+  const Component = asChild ? Slot.Image : RNImage;
+  return <Component ref={ref} alt={alt} onLoad={onLoad} onError={onError} {...props} />;
+}
 
 Image.displayName = 'ImageAvatar';
 
-const Fallback = React.forwardRef<FallbackRef, FallbackProps>(({ asChild, ...props }, ref) => {
+function Fallback({ ref, asChild, ...props }: FallbackProps & { ref?: React.Ref<FallbackRef> }) {
   const { alt, status } = useRootContext();
 
   if (status !== 'error') {
@@ -94,7 +89,7 @@ const Fallback = React.forwardRef<FallbackRef, FallbackProps>(({ asChild, ...pro
   }
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role={'img'} aria-label={alt} {...props} />;
-});
+}
 
 Fallback.displayName = 'FallbackAvatar';
 
diff --git a/packages/checkbox/src/checkbox.tsx b/packages/checkbox/src/checkbox.tsx
index f5a87220..dfe2f655 100644
--- a/packages/checkbox/src/checkbox.tsx
+++ b/packages/checkbox/src/checkbox.tsx
@@ -10,22 +10,20 @@ interface RootContext extends RootProps {
 
 const CheckboxContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, disabled = false, checked, onCheckedChange, nativeID, ...props }, ref) => {
-    return (
-      <CheckboxContext.Provider
-        value={{
-          disabled,
-          checked,
-          onCheckedChange,
-          nativeID,
-        }}
-      >
-        <Trigger ref={ref} {...props} />
-      </CheckboxContext.Provider>
-    );
-  }
-);
+function Root({ ref, asChild, disabled = false, checked, onCheckedChange, nativeID, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
+  return (
+    <CheckboxContext.Provider
+      value={{
+        disabled,
+        checked,
+        onCheckedChange,
+        nativeID,
+      }}
+    >
+      <Trigger ref={ref} {...props} />
+    </CheckboxContext.Provider>
+  );
+}
 
 Root.displayName = 'RootNativeCheckbox';
 
@@ -39,61 +37,57 @@ function useCheckboxContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, ...props }, ref) => {
-    const { disabled, checked, onCheckedChange, nativeID } = useCheckboxContext();
+function Trigger({ ref, asChild, onPress: onPressProp, ...props }: SlottablePressableProps & { ref?: React.Ref<PressableRef> }) {
+  const { disabled, checked, onCheckedChange, nativeID } = useCheckboxContext();
 
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      const newValue = !checked;
-      onCheckedChange(newValue);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        ref={ref}
-        nativeID={nativeID}
-        aria-disabled={disabled}
-        role='checkbox'
-        aria-checked={checked}
-        onPress={onPress}
-        accessibilityState={{
-          checked,
-          disabled,
-        }}
-        disabled={disabled}
-        {...props}
-      />
-    );
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    const newValue = !checked;
+    onCheckedChange(newValue);
+    onPressProp?.(ev);
   }
-);
+
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <Component
+      ref={ref}
+      nativeID={nativeID}
+      aria-disabled={disabled}
+      role='checkbox'
+      aria-checked={checked}
+      onPress={onPress}
+      accessibilityState={{
+        checked,
+        disabled,
+      }}
+      disabled={disabled}
+      {...props}
+    />
+  );
+}
 
 Trigger.displayName = 'TriggerNativeCheckbox';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const { checked, disabled } = useCheckboxContext();
+function Indicator({ ref, asChild, forceMount, ...props }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
+  const { checked, disabled } = useCheckboxContext();
 
-    if (!forceMount) {
-      if (!checked) {
-        return null;
-      }
+  if (!forceMount) {
+    if (!checked) {
+      return null;
     }
-
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled}
-        aria-hidden={!(forceMount || checked)}
-        role={'presentation'}
-        {...props}
-      />
-    );
   }
-);
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled}
+      aria-hidden={!(forceMount || checked)}
+      role={'presentation'}
+      {...props}
+    />
+  );
+}
 
 Indicator.displayName = 'IndicatorNativeCheckbox';
 
diff --git a/packages/checkbox/src/checkbox.web.tsx b/packages/checkbox/src/checkbox.web.tsx
index d59db1ac..e7b3be70 100644
--- a/packages/checkbox/src/checkbox.web.tsx
+++ b/packages/checkbox/src/checkbox.web.tsx
@@ -7,61 +7,56 @@ import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from './types';
 
 const CheckboxContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    { asChild, disabled, checked, onCheckedChange, onPress: onPressProp, role: _role, ...props },
-    ref
-  ) => {
-    const augmentedRef = useAugmentedRef({ ref });
+function Root({ ref, asChild, disabled, checked, onCheckedChange, onPress: onPressProp, role: _role, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
+  const augmentedRef = useAugmentedRef({ ref });
 
-    function onPress(ev: GestureResponderEvent) {
-      onPressProp?.(ev);
-      onCheckedChange(!checked);
-    }
+  function onPress(ev: GestureResponderEvent) {
+    onPressProp?.(ev);
+    onCheckedChange(!checked);
+  }
 
-    useIsomorphicLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.dataset.state = checked ? 'checked' : 'unchecked';
-        augRef.value = checked ? 'on' : 'off';
-      }
-    }, [checked]);
+  useIsomorphicLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+      augRef.dataset.state = checked ? 'checked' : 'unchecked';
+      augRef.value = checked ? 'on' : 'off';
+    }
+  }, [checked]);
 
-    useIsomorphicLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
-        augRef.type = 'button';
-        augRef.role = 'checkbox';
+  useIsomorphicLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+      augRef.type = 'button';
+      augRef.role = 'checkbox';
 
-        if (disabled) {
-          augRef.dataset.disabled = 'true';
-        } else {
-          augRef.dataset.disabled = undefined;
-        }
+      if (disabled) {
+        augRef.dataset.disabled = 'true';
+      } else {
+        augRef.dataset.disabled = undefined;
       }
-    }, [disabled]);
+    }
+  }, [disabled]);
 
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <CheckboxContext.Provider value={{ checked, disabled, onCheckedChange }}>
-        <Checkbox.Root
-          checked={checked}
-          onCheckedChange={onCheckedChange}
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <CheckboxContext.Provider value={{ checked, disabled, onCheckedChange }}>
+      <Checkbox.Root
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        asChild
+      >
+        <Component
+          ref={augmentedRef}
+          role='button'
+          onPress={onPress}
           disabled={disabled}
-          asChild
-        >
-          <Component
-            ref={augmentedRef}
-            role='button'
-            onPress={onPress}
-            disabled={disabled}
-            {...props}
-          />
-        </Checkbox.Root>
-      </CheckboxContext.Provider>
-    );
-  }
-);
+          {...props}
+        />
+      </Checkbox.Root>
+    </CheckboxContext.Provider>
+  );
+}
 
 Root.displayName = 'RootWebCheckbox';
 
@@ -75,37 +70,35 @@ function useCheckboxContext() {
   return context;
 }
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const { checked, disabled } = useCheckboxContext();
-    const augmentedRef = useAugmentedRef({ ref });
+function Indicator({ ref, asChild, forceMount, ...props }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
+  const { checked, disabled } = useCheckboxContext();
+  const augmentedRef = useAugmentedRef({ ref });
 
-    useIsomorphicLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLDivElement;
-        augRef.dataset.state = checked ? 'checked' : 'unchecked';
-      }
-    }, [checked]);
+  useIsomorphicLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLDivElement;
+      augRef.dataset.state = checked ? 'checked' : 'unchecked';
+    }
+  }, [checked]);
 
-    useIsomorphicLayoutEffect(() => {
-      if (augmentedRef.current) {
-        const augRef = augmentedRef.current as unknown as HTMLDivElement;
-        if (disabled) {
-          augRef.dataset.disabled = 'true';
-        } else {
-          augRef.dataset.disabled = undefined;
-        }
+  useIsomorphicLayoutEffect(() => {
+    if (augmentedRef.current) {
+      const augRef = augmentedRef.current as unknown as HTMLDivElement;
+      if (disabled) {
+        augRef.dataset.disabled = 'true';
+      } else {
+        augRef.dataset.disabled = undefined;
       }
-    }, [disabled]);
+    }
+  }, [disabled]);
 
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Checkbox.Indicator forceMount={forceMount} asChild>
-        <Component ref={ref} {...props} />
-      </Checkbox.Indicator>
-    );
-  }
-);
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Checkbox.Indicator forceMount={forceMount} asChild>
+      <Component ref={augmentedRef} {...props} />
+    </Checkbox.Indicator>
+  );
+}
 
 Indicator.displayName = 'IndicatorWebCheckbox';
 
diff --git a/packages/collapsible/src/collapsible.tsx b/packages/collapsible/src/collapsible.tsx
index 12e10f95..625b5cf7 100644
--- a/packages/collapsible/src/collapsible.tsx
+++ b/packages/collapsible/src/collapsible.tsx
@@ -14,18 +14,13 @@ import type {
 
 const CollapsibleContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       disabled = false,
       open: openProp,
       defaultOpen,
       onOpenChange: onOpenChangeProp,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -46,8 +41,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
         <Component ref={ref} {...viewProps} />
       </CollapsibleContext.Provider>
     );
-  }
-);
+}
 
 Root.displayName = 'RootNativeCollapsible';
 
@@ -61,8 +55,7 @@ function useCollapsibleContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled: disabledProp = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled: disabledProp = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { disabled, open, onOpenChange, nativeID } = useCollapsibleContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -87,13 +80,11 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
         {...props}
       />
     );
-  }
-);
+}
 
 Trigger.displayName = 'TriggerNativeCollapsible';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const { nativeID, open } = useCollapsibleContext();
 
     if (!forceMount) {
@@ -112,8 +103,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
         {...props}
       />
     );
-  }
-);
+}
 
 Content.displayName = 'ContentNativeCollapsible';
 
diff --git a/packages/collapsible/src/collapsible.web.tsx b/packages/collapsible/src/collapsible.web.tsx
index c7957c10..95a0d3fd 100644
--- a/packages/collapsible/src/collapsible.web.tsx
+++ b/packages/collapsible/src/collapsible.web.tsx
@@ -19,24 +19,19 @@ import type {
 
 const CollapsibleContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       disabled = false,
       open: openProp,
       defaultOpen,
       onOpenChange: onOpenChangeProp,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
       onChange: onOpenChangeProp,
     });
-    const augmentedRef = useAugmentedRef({ ref });
+    const augmentedRef = useAugmentedRef({ ref: ref || React.createRef() });
 
     useIsomorphicLayoutEffect(() => {
       if (augmentedRef.current) {
@@ -75,8 +70,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
         </Collapsible.Root>
       </CollapsibleContext.Provider>
     );
-  }
-);
+}
 
 Root.displayName = 'RootWebCollapsible';
 
@@ -90,10 +84,9 @@ function useCollapsibleContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled: disabledProp = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled: disabledProp = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { disabled, open, onOpenChange } = useCollapsibleContext();
-    const augmentedRef = useAugmentedRef({ ref });
+    const augmentedRef = useAugmentedRef({ ref: ref || React.createRef() });
 
     useIsomorphicLayoutEffect(() => {
       if (augmentedRef.current) {
@@ -132,14 +125,12 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
         />
       </Collapsible.Trigger>
     );
-  }
-);
+}
 
 Trigger.displayName = 'TriggerWebCollapsible';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
-    const augmentedRef = useAugmentedRef({ ref });
+function Content({ ref, asChild, forceMount, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
+    const augmentedRef = useAugmentedRef({ ref: ref || React.createRef() });
     const { open } = useCollapsibleContext();
 
     useIsomorphicLayoutEffect(() => {
@@ -155,8 +146,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
         <Component ref={augmentedRef} {...props} />
       </Collapsible.Content>
     );
-  }
-);
+}
 
 Content.displayName = 'ContentWebCollapsible';
 
diff --git a/packages/context-menu/src/context-menu.tsx b/packages/context-menu/src/context-menu.tsx
index d004ea85..d9dc94c3 100644
--- a/packages/context-menu/src/context-menu.tsx
+++ b/packages/context-menu/src/context-menu.tsx
@@ -63,8 +63,7 @@ interface IRootContext extends RootProps {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, relativeTo = 'longPress', onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, relativeTo = 'longPress', onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [pressPosition, setPressPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -93,7 +92,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeContextMenu';
 
@@ -109,17 +107,12 @@ function useRootContext() {
 
 const accessibilityActions = [{ name: 'longpress' }];
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  (
-    {
-      asChild,
+function Trigger({ ref, asChild,
       onLongPress: onLongPressProp,
       disabled = false,
       onAccessibilityAction: onAccessibilityActionProp,
       ...props
-    },
-    ref
-  ) => {
+     }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange, relativeTo, setPressPosition } = useRootContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -186,7 +179,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeContextMenu';
 
@@ -213,8 +205,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange, setContentLayout, setPressPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -235,14 +226,10 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeContextMenu';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -254,9 +241,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -318,15 +303,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeContextMenu';
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    { asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props },
-    ref
-  ) => {
+function Item({ ref, asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { onOpenChange, setContentLayout, setPressPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -352,21 +332,20 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       />
     );
   }
-);
 
 Item.displayName = 'ItemNativeContextMenu';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='group' {...props} />;
-});
+}
 
 Group.displayName = 'GroupNativeContextMenu';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Label.displayName = 'LabelNativeContextMenu';
 
@@ -379,10 +358,7 @@ type FormItemContext =
 
 const FormItemContext = React.createContext<FormItemContext | null>(null);
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
@@ -390,9 +366,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       closeOnPress = true,
       disabled = false,
       ...props
-    },
-    ref
-  ) => {
+     }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { onOpenChange, setContentLayout, setPressPosition, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -422,7 +396,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemNativeContextMenu';
 
@@ -436,8 +409,7 @@ function useFormItemContext() {
   return context;
 }
 
-const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
-  ({ asChild, value, onValueChange, ...props }, ref) => {
+function RadioGroup({ ref, asChild, value, onValueChange, ...props  }: RadioGroupProps & { ref?: React.Ref<RadioGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <FormItemContext.Provider value={{ value, onValueChange }}>
@@ -445,7 +417,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupNativeContextMenu';
 
@@ -455,19 +426,14 @@ type BothFormItemContext = Exclude<FormItemContext, { checked: boolean }> & {
 
 const RadioItemContext = React.createContext({} as { itemValue: string });
 
-const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
-  (
-    {
-      asChild,
+function RadioItem({ ref, asChild,
       value: itemValue,
       textValue,
       onPress: onPressProp,
       disabled = false,
       closeOnPress = true,
       ...props
-    },
-    ref
-  ) => {
+     }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onOpenChange, setContentLayout, setPressPosition } = useRootContext();
 
     const { value, onValueChange } = useFormItemContext() as BothFormItemContext;
@@ -500,7 +466,6 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemNativeContextMenu';
 
@@ -508,8 +473,7 @@ function useItemIndicatorContext() {
   return React.useContext(RadioItemContext);
 }
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const { itemValue } = useItemIndicatorContext();
     const { checked, value } = useFormItemContext() as BothFormItemContext;
 
@@ -524,16 +488,13 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='presentation' {...props} />;
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorNativeContextMenu';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />;
   }
-);
 
 Separator.displayName = 'SeparatorNativeContextMenu';
 
@@ -543,8 +504,7 @@ const SubContext = React.createContext<{
   onOpenChange: (value: boolean) => void;
 } | null>(null);
 
-const Sub = React.forwardRef<SubRef, SubProps>(
-  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+function Sub({ ref, asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props  }: SubProps & { ref?: React.Ref<SubRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -565,7 +525,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </SubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubNativeContextMenu';
 
@@ -577,8 +536,7 @@ function useSubContext() {
   return context;
 }
 
-const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
-  ({ asChild, textValue, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function SubTrigger({ ref, asChild, textValue, onPress: onPressProp, disabled = false, ...props  }: SubTriggerProps & { ref?: React.Ref<SubTriggerRef> }) {
     const { nativeID, open, onOpenChange } = useSubContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -602,12 +560,10 @@ const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
       />
     );
   }
-);
 
 SubTrigger.displayName = 'SubTriggerNativeContextMenu';
 
-const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
-  ({ asChild = false, forceMount, ...props }, ref) => {
+function SubContent({ ref, asChild = false, forceMount, ...props  }: SubContentProps & { ref?: React.Ref<SubContentRef> }) {
     const { open, nativeID } = useSubContext();
 
     if (!forceMount) {
@@ -619,7 +575,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} role='group' aria-labelledby={nativeID} {...props} />;
   }
-);
 
 Content.displayName = 'ContentNativeContextMenu';
 
diff --git a/packages/context-menu/src/context-menu.web.tsx b/packages/context-menu/src/context-menu.web.tsx
index 5e384b9e..ebebcea9 100644
--- a/packages/context-menu/src/context-menu.web.tsx
+++ b/packages/context-menu/src/context-menu.web.tsx
@@ -47,8 +47,7 @@ const ContextMenuContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open, setOpen] = React.useState(false);
 
     function onOpenChange(value: boolean) {
@@ -65,7 +64,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ContextMenuContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebContextMenu';
 
@@ -79,8 +77,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open } = useRootContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -119,7 +116,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </ContextMenu.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebContextMenu';
 
@@ -127,10 +123,10 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <ContextMenu.Portal forceMount={forceMount} container={container} children={children} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(({ asChild, ...props }, ref) => {
+function Overlay({ ref, asChild, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Overlay.displayName = 'OverlayWebContextMenu';
 
@@ -138,10 +134,7 @@ const ContextMenuContentContext = React.createContext<{
   close: () => void;
 } | null>(null);
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align: _align,
       side: _side,
@@ -159,9 +152,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       sticky,
       hideWhenDetached,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const itemRef = React.useRef<HTMLDivElement>(null);
 
     function close() {
@@ -199,7 +190,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </ContextMenuContentContext.Provider>
     );
   }
-);
 
 Content.displayName = 'ContentWebContextMenu';
 
@@ -213,8 +203,7 @@ function useContextMenuContentContext() {
   return context;
 }
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  ({ asChild, textValue, closeOnPress = true, onPress: onPressProp, ...props }, ref) => {
+function Item({ ref, asChild, textValue, closeOnPress = true, onPress: onPressProp, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { close } = useContextMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -245,36 +234,32 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ContextMenu.Item>
     );
   }
-);
 
 Item.displayName = 'ItemWebContextMenu';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <ContextMenu.Group asChild>
       <Component ref={ref} {...props} />
     </ContextMenu.Group>
   );
-});
+}
 
 Group.displayName = 'GroupWebContextMenu';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return (
     <ContextMenu.Label asChild>
       <Component ref={ref} {...props} />
     </ContextMenu.Label>
   );
-});
+}
 
 Label.displayName = 'LabelWebContextMenu';
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
@@ -283,9 +268,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { close } = useContextMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -329,7 +312,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </ContextMenu.CheckboxItem>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemWebContextMenu';
 
@@ -338,8 +320,7 @@ const ContextMenuRadioGroupContext = React.createContext<{
   onValueChange?: (value: string) => void;
 } | null>(null);
 
-const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
-  ({ asChild, value, onValueChange, ...props }, ref) => {
+function RadioGroup({ ref, asChild, value, onValueChange, ...props  }: RadioGroupProps & { ref?: React.Ref<RadioGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ContextMenuRadioGroupContext.Provider value={{ value, onValueChange }}>
@@ -349,7 +330,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </ContextMenuRadioGroupContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupWebContextMenu';
 
@@ -363,19 +343,14 @@ function useContextMenuRadioGroupContext() {
   return context;
 }
 
-const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
-  (
-    {
-      asChild,
+function RadioItem({ ref, asChild,
       value,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onValueChange } = useContextMenuRadioGroupContext();
     const { close } = useContextMenuContentContext();
 
@@ -416,12 +391,10 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </ContextMenu.RadioItem>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemWebContextMenu';
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ContextMenu.ItemIndicator forceMount={forceMount} asChild>
@@ -429,12 +402,10 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
       </ContextMenu.ItemIndicator>
     );
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorWebContextMenu';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ContextMenu.Separator asChild>
@@ -442,7 +413,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </ContextMenu.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebContextMenu';
 
@@ -451,8 +421,7 @@ const ContextMenuSubContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Sub = React.forwardRef<SubRef, SubProps>(
-  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+function Sub({ ref, asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props  }: SubProps & { ref?: React.Ref<SubRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -468,7 +437,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </ContextMenuSubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubWebContextMenu';
 
@@ -482,8 +450,7 @@ function useSubContext() {
   return context;
 }
 
-const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
-  ({ asChild, textValue, disabled = false, onPress: onPressProp, ...props }, ref) => {
+function SubTrigger({ ref, asChild, textValue, disabled = false, onPress: onPressProp, ...props  }: SubTriggerProps & { ref?: React.Ref<SubTriggerRef> }) {
     const { onOpenChange } = useSubContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -498,12 +465,10 @@ const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
       </ContextMenu.SubTrigger>
     );
   }
-);
 
 SubTrigger.displayName = 'SubTriggerWebContextMenu';
 
-const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
-  ({ asChild = false, forceMount, ...props }, ref) => {
+function SubContent({ ref, asChild = false, forceMount, ...props  }: SubContentProps & { ref?: React.Ref<SubContentRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <ContextMenu.Portal>
@@ -513,7 +478,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
       </ContextMenu.Portal>
     );
   }
-);
 
 Content.displayName = 'ContentWebContextMenu';
 
diff --git a/packages/dialog/src/dialog.tsx b/packages/dialog/src/dialog.tsx
index 03657774..601f5298 100644
--- a/packages/dialog/src/dialog.tsx
+++ b/packages/dialog/src/dialog.tsx
@@ -24,8 +24,7 @@ import type {
 
 const DialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -46,7 +45,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </DialogContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeDialog';
 
@@ -58,8 +56,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -81,7 +78,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeDialog';
 
@@ -104,8 +100,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, closeOnPress = true, onPress: OnPressProp, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, closeOnPress = true, onPress: OnPressProp, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -124,12 +119,10 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeDialog';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const { open, nativeID, onOpenChange } = useRootContext();
 
     React.useEffect(() => {
@@ -163,12 +156,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeDialog';
 
-const Close = React.forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Close({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: CloseProps & { ref?: React.Ref<CloseRef> }) {
     const { onOpenChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -189,21 +180,20 @@ const Close = React.forwardRef<CloseRef, CloseProps>(
       />
     );
   }
-);
 
 Close.displayName = 'CloseNativeDialog';
 
-const Title = React.forwardRef<TitleRef, TitleProps>((props, ref) => {
+function Title({ ref, ...props }: TitleProps & { ref?: React.Ref<TitleRef> }) {
   const { nativeID } = useRootContext();
   return <Text ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
-});
+}
 
 Title.displayName = 'TitleNativeDialog';
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>((props, ref) => {
+function Description({ ref, ...props }: DescriptionProps & { ref?: React.Ref<DescriptionRef> }) {
   const { nativeID } = useRootContext();
   return <Text ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
-});
+}
 
 Description.displayName = 'DescriptionNativeDialog';
 
diff --git a/packages/dialog/src/dialog.web.tsx b/packages/dialog/src/dialog.web.tsx
index a4274588..0676a850 100644
--- a/packages/dialog/src/dialog.web.tsx
+++ b/packages/dialog/src/dialog.web.tsx
@@ -28,8 +28,7 @@ import type {
 
 const DialogContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -44,7 +43,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </DialogContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebDialog';
 
@@ -56,8 +54,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, role: _role, disabled, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { onOpenChange, open } = useRootContext();
     function onPress(ev: GestureResponderEvent) {
@@ -88,7 +85,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Dialog.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebDialog';
 
@@ -96,8 +92,7 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <Dialog.Portal forceMount={forceMount} children={children} container={container} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <Dialog.Overlay forceMount={forceMount}>
@@ -105,14 +100,10 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
       </Dialog.Overlay>
     );
   }
-);
 
 Overlay.displayName = 'OverlayWebDialog';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild,
+function Content({ ref, asChild,
       forceMount,
       onOpenAutoFocus,
       onCloseAutoFocus,
@@ -120,9 +111,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onInteractOutside,
       onPointerDownOutside,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Dialog.Content
@@ -137,12 +126,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Dialog.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebDialog';
 
-const Close = React.forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+function Close({ ref, asChild, onPress: onPressProp, disabled, ...props  }: CloseProps & { ref?: React.Ref<CloseRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { onOpenChange, open } = useRootContext();
 
@@ -175,23 +162,21 @@ const Close = React.forwardRef<CloseRef, CloseProps>(
       </>
     );
   }
-);
 
 Close.displayName = 'CloseWebDialog';
 
-const Title = React.forwardRef<TitleRef, TitleProps>(({ asChild, ...props }, ref) => {
+function Title({ ref, asChild, ...props  }: TitleProps & { ref?: React.Ref<TitleRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return (
     <Dialog.Title asChild>
       <Component ref={ref} {...props} />
     </Dialog.Title>
   );
-});
+}
 
 Title.displayName = 'TitleWebDialog';
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>(
-  ({ asChild, ...props }, ref) => {
+function Description({ ref, asChild, ...props  }: DescriptionProps & { ref?: React.Ref<DescriptionRef> }) {
     const Component = asChild ? Slot.Text : Text;
     return (
       <Dialog.Description asChild>
@@ -199,7 +184,6 @@ const Description = React.forwardRef<DescriptionRef, DescriptionProps>(
       </Dialog.Description>
     );
   }
-);
 
 Description.displayName = 'DescriptionWebDialog';
 
diff --git a/packages/dropdown-menu/src/dropdown-menu.tsx b/packages/dropdown-menu/src/dropdown-menu.tsx
index 458ef97c..7e264eb5 100644
--- a/packages/dropdown-menu/src/dropdown-menu.tsx
+++ b/packages/dropdown-menu/src/dropdown-menu.tsx
@@ -62,8 +62,7 @@ interface IRootContext {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -91,7 +90,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeDropdownMenu';
 
@@ -105,8 +103,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange, setTriggerPosition } = useRootContext();
 
     const augmentedRef = useAugmentedRef({
@@ -148,7 +145,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeDropdownMenu';
 
@@ -175,8 +171,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -197,17 +192,13 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeDropdownMenu';
 
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -219,9 +210,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -282,15 +271,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeDropdownMenu';
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    { asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props },
-    ref
-  ) => {
+function Item({ ref, asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -316,21 +300,20 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       />
     );
   }
-);
 
 Item.displayName = 'ItemNativeDropdownMenu';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='group' {...props} />;
-});
+}
 
 Group.displayName = 'GroupNativeDropdownMenu';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Label.displayName = 'LabelNativeDropdownMenu';
 
@@ -343,10 +326,7 @@ type FormItemContext =
 
 const FormItemContext = React.createContext<FormItemContext | null>(null);
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
@@ -354,9 +334,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       closeOnPress = true,
       disabled = false,
       ...props
-    },
-    ref
-  ) => {
+     }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { onOpenChange, setContentLayout, setTriggerPosition, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -386,7 +364,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemNativeDropdownMenu';
 
@@ -400,8 +377,7 @@ function useFormItemContext() {
   return context;
 }
 
-const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
-  ({ asChild, value, onValueChange, ...props }, ref) => {
+function RadioGroup({ ref, asChild, value, onValueChange, ...props  }: RadioGroupProps & { ref?: React.Ref<RadioGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <FormItemContext.Provider value={{ value, onValueChange }}>
@@ -409,7 +385,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupNativeDropdownMenu';
 
@@ -419,19 +394,14 @@ type BothFormItemContext = Exclude<FormItemContext, { checked: boolean }> & {
 
 const RadioItemContext = React.createContext({} as { itemValue: string });
 
-const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
-  (
-    {
-      asChild,
+function RadioItem({ ref, asChild,
       value: itemValue,
       textValue,
       onPress: onPressProp,
       disabled = false,
       closeOnPress = true,
       ...props
-    },
-    ref
-  ) => {
+     }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     const { value, onValueChange } = useFormItemContext() as BothFormItemContext;
@@ -464,7 +434,6 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemNativeDropdownMenu';
 
@@ -472,8 +441,7 @@ function useItemIndicatorContext() {
   return React.useContext(RadioItemContext);
 }
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const { itemValue } = useItemIndicatorContext();
     const { checked, value } = useFormItemContext() as BothFormItemContext;
 
@@ -488,16 +456,13 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='presentation' {...props} />;
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorNativeDropdownMenu';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />;
   }
-);
 
 Separator.displayName = 'SeparatorNativeDropdownMenu';
 
@@ -507,8 +472,7 @@ const SubContext = React.createContext<{
   onOpenChange: (value: boolean) => void;
 } | null>(null);
 
-const Sub = React.forwardRef<SubRef, SubProps>(
-  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+function Sub({ ref, asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props  }: SubProps & { ref?: React.Ref<SubRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -529,7 +493,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </SubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubNativeDropdownMenu';
 
@@ -541,8 +504,7 @@ function useSubContext() {
   return context;
 }
 
-const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
-  ({ asChild, textValue, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function SubTrigger({ ref, asChild, textValue, onPress: onPressProp, disabled = false, ...props  }: SubTriggerProps & { ref?: React.Ref<SubTriggerRef> }) {
     const { nativeID, open, onOpenChange } = useSubContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -566,12 +528,10 @@ const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
       />
     );
   }
-);
 
 SubTrigger.displayName = 'SubTriggerNativeDropdownMenu';
 
-const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
-  ({ asChild = false, forceMount, ...props }, ref) => {
+function SubContent({ ref, asChild = false, forceMount, ...props  }: SubContentProps & { ref?: React.Ref<SubContentRef> }) {
     const { open, nativeID } = useSubContext();
 
     if (!forceMount) {
@@ -583,7 +543,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} role='group' aria-labelledby={nativeID} {...props} />;
   }
-);
 
 Content.displayName = 'ContentNativeDropdownMenu';
 
diff --git a/packages/dropdown-menu/src/dropdown-menu.web.tsx b/packages/dropdown-menu/src/dropdown-menu.web.tsx
index bf1e558c..17faaeef 100644
--- a/packages/dropdown-menu/src/dropdown-menu.web.tsx
+++ b/packages/dropdown-menu/src/dropdown-menu.web.tsx
@@ -47,8 +47,7 @@ const DropdownMenuContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open, setOpen] = React.useState(false);
 
     function onOpenChange(open: boolean) {
@@ -65,7 +64,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </DropdownMenuContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebDropdownMenu';
 
@@ -79,8 +77,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange } = useRootContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -119,7 +116,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </DropdownMenu.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebDropdownMenu';
 
@@ -127,10 +123,10 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <DropdownMenu.Portal forceMount={forceMount} container={container} children={children} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(({ asChild, ...props }, ref) => {
+function Overlay({ ref, asChild, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Overlay.displayName = 'OverlayWebDropdownMenu';
 
@@ -138,10 +134,7 @@ const DropdownMenuContentContext = React.createContext<{
   close: () => void;
 } | null>(null);
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align,
       side,
@@ -159,9 +152,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       sticky,
       hideWhenDetached,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const itemRef = React.useRef<HTMLDivElement>(null);
 
     function close() {
@@ -201,7 +192,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </DropdownMenuContentContext.Provider>
     );
   }
-);
 
 Content.displayName = 'ContentWebDropdownMenu';
 
@@ -215,18 +205,13 @@ function useDropdownMenuContentContext() {
   return context;
 }
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    {
-      asChild,
+function Item({ ref, asChild,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { close } = useDropdownMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -264,36 +249,32 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </DropdownMenu.Item>
     );
   }
-);
 
 Item.displayName = 'ItemWebDropdownMenu';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <DropdownMenu.Group asChild>
       <Component ref={ref} {...props} />
     </DropdownMenu.Group>
   );
-});
+}
 
 Group.displayName = 'GroupWebDropdownMenu';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return (
     <DropdownMenu.Label asChild>
       <Component ref={ref} {...props} />
     </DropdownMenu.Label>
   );
-});
+}
 
 Label.displayName = 'LabelWebDropdownMenu';
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
@@ -302,9 +283,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { close } = useDropdownMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -346,7 +325,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </DropdownMenu.CheckboxItem>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemWebDropdownMenu';
 
@@ -355,8 +333,7 @@ const DropdownMenuRadioGroupContext = React.createContext<{
   onValueChange?: (value: string) => void;
 } | null>(null);
 
-const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
-  ({ asChild, value, onValueChange, ...props }, ref) => {
+function RadioGroup({ ref, asChild, value, onValueChange, ...props  }: RadioGroupProps & { ref?: React.Ref<RadioGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <DropdownMenuRadioGroupContext.Provider value={{ value, onValueChange }}>
@@ -366,7 +343,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </DropdownMenuRadioGroupContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupWebDropdownMenu';
 
@@ -380,19 +356,14 @@ function useDropdownMenuRadioGroupContext() {
   return context;
 }
 
-const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
-  (
-    {
-      asChild,
+function RadioItem({ ref, asChild,
       value,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onValueChange } = useDropdownMenuRadioGroupContext();
     const { close } = useDropdownMenuContentContext();
 
@@ -433,12 +404,10 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </DropdownMenu.RadioItem>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemWebDropdownMenu';
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <DropdownMenu.ItemIndicator forceMount={forceMount} asChild>
@@ -446,12 +415,10 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
       </DropdownMenu.ItemIndicator>
     );
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorWebDropdownMenu';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <DropdownMenu.Separator asChild>
@@ -459,7 +426,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </DropdownMenu.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebDropdownMenu';
 
@@ -468,8 +434,7 @@ const DropdownMenuSubContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Sub = React.forwardRef<SubRef, SubProps>(
-  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+function Sub({ ref, asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props  }: SubProps & { ref?: React.Ref<SubRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -485,7 +450,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </DropdownMenuSubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubWebDropdownMenu';
 
@@ -499,8 +463,7 @@ function useSubContext() {
   return context;
 }
 
-const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
-  ({ asChild, textValue, disabled = false, onPress: onPressProp, ...props }, ref) => {
+function SubTrigger({ ref, asChild, textValue, disabled = false, onPress: onPressProp, ...props  }: SubTriggerProps & { ref?: React.Ref<SubTriggerRef> }) {
     const { onOpenChange } = useSubContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -515,12 +478,10 @@ const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
       </DropdownMenu.SubTrigger>
     );
   }
-);
 
 SubTrigger.displayName = 'SubTriggerWebDropdownMenu';
 
-const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
-  ({ asChild = false, forceMount, ...props }, ref) => {
+function SubContent({ ref, asChild = false, forceMount, ...props  }: SubContentProps & { ref?: React.Ref<SubContentRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <DropdownMenu.Portal>
@@ -530,7 +491,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
       </DropdownMenu.Portal>
     );
   }
-);
 
 Content.displayName = 'ContentWebDropdownMenu';
 
diff --git a/packages/hover-card/src/hover-card.tsx b/packages/hover-card/src/hover-card.tsx
index 1915c629..cd6b7884 100644
--- a/packages/hover-card/src/hover-card.tsx
+++ b/packages/hover-card/src/hover-card.tsx
@@ -35,17 +35,12 @@ interface IRootContext extends SharedRootContext {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       openDelay: _openDelay,
       closeDelay: _closeDelay,
       onOpenChange: onOpenChangeProp,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -73,7 +68,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeHoverCard';
 
@@ -87,8 +81,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange, setTriggerPosition } = useRootContext();
 
     const augmentedRef = useAugmentedRef({
@@ -129,7 +122,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeHoverCard';
 
@@ -156,8 +148,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -178,17 +169,13 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeHoverCard';
 
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -200,9 +187,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -264,7 +249,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeHoverCard';
 
diff --git a/packages/hover-card/src/hover-card.web.tsx b/packages/hover-card/src/hover-card.web.tsx
index b35915cd..d407b7aa 100644
--- a/packages/hover-card/src/hover-card.web.tsx
+++ b/packages/hover-card/src/hover-card.web.tsx
@@ -18,8 +18,7 @@ import type {
 
 const HoverCardContext = React.createContext<SharedRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, openDelay, closeDelay, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, openDelay, closeDelay, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open, setOpen] = React.useState(false);
 
     function onOpenChange(value: boolean) {
@@ -41,7 +40,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </HoverCardContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebHoverCard';
 
@@ -55,7 +53,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ asChild, ...props }, ref) => {
+function Trigger({ ref, asChild, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
   const { onOpenChange } = useRootContext();
   const augmentedRef = useAugmentedRef({
     ref,
@@ -75,7 +73,7 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ asChild, ...props
       <Component ref={augmentedRef} {...props} />
     </HoverCard.Trigger>
   );
-});
+}
 
 Trigger.displayName = 'TriggerWebHoverCard';
 
@@ -83,17 +81,14 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <HoverCard.Portal forceMount={forceMount} container={container} children={children} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(({ asChild, ...props }, ref) => {
+function Overlay({ ref, asChild, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Overlay.displayName = 'OverlayWebHoverCard';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align,
       side,
@@ -111,9 +106,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       sticky,
       hideWhenDetached,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <HoverCard.Content
@@ -136,7 +129,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </HoverCard.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebHoverCard';
 
diff --git a/packages/label/src/label.tsx b/packages/label/src/label.tsx
index f9b69016..86c979c7 100644
--- a/packages/label/src/label.tsx
+++ b/packages/label/src/label.tsx
@@ -3,17 +3,17 @@ import * as React from 'react';
 import { Pressable, Text as RNText } from 'react-native';
 import type { RootProps, RootRef, TextProps, TextRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => {
+function Root({ ref, asChild, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Root.displayName = 'RootNativeLabel';
 
-const Text = React.forwardRef<TextRef, TextProps>(({ asChild, ...props }, ref) => {
+function Text({ ref, asChild, ...props }: TextProps & { ref?: React.Ref<TextRef> }) {
   const Component = asChild ? Slot.Text : RNText;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Text.displayName = 'TextNativeLabel';
 
diff --git a/packages/label/src/label.web.tsx b/packages/label/src/label.web.tsx
index f7750e94..67b0be18 100644
--- a/packages/label/src/label.web.tsx
+++ b/packages/label/src/label.web.tsx
@@ -4,23 +4,21 @@ import * as React from 'react';
 import { Pressable, Text as RNText } from 'react-native';
 import type { RootProps, RootRef, TextProps, TextRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(({ asChild, tabIndex = -1, ...props }, ref) => {
+function Root({ ref, asChild, tabIndex = -1, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} tabIndex={tabIndex} {...props} />;
-});
+}
 
 Root.displayName = 'RootWebLabel';
 
-const Text = React.forwardRef<TextRef, TextProps>(
-  ({ asChild, nativeID, htmlFor, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Label.Root asChild={!htmlFor} id={nativeID} htmlFor={htmlFor}>
-        <Component ref={ref} {...props} />
-      </Label.Root>
-    );
-  }
-);
+function Text({ ref, asChild, nativeID, htmlFor, ...props }: TextProps & { ref?: React.Ref<TextRef> }) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Label.Root asChild={!htmlFor} id={nativeID} htmlFor={htmlFor}>
+      <Component ref={ref} {...props} />
+    </Label.Root>
+  );
+}
 
 Text.displayName = 'TextWebLabel';
 
diff --git a/packages/menubar/src/menubar.tsx b/packages/menubar/src/menubar.tsx
index 5451007a..b518ae54 100644
--- a/packages/menubar/src/menubar.tsx
+++ b/packages/menubar/src/menubar.tsx
@@ -62,8 +62,7 @@ interface IMenuContext extends RootProps {
 
 const RootContext = React.createContext<IMenuContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, onValueChange, ...viewProps }, ref) => {
+function Root({ ref, asChild, value, onValueChange, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -85,7 +84,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootMenubar';
 
@@ -99,7 +97,7 @@ function useRootContext() {
 
 const MenuContext = React.createContext<MenuProps | null>(null);
 
-const Menu = React.forwardRef<MenuRef, MenuProps>(({ asChild, value, ...viewProps }, ref) => {
+function Menu({ ref, asChild, value, ...viewProps  }: MenuProps & { ref?: React.Ref<MenuRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <MenuContext.Provider
@@ -110,7 +108,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>(({ asChild, value, ...viewProp
       <Component ref={ref} role='menubar' {...viewProps} />
     </MenuContext.Provider>
   );
-});
+}
 
 Menu.displayName = 'MenuMenubar';
 
@@ -122,8 +120,7 @@ function useMenuContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const triggerRef = useAugmentedRef({ ref });
     const { value, onValueChange, setTriggerPosition } = useRootContext();
     const { value: menuValue } = useMenuContext();
@@ -151,7 +148,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerMenubar';
 
@@ -183,8 +179,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { value, onValueChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -205,17 +200,13 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayMenubar';
 
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -227,9 +218,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       value,
       onValueChange,
@@ -292,15 +281,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentMenubar';
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    { asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props },
-    ref
-  ) => {
+function Item({ ref, asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { onValueChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -326,21 +310,20 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       />
     );
   }
-);
 
 Item.displayName = 'ItemMenubar';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='group' {...props} />;
-});
+}
 
 Group.displayName = 'GroupMenubar';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Label.displayName = 'LabelMenubar';
 
@@ -353,10 +336,7 @@ type FormItemContext =
 
 const FormItemContext = React.createContext<FormItemContext | null>(null);
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
@@ -364,9 +344,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       closeOnPress = true,
       disabled = false,
       ...props
-    },
-    ref
-  ) => {
+     }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { onValueChange, setTriggerPosition, setContentLayout, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -396,7 +374,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemMenubar';
 
@@ -410,8 +387,7 @@ function useFormItemContext() {
   return context;
 }
 
-const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
-  ({ asChild, value, onValueChange, ...props }, ref) => {
+function RadioGroup({ ref, asChild, value, onValueChange, ...props  }: RadioGroupProps & { ref?: React.Ref<RadioGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <FormItemContext.Provider value={{ value, onValueChange }}>
@@ -419,7 +395,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupMenubar';
 
@@ -429,19 +404,14 @@ type BothFormItemContext = Exclude<FormItemContext, { checked: boolean }> & {
 
 const RadioItemContext = React.createContext({} as { itemValue: string });
 
-const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
-  (
-    {
-      asChild,
+function RadioItem({ ref, asChild,
       value: itemValue,
       textValue,
       onPress: onPressProp,
       disabled = false,
       closeOnPress = true,
       ...props
-    },
-    ref
-  ) => {
+     }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const {
       onValueChange: onRootValueChange,
       setTriggerPosition,
@@ -478,7 +448,6 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemMenubar';
 
@@ -486,8 +455,7 @@ function useItemIndicatorContext() {
   return React.useContext(RadioItemContext);
 }
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const { itemValue } = useItemIndicatorContext();
     const { checked, value } = useFormItemContext() as BothFormItemContext;
 
@@ -502,16 +470,13 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='presentation' {...props} />;
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorMenubar';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />;
   }
-);
 
 Separator.displayName = 'SeparatorMenubar';
 
@@ -521,8 +486,7 @@ const SubContext = React.createContext<{
   onOpenChange: (value: boolean) => void;
 } | null>(null);
 
-const Sub = React.forwardRef<SubRef, SubProps>(
-  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+function Sub({ ref, asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props  }: SubProps & { ref?: React.Ref<SubRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -543,7 +507,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </SubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubMenubar';
 
@@ -555,8 +518,7 @@ function useSubContext() {
   return context;
 }
 
-const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
-  ({ asChild, textValue, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function SubTrigger({ ref, asChild, textValue, onPress: onPressProp, disabled = false, ...props  }: SubTriggerProps & { ref?: React.Ref<SubTriggerRef> }) {
     const { nativeID, open, onOpenChange } = useSubContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -580,12 +542,10 @@ const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
       />
     );
   }
-);
 
 SubTrigger.displayName = 'SubTriggerMenubar';
 
-const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
-  ({ asChild = false, forceMount, ...props }, ref) => {
+function SubContent({ ref, asChild = false, forceMount, ...props  }: SubContentProps & { ref?: React.Ref<SubContentRef> }) {
     const { open, nativeID } = useSubContext();
 
     if (!forceMount) {
@@ -597,7 +557,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='group' aria-labelledby={nativeID} {...props} />;
   }
-);
 
 SubContent.displayName = 'SubContentMenubar';
 
diff --git a/packages/menubar/src/menubar.web.tsx b/packages/menubar/src/menubar.web.tsx
index 8fc6e964..419a9c63 100644
--- a/packages/menubar/src/menubar.web.tsx
+++ b/packages/menubar/src/menubar.web.tsx
@@ -46,8 +46,7 @@ import type {
 
 const RootContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, onValueChange, ...viewProps }, ref) => {
+function Root({ ref, asChild, value, onValueChange, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <RootContext.Provider value={{ value, onValueChange }}>
@@ -57,7 +56,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebMenubar';
 
@@ -71,7 +69,7 @@ function useRootContext() {
 
 const MenuContext = React.createContext<MenuProps | null>(null);
 
-const Menu = React.forwardRef<MenuRef, MenuProps>(({ asChild, value, ...viewProps }, ref) => {
+function Menu({ ref, asChild, value, ...viewProps  }: MenuProps & { ref?: React.Ref<MenuRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <MenuContext.Provider value={{ value }}>
@@ -80,7 +78,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>(({ asChild, value, ...viewProp
       </Menubar.Menu>
     </MenuContext.Provider>
   );
-});
+}
 
 Menu.displayName = 'MenuWebMenubar';
 
@@ -92,8 +90,7 @@ function useMenuContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { value: menuValue } = useMenuContext();
     const { value } = useRootContext();
@@ -123,7 +120,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Menubar.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebMenubar';
 
@@ -131,10 +127,10 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <Menubar.Portal forceMount={forceMount} container={container} children={children} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(({ asChild, ...props }, ref) => {
+function Overlay({ ref, asChild, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Overlay.displayName = 'OverlayWebMenubar';
 
@@ -142,10 +138,7 @@ const MenubarContentContext = React.createContext<{
   close: () => void;
 } | null>(null);
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align,
       side,
@@ -163,9 +156,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       sticky,
       hideWhenDetached,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const itemRef = React.useRef<HTMLDivElement>(null);
 
     function close() {
@@ -206,7 +197,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </MenubarContentContext.Provider>
     );
   }
-);
 
 Content.displayName = 'ContentWebMenubar';
 
@@ -220,18 +210,13 @@ function useMenubarContentContext() {
   return context;
 }
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    {
-      asChild,
+function Item({ ref, asChild,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { close } = useMenubarContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -269,36 +254,32 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </Menubar.Item>
     );
   }
-);
 
 Item.displayName = 'ItemWebMenubar';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Menubar.Group asChild>
       <Component ref={ref} {...props} />
     </Menubar.Group>
   );
-});
+}
 
 Group.displayName = 'GroupWebMenubar';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return (
     <Menubar.Label asChild>
       <Component ref={ref} {...props} />
     </Menubar.Label>
   );
-});
+}
 
 Label.displayName = 'LabelWebMenubar';
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
@@ -307,9 +288,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     function onKeyDown(ev: React.KeyboardEvent) {
       onKeyDownProp?.(ev);
       if (ev.key === 'Enter' || ev.key === ' ') {
@@ -349,7 +328,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </Menubar.CheckboxItem>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemWebMenubar';
 
@@ -358,8 +336,7 @@ const MenubarRadioGroupContext = React.createContext<{
   onValueChange?: (value: string) => void;
 } | null>(null);
 
-const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
-  ({ asChild, value, onValueChange, ...props }, ref) => {
+function RadioGroup({ ref, asChild, value, onValueChange, ...props  }: RadioGroupProps & { ref?: React.Ref<RadioGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <MenubarRadioGroupContext.Provider value={{ value, onValueChange }}>
@@ -369,7 +346,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </MenubarRadioGroupContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupWebMenubar';
 
@@ -383,19 +359,14 @@ function useMenubarRadioGroupContext() {
   return context;
 }
 
-const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
-  (
-    {
-      asChild,
+function RadioItem({ ref, asChild,
       value,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
       ...props
-    },
-    ref
-  ) => {
+     }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onValueChange } = useMenubarRadioGroupContext();
     const { close } = useMenubarContentContext();
 
@@ -436,12 +407,10 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </Menubar.RadioItem>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemWebMenubar';
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Menubar.ItemIndicator forceMount={forceMount} asChild>
@@ -449,12 +418,10 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
       </Menubar.ItemIndicator>
     );
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorWebMenubar';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Menubar.Separator asChild>
@@ -462,7 +429,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </Menubar.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebMenubar';
 
@@ -471,8 +437,7 @@ const MenubarSubContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Sub = React.forwardRef<SubRef, SubProps>(
-  ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+function Sub({ ref, asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props  }: SubProps & { ref?: React.Ref<SubRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -487,7 +452,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </MenubarSubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubWebMenubar';
 
@@ -501,8 +465,7 @@ function useSubContext() {
   return context;
 }
 
-const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
-  ({ asChild, textValue, disabled = false, onPress: onPressProp, ...props }, ref) => {
+function SubTrigger({ ref, asChild, textValue, disabled = false, onPress: onPressProp, ...props  }: SubTriggerProps & { ref?: React.Ref<SubTriggerRef> }) {
     const { onOpenChange } = useSubContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -517,12 +480,10 @@ const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(
       </Menubar.SubTrigger>
     );
   }
-);
 
 SubTrigger.displayName = 'SubTriggerWebMenubar';
 
-const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
-  ({ asChild = false, forceMount, ...props }, ref) => {
+function SubContent({ ref, asChild = false, forceMount, ...props  }: SubContentProps & { ref?: React.Ref<SubContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Menubar.Portal>
@@ -532,7 +493,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
       </Menubar.Portal>
     );
   }
-);
 
 Content.displayName = 'ContentWebMenubar';
 
diff --git a/packages/navigation-menu/src/navigation-menu.tsx b/packages/navigation-menu/src/navigation-menu.tsx
index 51cd15c7..2f421e6c 100644
--- a/packages/navigation-menu/src/navigation-menu.tsx
+++ b/packages/navigation-menu/src/navigation-menu.tsx
@@ -40,8 +40,7 @@ interface INavigationMenuRootContext extends RootProps {
 
 const RootContext = React.createContext<INavigationMenuRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, onValueChange, ...viewProps }, ref) => {
+function Root({ ref, asChild, value, onValueChange, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -63,7 +62,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeNavigationMenu';
 
@@ -77,16 +75,16 @@ function useRootContext() {
   return context;
 }
 
-const List = React.forwardRef<ListRef, ListProps>(({ asChild, ...viewProps }, ref) => {
+function List({ ref, asChild, ...viewProps  }: ListProps & { ref?: React.Ref<ListRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='menubar' {...viewProps} />;
-});
+}
 
 List.displayName = 'ListNativeNavigationMenu';
 
 const ItemContext = React.createContext<(ItemProps & { nativeID: string }) | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(({ asChild, value, ...viewProps }, ref) => {
+function Item({ ref, asChild, value, ...viewProps  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
   const nativeID = React.useId();
 
   const Component = asChild ? Slot.View : View;
@@ -100,7 +98,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ asChild, value, ...viewProp
       <Component ref={ref} role='menuitem' {...viewProps} />
     </ItemContext.Provider>
   );
-});
+}
 
 Item.displayName = 'ItemNativeNavigationMenu';
 
@@ -114,8 +112,7 @@ function useItemContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const triggerRef = React.useRef<View>(null);
     const { value, onValueChange, setTriggerPosition } = useRootContext();
     const { value: menuValue } = useItemContext();
@@ -154,7 +151,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeNavigationMenu';
 
@@ -190,10 +186,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'center',
       side = 'bottom',
@@ -205,9 +198,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       value,
       onValueChange,
@@ -269,27 +260,26 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeNavigationMenu';
 
-const Link = React.forwardRef<LinkRef, LinkProps>(({ asChild, ...props }, ref) => {
+function Link({ ref, asChild, ...props  }: LinkProps & { ref?: React.Ref<LinkRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} role='link' {...props} />;
-});
+}
 
 Link.displayName = 'LinkNativeNavigationMenu';
 
-const Viewport = React.forwardRef<ViewportRef, ViewportProps>((props, ref) => {
+function Viewport({ ref, ...props }: ViewportProps & { ref?: React.Ref<ViewportRef> }) {
   return <View ref={ref} {...props} />;
-});
+}
 
 Viewport.displayName = 'ViewportNativeNavigationMenu';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ asChild, ...props }, ref) => {
+function Indicator({ ref, asChild, ...props  }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Indicator.displayName = 'IndicatorNativeNavigationMenu';
 
diff --git a/packages/navigation-menu/src/navigation-menu.web.tsx b/packages/navigation-menu/src/navigation-menu.web.tsx
index d9ab6fc3..642beb3a 100644
--- a/packages/navigation-menu/src/navigation-menu.web.tsx
+++ b/packages/navigation-menu/src/navigation-menu.web.tsx
@@ -26,10 +26,7 @@ import type {
 
 const NavigationMenuContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value,
       onValueChange,
       delayDuration,
@@ -37,9 +34,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       dir,
       orientation,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <NavigationMenuContext.Provider value={{ value, onValueChange, orientation }}>
@@ -56,7 +51,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </NavigationMenuContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebNavigationMenu';
 
@@ -70,7 +64,7 @@ function useRootContext() {
   return context;
 }
 
-const List = React.forwardRef<ListRef, ListProps>(({ asChild, ...viewProps }, ref) => {
+function List({ ref, asChild, ...viewProps  }: ListProps & { ref?: React.Ref<ListRef> }) {
   const augmentedRef = useAugmentedRef({ ref });
   const { orientation } = useRootContext();
 
@@ -87,13 +81,13 @@ const List = React.forwardRef<ListRef, ListProps>(({ asChild, ...viewProps }, re
       <Component ref={ref} {...viewProps} />
     </NavigationMenu.List>
   );
-});
+}
 
 List.displayName = 'ListWebNavigationMenu';
 
 const ItemContext = React.createContext<ItemProps | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(({ asChild, value, ...props }, ref) => {
+function Item({ ref, asChild, value, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <ItemContext.Provider value={{ value }}>
@@ -102,7 +96,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ asChild, value, ...props },
       </NavigationMenu.Item>
     </ItemContext.Provider>
   );
-});
+}
 
 Item.displayName = 'ItemWebNavigationMenu';
 
@@ -116,11 +110,7 @@ function useItemContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  (
-    { asChild, onPress: onPressProp, disabled = false, onKeyDown: onKeyDownProp, ...props },
-    ref
-  ) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, onKeyDown: onKeyDownProp, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { value: rootValue, onValueChange } = useRootContext();
     const { value } = useItemContext();
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -149,7 +139,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </NavigationMenu.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebNavigationMenu';
 
@@ -157,10 +146,7 @@ function Portal({ children }: PortalProps) {
   return <>{children}</>;
 }
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align: _align,
       side: _side,
@@ -175,9 +161,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onFocusOutside,
       onInteractOutside,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <NavigationMenu.Content
@@ -191,12 +175,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </NavigationMenu.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebNavigationMenu';
 
-const Link = React.forwardRef<LinkRef, LinkProps>(
-  ({ asChild, active, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+function Link({ ref, asChild, active, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props  }: LinkProps & { ref?: React.Ref<LinkRef> }) {
     const { onValueChange } = useRootContext();
     function onKeyDown(ev: React.KeyboardEvent) {
       onKeyDownProp?.(ev);
@@ -225,28 +207,27 @@ const Link = React.forwardRef<LinkRef, LinkProps>(
       </NavigationMenu.Link>
     );
   }
-);
 
 Link.displayName = 'LinkWebNavigationMenu';
 
-const Viewport = React.forwardRef<ViewportRef, ViewportProps>((props, ref) => {
+function Viewport({ ref, ...props }: ViewportProps & { ref?: React.Ref<ViewportRef> }) {
   return (
     <Slot.View ref={ref} {...props}>
       <NavigationMenu.Viewport />
     </Slot.View>
   );
-});
+}
 
 Viewport.displayName = 'ViewportWebNavigationMenu';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ asChild, ...props }, ref) => {
+function Indicator({ ref, asChild, ...props  }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <NavigationMenu.Indicator asChild>
       <Component ref={ref} {...props} />
     </NavigationMenu.Indicator>
   );
-});
+}
 
 Indicator.displayName = 'IndicatorWebNavigationMenu';
 
diff --git a/packages/popover/src/popover.tsx b/packages/popover/src/popover.tsx
index 7da87de7..3c13ead4 100644
--- a/packages/popover/src/popover.tsx
+++ b/packages/popover/src/popover.tsx
@@ -36,8 +36,7 @@ interface IRootContext {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+function Root({ ref, asChild, onOpenChange: onOpenChangeProp, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -65,7 +64,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativePopover';
 
@@ -77,8 +75,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { onOpenChange, open, setTriggerPosition } = useRootContext();
 
     const augmentedRef = useAugmentedRef({
@@ -118,7 +115,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativePopover';
 
@@ -145,8 +141,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -167,17 +162,13 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativePopover';
 
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -190,9 +181,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       disablePositioningStyle,
       onOpenAutoFocus: _onOpenAutoFocus,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -254,12 +243,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativePopover';
 
-const Close = React.forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Close({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: CloseProps & { ref?: React.Ref<CloseRef> }) {
     const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -282,7 +269,6 @@ const Close = React.forwardRef<CloseRef, CloseProps>(
       />
     );
   }
-);
 
 Close.displayName = 'CloseNativePopover';
 
diff --git a/packages/popover/src/popover.web.tsx b/packages/popover/src/popover.web.tsx
index 2ebcdc95..e2337271 100644
--- a/packages/popover/src/popover.web.tsx
+++ b/packages/popover/src/popover.web.tsx
@@ -22,24 +22,22 @@ const RootContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps & { onOpenChange?: (open: boolean) => void }>(
-  ({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-    const [open, setOpen] = React.useState(false);
+function Root({ ref, asChild, onOpenChange: onOpenChangeProp, ...viewProps }: (RootProps & { onOpenChange?: (open: boolean) => void }) & { ref?: React.Ref<RootRef> }) {
+  const [open, setOpen] = React.useState(false);
 
-    function onOpenChange(value: boolean) {
-      setOpen(value);
-      onOpenChangeProp?.(value);
-    }
-    const Component = asChild ? Slot.View : View;
-    return (
-      <RootContext.Provider value={{ open, onOpenChange }}>
-        <Popover.Root open={open} onOpenChange={onOpenChange}>
-          <Component ref={ref} {...viewProps} />
-        </Popover.Root>
-      </RootContext.Provider>
-    );
+  function onOpenChange(value: boolean) {
+    setOpen(value);
+    onOpenChangeProp?.(value);
   }
-);
+  const Component = asChild ? Slot.View : View;
+  return (
+    <RootContext.Provider value={{ open, onOpenChange }}>
+      <Popover.Root open={open} onOpenChange={onOpenChange}>
+        <Component ref={ref} {...viewProps} />
+      </Popover.Root>
+    </RootContext.Provider>
+  );
+}
 
 Root.displayName = 'RootWebPopover';
 
@@ -51,8 +49,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, role: _role, disabled, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { onOpenChange, open } = useRootContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -93,7 +90,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Popover.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebPopover';
 
@@ -101,19 +97,14 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <Popover.Portal forceMount={forceMount} children={children} container={container} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayWebPopover';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -128,9 +119,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onPointerDownOutside,
       onOpenAutoFocus,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Popover.Content
@@ -150,12 +139,10 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Popover.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebPopover';
 
-const Close = React.forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+function Close({ ref, asChild, onPress: onPressProp, disabled, ...props  }: CloseProps & { ref?: React.Ref<CloseRef> }) {
     const augmentedRef = useAugmentedRef({ ref });
     const { onOpenChange, open } = useRootContext();
 
@@ -188,7 +175,6 @@ const Close = React.forwardRef<CloseRef, CloseProps>(
       </>
     );
   }
-);
 
 Close.displayName = 'CloseWebPopover';
 
diff --git a/packages/progress/src/progress.tsx b/packages/progress/src/progress.tsx
index 46e991a5..735b832d 100644
--- a/packages/progress/src/progress.tsx
+++ b/packages/progress/src/progress.tsx
@@ -9,11 +9,7 @@ import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from './types';
 
 const DEFAULT_MAX = 100;
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    { asChild, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props },
-    ref
-  ) => {
+function Root({ ref, asChild, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const max = maxProp ?? DEFAULT_MAX;
     const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
 
@@ -36,14 +32,13 @@ const Root = React.forwardRef<RootRef, RootProps>(
       />
     );
   }
-);
 
 Root.displayName = 'RootProgress';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ asChild, ...props }, ref) => {
+function Indicator({ ref, asChild, ...props  }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='presentation' {...props} />;
-});
+}
 
 Indicator.displayName = 'IndicatorProgress';
 
diff --git a/packages/progress/src/progress.web.tsx b/packages/progress/src/progress.web.tsx
index 4b32e8e3..14282194 100644
--- a/packages/progress/src/progress.web.tsx
+++ b/packages/progress/src/progress.web.tsx
@@ -6,8 +6,7 @@ import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from './types';
 
 const ProgressContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, max, getValueLabel, ...props }, ref) => {
+function Root({ ref, asChild, value, max, getValueLabel, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ProgressContext.Provider value={{ value, max }}>
@@ -17,18 +16,17 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ProgressContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootProgress';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ asChild, ...props }, ref) => {
+function Indicator({ ref, asChild, ...props  }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Progress.Indicator asChild>
       <Component ref={ref} {...props} />
     </Progress.Indicator>
   );
-});
+}
 
 Indicator.displayName = 'IndicatorProgress';
 
diff --git a/packages/radio-group/src/radio-group.tsx b/packages/radio-group/src/radio-group.tsx
index de533a57..c1bc8094 100644
--- a/packages/radio-group/src/radio-group.tsx
+++ b/packages/radio-group/src/radio-group.tsx
@@ -5,8 +5,7 @@ import type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootR
 
 const RadioGroupContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+function Root({ ref, asChild, value, onValueChange, disabled = false, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <RadioGroupContext.Provider
@@ -20,7 +19,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RadioGroupContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootRadioGroup';
 
@@ -40,11 +38,7 @@ interface RadioItemContext {
 
 const RadioItemContext = React.createContext<RadioItemContext | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
-    ref
-  ) => {
+function Item({ ref, asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { disabled, value, onValueChange } = useRadioGroupContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -75,7 +69,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemRadioGroup';
 
@@ -89,8 +82,7 @@ function useRadioItemContext() {
   return context;
 }
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Indicator({ ref, asChild, forceMount, ...props  }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
     const { value } = useRadioGroupContext();
     const { itemValue } = useRadioItemContext();
 
@@ -102,7 +94,6 @@ const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='presentation' {...props} />;
   }
-);
 
 Indicator.displayName = 'IndicatorRadioGroup';
 
diff --git a/packages/radio-group/src/radio-group.web.tsx b/packages/radio-group/src/radio-group.web.tsx
index 497ffb37..48d34062 100644
--- a/packages/radio-group/src/radio-group.web.tsx
+++ b/packages/radio-group/src/radio-group.web.tsx
@@ -6,8 +6,7 @@ import type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootR
 
 const RadioGroupContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+function Root({ ref, asChild, value, onValueChange, disabled = false, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <RadioGroupContext.Provider
@@ -23,7 +22,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RadioGroupContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootRadioGroup';
 function useRadioGroupContext() {
@@ -35,8 +33,7 @@ function useRadioGroupContext() {
   }
   return context;
 }
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  ({ asChild, value, onPress: onPressProps, ...props }, ref) => {
+function Item({ ref, asChild, value, onPress: onPressProps, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { onValueChange } = useRadioGroupContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -53,12 +50,10 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </RadioGroup.Item>
     );
   }
-);
 
 Item.displayName = 'ItemRadioGroup';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Indicator({ ref, asChild, forceMount, ...props  }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <RadioGroup.Indicator asChild>
@@ -66,7 +61,6 @@ const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
       </RadioGroup.Indicator>
     );
   }
-);
 
 Indicator.displayName = 'IndicatorRadioGroup';
 
diff --git a/packages/select/src/select.tsx b/packages/select/src/select.tsx
index d316a9b5..6a3c1e9a 100644
--- a/packages/select/src/select.tsx
+++ b/packages/select/src/select.tsx
@@ -58,19 +58,14 @@ interface IRootContext extends SharedRootContext {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value: valueProp,
       defaultValue,
       onValueChange: onValueChangeProp,
       onOpenChange: onOpenChangeProp,
       disabled,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [value, onValueChange] = useControllableState({
       prop: valueProp,
@@ -106,7 +101,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeSelect';
 
@@ -118,8 +112,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange, disabled: disabledRoot, setTriggerPosition } = useRootContext();
 
     const augmentedRef = useAugmentedRef({
@@ -160,11 +153,10 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeSelect';
 
-const Value = React.forwardRef<ValueRef, ValueProps>(({ asChild, placeholder, ...props }, ref) => {
+function Value({ ref, asChild, placeholder, ...props  }: ValueProps & { ref?: React.Ref<ValueRef> }) {
   const { value } = useRootContext();
   const Component = asChild ? Slot.Text : Text;
   return (
@@ -172,7 +164,7 @@ const Value = React.forwardRef<ValueRef, ValueProps>(({ asChild, placeholder, ..
       {value?.label ?? placeholder}
     </Component>
   );
-});
+}
 
 Value.displayName = 'ValueNativeSelect';
 
@@ -199,8 +191,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -221,17 +212,13 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeSelect';
 
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'start',
       side = 'bottom',
@@ -244,9 +231,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       disablePositioningStyle,
       position: _position,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -308,7 +293,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeSelect';
 
@@ -317,19 +301,14 @@ const ItemContext = React.createContext<{
   label: string;
 } | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    {
-      asChild,
+function Item({ ref, asChild,
       value: itemValue,
       label,
       onPress: onPressProp,
       disabled = false,
       closeOnPress = true,
       ...props
-    },
-    ref
-  ) => {
+     }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { onOpenChange, value, onValueChange, setTriggerPosition, setContentLayout } =
       useRootContext();
     function onPress(ev: GestureResponderEvent) {
@@ -363,7 +342,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemNativeSelect';
 
@@ -375,7 +353,7 @@ function useItemContext() {
   return context;
 }
 
-const ItemText = React.forwardRef<ItemTextRef, ItemTextProps>(({ asChild, ...props }, ref) => {
+function ItemText({ ref, asChild, ...props  }: ItemTextProps & { ref?: React.Ref<ItemTextRef> }) {
   const { label } = useItemContext();
 
   const Component = asChild ? Slot.Text : Text;
@@ -384,12 +362,11 @@ const ItemText = React.forwardRef<ItemTextRef, ItemTextProps>(({ asChild, ...pro
       {label}
     </Component>
   );
-});
+}
 
 ItemText.displayName = 'ItemTextNativeSelect';
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const { itemValue } = useItemContext();
     const { value } = useRootContext();
 
@@ -401,30 +378,27 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='presentation' {...props} />;
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorNativeSelect';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='group' {...props} />;
-});
+}
 
 Group.displayName = 'GroupNativeSelect';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return <Component ref={ref} {...props} />;
-});
+}
 
 Label.displayName = 'LabelNativeSelect';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />;
   }
-);
 
 Separator.displayName = 'SeparatorNativeSelect';
 
diff --git a/packages/select/src/select.web.tsx b/packages/select/src/select.web.tsx
index 62d03fc1..1d60a657 100644
--- a/packages/select/src/select.web.tsx
+++ b/packages/select/src/select.web.tsx
@@ -49,18 +49,13 @@ const SelectContext = React.createContext<
  * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
  * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' }
  */
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value: valueProp,
       defaultValue,
       onValueChange: onValueChangeProp,
       onOpenChange: onOpenChangeProp,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [value, onValueChange] = useControllableState({
       prop: valueProp,
       defaultProp: defaultValue,
@@ -99,7 +94,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </SelectContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebSelect';
 
@@ -111,8 +105,7 @@ function useRootContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, role: _role, disabled, ...props }, ref) => {
+function Trigger({ ref, asChild, role: _role, disabled, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange } = useRootContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -141,19 +134,16 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Select.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebSelect';
 
-const Value = React.forwardRef<ValueRef, ValueProps>(
-  ({ asChild, placeholder, children, ...props }, ref) => {
+function Value({ ref, asChild, placeholder, children, ...props  }: ValueProps & { ref?: React.Ref<ValueRef> }) {
     return (
       <Slot.Text ref={ref} {...props}>
         <Select.Value placeholder={placeholder}>{children}</Select.Value>
       </Slot.Text>
     );
   }
-);
 
 Value.displayName = 'ValueWebSelect';
 
@@ -161,8 +151,7 @@ function Portal({ container, children }: PortalProps) {
   return <Select.Portal children={children} container={container} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, children, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, children, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open } = useRootContext();
 
     const Component = asChild ? Slot.Pressable : Pressable;
@@ -173,14 +162,10 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
       </>
     );
   }
-);
 
 Overlay.displayName = 'OverlayWebSelect';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount: _forceMount,
       align = 'start',
       side = 'bottom',
@@ -194,9 +179,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onInteractOutside: _onInteractOutside,
       onPointerDownOutside,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Select.Content
@@ -214,7 +197,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Select.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebSelect';
 
@@ -223,8 +205,7 @@ const ItemContext = React.createContext<{
   label: string;
 } | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  ({ asChild, closeOnPress = true, label, value, children, ...props }, ref) => {
+function Item({ ref, asChild, closeOnPress = true, label, value, children, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     return (
       <ItemContext.Provider value={{ itemValue: value, label: label }}>
         <Slot.Pressable ref={ref} {...props}>
@@ -235,7 +216,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemWebSelect';
 
@@ -247,25 +227,22 @@ function useItemContext() {
   return context;
 }
 
-const ItemText = React.forwardRef<ItemTextRef, Omit<ItemTextProps, 'children'>>(
-  ({ asChild, ...props }, ref) => {
-    const { label } = useItemContext();
+function ItemText({ ref, asChild, ...props }: Omit<ItemTextProps, 'children'> & { ref?: React.Ref<ItemTextRef> }) {
+  const { label } = useItemContext();
 
-    const Component = asChild ? Slot.Text : Text;
-    return (
-      <Select.ItemText asChild>
-        <Component ref={ref} {...props}>
-          {label}
-        </Component>
-      </Select.ItemText>
-    );
-  }
-);
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <Select.ItemText asChild>
+      <Component ref={ref} {...props}>
+        {label}
+      </Component>
+    </Select.ItemText>
+  );
+}
 
 ItemText.displayName = 'ItemTextWebSelect';
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
-  ({ asChild, forceMount: _forceMount, ...props }, ref) => {
+function ItemIndicator({ ref, asChild, forceMount: _forceMount, ...props  }: ItemIndicatorProps & { ref?: React.Ref<ItemIndicatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Select.ItemIndicator asChild>
@@ -273,34 +250,32 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(
       </Select.ItemIndicator>
     );
   }
-);
 
 ItemIndicator.displayName = 'ItemIndicatorWebSelect';
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ asChild, ...props }, ref) => {
+function Group({ ref, asChild, ...props  }: GroupProps & { ref?: React.Ref<GroupRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Select.Group asChild>
       <Component ref={ref} {...props} />
     </Select.Group>
   );
-});
+}
 
 Group.displayName = 'GroupWebSelect';
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ asChild, ...props }, ref) => {
+function Label({ ref, asChild, ...props  }: LabelProps & { ref?: React.Ref<LabelRef> }) {
   const Component = asChild ? Slot.Text : Text;
   return (
     <Select.Label asChild>
       <Component ref={ref} {...props} />
     </Select.Label>
   );
-});
+}
 
 Label.displayName = 'LabelWebSelect';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, decorative, ...props }, ref) => {
+function Separator({ ref, asChild, decorative, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Select.Separator asChild>
@@ -308,7 +283,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </Select.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebSelect';
 
diff --git a/packages/separator/src/separator.tsx b/packages/separator/src/separator.tsx
index 735444f1..f7093b65 100644
--- a/packages/separator/src/separator.tsx
+++ b/packages/separator/src/separator.tsx
@@ -3,19 +3,17 @@ import * as React from 'react';
 import { View } from 'react-native';
 import type { RootProps, RootRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, decorative, orientation = 'horizontal', ...props }, ref) => {
-    const Component = asChild ? Slot.View : View;
-    return (
-      <Component
-        role={decorative ? 'presentation' : 'separator'}
-        aria-orientation={orientation}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+function Root({ ref, asChild, decorative, orientation = 'horizontal', ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      role={decorative ? 'presentation' : 'separator'}
+      aria-orientation={orientation}
+      ref={ref}
+      {...props}
+    />
+  );
+}
 
 Root.displayName = 'RootSeparator';
 
diff --git a/packages/slider/src/slider.tsx b/packages/slider/src/slider.tsx
index e1e23309..ae48af38 100644
--- a/packages/slider/src/slider.tsx
+++ b/packages/slider/src/slider.tsx
@@ -14,10 +14,7 @@ import type {
 
 const RootContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value,
       disabled,
       min,
@@ -27,9 +24,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       step: _step,
       onValueChange: _onValueChange,
       ...props
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <RootContext.Provider value={{ value, disabled, min, max }}>
@@ -37,7 +32,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeSlider';
 
@@ -49,7 +43,7 @@ function useSliderContext() {
   return context;
 }
 
-const Track = React.forwardRef<TrackRef, TrackProps>(({ asChild, ...props }, ref) => {
+function Track({ ref, asChild, ...props  }: TrackProps & { ref?: React.Ref<TrackRef> }) {
   const { value, min, max, disabled } = useSliderContext();
 
   const Component = asChild ? Slot.View : View;
@@ -65,21 +59,21 @@ const Track = React.forwardRef<TrackRef, TrackProps>(({ asChild, ...props }, ref
       {...props}
     />
   );
-});
+}
 
 Track.displayName = 'TrackNativeSlider';
 
-const Range = React.forwardRef<RangeRef, RangeProps>(({ asChild, ...props }, ref) => {
+function Range({ ref, asChild, ...props  }: RangeProps & { ref?: React.Ref<RangeRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='presentation' {...props} />;
-});
+}
 
 Range.displayName = 'RangeNativeSlider';
 
-const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ asChild, ...props }, ref) => {
+function Thumb({ ref, asChild, ...props  }: ThumbProps & { ref?: React.Ref<ThumbRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component accessibilityRole='adjustable' ref={ref} {...props} />;
-});
+}
 
 Thumb.displayName = 'ThumbNativeSlider';
 
diff --git a/packages/slider/src/slider.web.tsx b/packages/slider/src/slider.web.tsx
index 2c6522ac..14c842f3 100644
--- a/packages/slider/src/slider.web.tsx
+++ b/packages/slider/src/slider.web.tsx
@@ -13,11 +13,7 @@ import type {
   TrackRef,
 } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    { asChild, value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props },
-    ref
-  ) => {
+function Root({ ref, asChild, value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Slider.Root
@@ -35,40 +31,39 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </Slider.Root>
     );
   }
-);
 
 Root.displayName = 'RootWebSlider';
 
-const Track = React.forwardRef<TrackRef, TrackProps>(({ asChild, ...props }, ref) => {
+function Track({ ref, asChild, ...props  }: TrackProps & { ref?: React.Ref<TrackRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Slider.Track asChild>
       <Component ref={ref} {...props} />
     </Slider.Track>
   );
-});
+}
 
 Track.displayName = 'TrackWebSlider';
 
-const Range = React.forwardRef<RangeRef, RangeProps>(({ asChild, ...props }, ref) => {
+function Range({ ref, asChild, ...props  }: RangeProps & { ref?: React.Ref<RangeRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Slider.Range asChild>
       <Component ref={ref} {...props} />
     </Slider.Range>
   );
-});
+}
 
 Range.displayName = 'RangeWebSlider';
 
-const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ asChild, ...props }, ref) => {
+function Thumb({ ref, asChild, ...props  }: ThumbProps & { ref?: React.Ref<ThumbRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Slider.Thumb asChild>
       <Component ref={ref} {...props} />
     </Slider.Thumb>
   );
-});
+}
 
 Thumb.displayName = 'ThumbWebSlider';
 
diff --git a/packages/slot/src/slot.tsx b/packages/slot/src/slot.tsx
index 0e7e15a3..eefccb30 100644
--- a/packages/slot/src/slot.tsx
+++ b/packages/slot/src/slot.tsx
@@ -14,66 +14,60 @@ import {
   type StyleProp,
 } from 'react-native';
 
-const Pressable = React.forwardRef<React.ElementRef<typeof RNPressable>, RNPressableProps>(
-  (props, forwardedRef) => {
-    const { children, ...pressableSlotProps } = props;
+function Pressable({ ref: forwardedRef, ...props }: RNPressableProps & { ref?: React.Ref<React.ElementRef<typeof RNPressable>> }) {
+  const { children, ...pressableSlotProps } = props;
 
-    if (!React.isValidElement(children)) {
-      console.log('Slot.Pressable - Invalid asChild element', children);
-      return null;
-    }
-
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNPressable>,
-      React.ElementRef<typeof RNPressable>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(pressableSlotProps, children.props as AnyProps),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
+  if (!React.isValidElement(children)) {
+    console.log('Slot.Pressable - Invalid asChild element', children);
+    return null;
   }
-);
 
-Pressable.displayName = 'SlotPressable';
+  return React.cloneElement<
+    React.ComponentPropsWithoutRef<typeof RNPressable>,
+    React.ElementRef<typeof RNPressable>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(pressableSlotProps, children.props as AnyProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+  });
+}
 
-const View = React.forwardRef<React.ElementRef<typeof RNView>, RNViewProps>(
-  (props, forwardedRef) => {
-    const { children, ...viewSlotProps } = props;
+Pressable.displayName = 'SlotPressable';
 
-    if (!React.isValidElement(children)) {
-      console.log('Slot.View - Invalid asChild element', children);
-      return null;
-    }
+function View({ ref: forwardedRef, ...props }: RNViewProps & { ref?: React.Ref<React.ElementRef<typeof RNView>> }) {
+  const { children, ...viewSlotProps } = props;
 
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNView>,
-      React.ElementRef<typeof RNView>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(viewSlotProps, children.props as AnyProps),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
+  if (!React.isValidElement(children)) {
+    console.log('Slot.View - Invalid asChild element', children);
+    return null;
   }
-);
 
-View.displayName = 'SlotView';
+  return React.cloneElement<
+    React.ComponentPropsWithoutRef<typeof RNView>,
+    React.ElementRef<typeof RNView>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(viewSlotProps, children.props as AnyProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+  });
+}
 
-const Text = React.forwardRef<React.ElementRef<typeof RNText>, RNTextProps>(
-  (props, forwardedRef) => {
-    const { children, ...textSlotProps } = props;
+View.displayName = 'SlotView';
 
-    if (!React.isValidElement(children)) {
-      console.log('Slot.Text - Invalid asChild element', children);
-      return null;
-    }
+function Text({ ref: forwardedRef, ...props }: RNTextProps & { ref?: React.Ref<React.ElementRef<typeof RNText>> }) {
+  const { children, ...textSlotProps } = props;
 
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNText>,
-      React.ElementRef<typeof RNText>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(textSlotProps, children.props as AnyProps),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
+  if (!React.isValidElement(children)) {
+    console.log('Slot.Text - Invalid asChild element', children);
+    return null;
   }
-);
+
+  return React.cloneElement<
+    React.ComponentPropsWithoutRef<typeof RNText>,
+    React.ElementRef<typeof RNText>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(textSlotProps, children.props as AnyProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+  });
+}
 
 Text.displayName = 'SlotText';
 
@@ -81,24 +75,22 @@ type ImageSlotProps = RNImageProps & {
   children?: React.ReactNode;
 };
 
-const Image = React.forwardRef<React.ElementRef<typeof RNImage>, ImageSlotProps>(
-  (props, forwardedRef) => {
-    const { children, ...imageSlotProps } = props;
+function Image({ ref: forwardedRef, ...props }: ImageSlotProps & { ref?: React.Ref<React.ElementRef<typeof RNImage>> }) {
+  const { children, ...imageSlotProps } = props;
 
-    if (!React.isValidElement(children)) {
-      console.log('Slot.Image - Invalid asChild element', children);
-      return null;
-    }
-
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof RNImage>,
-      React.ElementRef<typeof RNImage>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(imageSlotProps, children.props as AnyProps),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
+  if (!React.isValidElement(children)) {
+    console.log('Slot.Image - Invalid asChild element', children);
+    return null;
   }
-);
+
+  return React.cloneElement<
+    React.ComponentPropsWithoutRef<typeof RNImage>,
+    React.ElementRef<typeof RNImage>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(imageSlotProps, children.props as AnyProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
+  });
+}
 
 Image.displayName = 'SlotImage';
 
diff --git a/packages/switch/src/switch.tsx b/packages/switch/src/switch.tsx
index 689fa29c..e55fb5de 100644
--- a/packages/switch/src/switch.tsx
+++ b/packages/switch/src/switch.tsx
@@ -3,51 +3,38 @@ import * as React from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 import type { RootProps, RootRef, ThumbProps, ThumbRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
-      checked,
-      onCheckedChange,
-      disabled,
-      onPress: onPressProp,
-      'aria-valuetext': ariaValueText,
-      ...props
-    },
-    ref
-  ) => {
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      onCheckedChange(!checked);
-      onPressProp?.(ev);
-    }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled}
-        role='switch'
-        aria-checked={checked}
-        aria-valuetext={ariaValueText ?? checked ? 'on' : 'off'}
-        onPress={onPress}
-        accessibilityState={{
-          checked,
-          disabled,
-        }}
-        disabled={disabled}
-        {...props}
-      />
-    );
+function Root({ ref, asChild, checked, onCheckedChange, disabled, onPress: onPressProp, 'aria-valuetext': ariaValueText, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onCheckedChange(!checked);
+    onPressProp?.(ev);
   }
-);
+
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled}
+      role='switch'
+      aria-checked={checked}
+      aria-valuetext={ariaValueText ?? checked ? 'on' : 'off'}
+      onPress={onPress}
+      accessibilityState={{
+        checked,
+        disabled,
+      }}
+      disabled={disabled}
+      {...props}
+    />
+  );
+}
 
 Root.displayName = 'RootNativeSwitch';
 
-const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ asChild, ...props }, ref) => {
+function Thumb({ ref, asChild, ...props }: ThumbProps & { ref?: React.Ref<ThumbRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='presentation' {...props} />;
-});
+}
 
 Thumb.displayName = 'ThumbNativeSwitch';
 
diff --git a/packages/switch/src/switch.web.tsx b/packages/switch/src/switch.web.tsx
index dbbec2ed..efff7408 100644
--- a/packages/switch/src/switch.web.tsx
+++ b/packages/switch/src/switch.web.tsx
@@ -4,57 +4,44 @@ import * as React from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 import type { RootProps, RootRef, ThumbProps, ThumbRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
-      checked,
-      onCheckedChange,
-      disabled,
-      onPress: onPressProp,
-      onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
-    function onPress(ev: GestureResponderEvent) {
-      onCheckedChange(!checked);
-      onPressProp?.(ev);
-    }
+function Root({ ref, asChild, checked, onCheckedChange, disabled, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
+  function onPress(ev: GestureResponderEvent) {
+    onCheckedChange(!checked);
+    onPressProp?.(ev);
+  }
 
-    function onKeyDown(ev: React.KeyboardEvent) {
-      onKeyDownProp?.(ev);
-      if (ev.key === ' ') {
-        onCheckedChange(!checked);
-      }
+  function onKeyDown(ev: React.KeyboardEvent) {
+    onKeyDownProp?.(ev);
+    if (ev.key === ' ') {
+      onCheckedChange(!checked);
     }
-
-    const Component = asChild ? Slot.Pressable : Pressable;
-    return (
-      <Switch.Root checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} asChild>
-        <Component
-          ref={ref}
-          disabled={disabled}
-          onPress={onPress}
-          // @ts-expect-error Web only
-          onKeyDown={onKeyDown}
-          {...props}
-        />
-      </Switch.Root>
-    );
   }
-);
+
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <Switch.Root checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} asChild>
+      <Component
+        ref={ref}
+        disabled={disabled}
+        onPress={onPress}
+        // @ts-expect-error Web only
+        onKeyDown={onKeyDown}
+        {...props}
+      />
+    </Switch.Root>
+  );
+}
 
 Root.displayName = 'RootWebSwitch';
 
-const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ asChild, ...props }, ref) => {
+function Thumb({ ref, asChild, ...props }: ThumbProps & { ref?: React.Ref<ThumbRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Switch.Thumb asChild>
       <Component ref={ref} {...props} />
     </Switch.Thumb>
   );
-});
+}
 
 Thumb.displayName = 'ThumbWebSwitch';
 
diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
index b7e1cdcd..d075fd39 100644
--- a/packages/table/src/table.tsx
+++ b/packages/table/src/table.tsx
@@ -11,64 +11,64 @@ import { Pressable, View } from 'react-native';
 type RootProps = SlottableViewProps;
 type RootRef = ViewRef;
 
-const Root = React.forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => {
+function Root({ ref, asChild, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component role='table' ref={ref} {...props} />;
-});
+}
 Root.displayName = 'RootTable';
 
 type HeaderProps = SlottableViewProps;
 type HeaderRef = ViewRef;
 
-const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props }, ref) => {
+function Header({ ref, asChild, ...props  }: HeaderProps & { ref?: React.Ref<HeaderRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component role='rowheader' ref={ref} {...props} />;
-});
+}
 Header.displayName = 'HeaderTable';
 
 type RowProps = SlottablePressableProps;
 type RowRef = PressableRef;
 
-const Row = React.forwardRef<RowRef, RowProps>(({ asChild, ...props }, ref) => {
+function Row({ ref, asChild, ...props  }: RowProps & { ref?: React.Ref<RowRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} role='row' {...props} />;
-});
+}
 Row.displayName = 'RowTable';
 
 type HeadProps = SlottableViewProps;
 type HeadRef = ViewRef;
 
-const Head = React.forwardRef<HeadRef, HeadProps>(({ asChild, ...props }, ref) => {
+function Head({ ref, asChild, ...props  }: HeadProps & { ref?: React.Ref<HeadRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='columnheader' {...props} />;
-});
+}
 Head.displayName = 'HeadTable';
 
 type BodyProps = SlottableViewProps;
 type BodyRef = ViewRef;
 
-const Body = React.forwardRef<BodyRef, BodyProps>(({ asChild, ...props }, ref) => {
+function Body({ ref, asChild, ...props  }: BodyProps & { ref?: React.Ref<BodyRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='rowgroup' {...props} />;
-});
+}
 Body.displayName = 'BodyTable';
 
 type CellProps = SlottableViewProps;
 type CellRef = ViewRef;
 
-const Cell = React.forwardRef<CellRef, CellProps>(({ asChild, ...props }, ref) => {
+function Cell({ ref, asChild, ...props  }: CellProps & { ref?: React.Ref<CellRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='cell' {...props} />;
-});
+}
 Cell.displayName = 'CellTable';
 
 type FooterProps = SlottableViewProps;
 type FooterRef = ViewRef;
 
-const Footer = React.forwardRef<FooterRef, FooterProps>(({ asChild, ...props }, ref) => {
+function Footer({ ref, asChild, ...props  }: FooterProps & { ref?: React.Ref<FooterRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='rowgroup' {...props} />;
-});
+}
 Footer.displayName = 'FooterTable';
 
 export { Body, Cell, Footer, Head, Header, Root, Row };
diff --git a/packages/tabs/src/tabs.tsx b/packages/tabs/src/tabs.tsx
index 7df9b16e..6ffe3e8e 100644
--- a/packages/tabs/src/tabs.tsx
+++ b/packages/tabs/src/tabs.tsx
@@ -18,19 +18,14 @@ interface RootContext extends RootProps {
 
 const TabsContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value,
       onValueChange,
       orientation: _orientation,
       dir: _dir,
       activationMode: _activationMode,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const Component = asChild ? Slot.View : View;
     return (
@@ -45,7 +40,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </TabsContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeTabs';
 
@@ -57,17 +51,16 @@ function useRootContext() {
   return context;
 }
 
-const List = React.forwardRef<ListRef, ListProps>(({ asChild, ...props }, ref) => {
+function List({ ref, asChild, ...props  }: ListProps & { ref?: React.Ref<ListRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component ref={ref} role='tablist' {...props} />;
-});
+}
 
 List.displayName = 'ListNativeTabs';
 
 const TriggerContext = React.createContext<{ value: string } | null>(null);
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled, value: tabValue, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled, value: tabValue, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { onValueChange, value: rootValue, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -96,7 +89,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </TriggerContext.Provider>
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeTabs';
 
@@ -110,8 +102,7 @@ function useTriggerContext() {
   return context;
 }
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, value: tabValue, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, value: tabValue, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const { value: rootValue, nativeID } = useRootContext();
 
     if (!forceMount) {
@@ -131,7 +122,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeTabs';
 
diff --git a/packages/tabs/src/tabs.web.tsx b/packages/tabs/src/tabs.web.tsx
index 5c54320d..2ee29d9a 100644
--- a/packages/tabs/src/tabs.web.tsx
+++ b/packages/tabs/src/tabs.web.tsx
@@ -14,8 +14,7 @@ import type {
 } from './types';
 
 const TabsContext = React.createContext<RootProps | null>(null);
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, value, onValueChange, orientation, dir, activationMode, ...viewProps }, ref) => {
+function Root({ ref, asChild, value, onValueChange, orientation, dir, activationMode, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <TabsContext.Provider
@@ -37,7 +36,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </TabsContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebTabs';
 
@@ -49,20 +47,19 @@ function useRootContext() {
   return context;
 }
 
-const List = React.forwardRef<ListRef, ListProps>(({ asChild, ...props }, ref) => {
+function List({ ref, asChild, ...props  }: ListProps & { ref?: React.Ref<ListRef> }) {
   const Component = asChild ? Slot.View : View;
   return (
     <Tabs.List asChild>
       <Component ref={ref} {...props} />
     </Tabs.List>
   );
-});
+}
 
 List.displayName = 'ListWebTabs';
 
 const TriggerContext = React.createContext<{ value: string } | null>(null);
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, value: tabValue, ...props }, ref) => {
+function Trigger({ ref, asChild, value: tabValue, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <TriggerContext.Provider value={{ value: tabValue }}>
@@ -72,7 +69,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </TriggerContext.Provider>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebTabs';
 
@@ -86,8 +82,7 @@ function useTriggerContext() {
   return context;
 }
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  ({ asChild, forceMount, value, tabIndex = -1, ...props }, ref) => {
+function Content({ ref, asChild, forceMount, value, tabIndex = -1, ...props  }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Tabs.Content value={value} asChild>
@@ -95,7 +90,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Tabs.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebTabs';
 
diff --git a/packages/toast/src/toast.tsx b/packages/toast/src/toast.tsx
index 2f54ba0f..ad016a8b 100644
--- a/packages/toast/src/toast.tsx
+++ b/packages/toast/src/toast.tsx
@@ -19,8 +19,7 @@ interface RootContext extends RootProps {
 }
 const ToastContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, type = 'foreground', open, onOpenChange, ...viewProps }, ref) => {
+function Root({ ref, asChild, type = 'foreground', open, onOpenChange, ...viewProps  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
 
     if (!open) {
@@ -46,7 +45,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ToastContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootToast';
 
@@ -58,8 +56,7 @@ function useToastContext() {
   return context;
 }
 
-const Close = React.forwardRef<CloseRef, CloseProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Close({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: CloseProps & { ref?: React.Ref<CloseRef> }) {
     const { onOpenChange } = useToastContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -80,12 +77,10 @@ const Close = React.forwardRef<CloseRef, CloseProps>(
       />
     );
   }
-);
 
 Close.displayName = 'CloseToast';
 
-const Action = React.forwardRef<ActionRef, ActionProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Action({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: ActionProps & { ref?: React.Ref<ActionRef> }) {
     const { onOpenChange } = useToastContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -106,27 +101,24 @@ const Action = React.forwardRef<ActionRef, ActionProps>(
       />
     );
   }
-);
 
 Action.displayName = 'ActionToast';
 
-const Title = React.forwardRef<TitleRef, TitleProps>(({ asChild, ...props }, ref) => {
+function Title({ ref, asChild, ...props  }: TitleProps & { ref?: React.Ref<TitleRef> }) {
   const { nativeID } = useToastContext();
 
   const Component = asChild ? Slot.Text : Text;
   return <Component ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
-});
+}
 
 Title.displayName = 'TitleToast';
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>(
-  ({ asChild, ...props }, ref) => {
+function Description({ ref, asChild, ...props  }: DescriptionProps & { ref?: React.Ref<DescriptionRef> }) {
     const { nativeID } = useToastContext();
 
     const Component = asChild ? Slot.Text : Text;
     return <Component ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
   }
-);
 
 Description.displayName = 'DescriptionToast';
 
diff --git a/packages/toggle-group/src/toggle-group.tsx b/packages/toggle-group/src/toggle-group.tsx
index 2d720f15..4d5399b1 100644
--- a/packages/toggle-group/src/toggle-group.tsx
+++ b/packages/toggle-group/src/toggle-group.tsx
@@ -6,10 +6,7 @@ import type { ItemProps, ItemRef, RootProps, RootRef } from './types';
 
 const ToggleGroupContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       type,
       value,
       onValueChange,
@@ -19,9 +16,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       dir: _dir,
       loop: _loop,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ToggleGroupContext.Provider
@@ -38,7 +33,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ToggleGroupContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootToggleGroup';
 
@@ -54,11 +48,7 @@ function useRootContext() {
 
 const ItemContext = React.createContext<ItemProps | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
-    ref
-  ) => {
+function Item({ ref, asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const id = React.useId();
     const { type, disabled, value, onValueChange } = useRootContext();
 
@@ -99,7 +89,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemToggleGroup';
 
diff --git a/packages/toggle-group/src/toggle-group.web.tsx b/packages/toggle-group/src/toggle-group.web.tsx
index 71808ca8..06f23c4c 100644
--- a/packages/toggle-group/src/toggle-group.web.tsx
+++ b/packages/toggle-group/src/toggle-group.web.tsx
@@ -7,10 +7,7 @@ import type { ItemProps, ItemRef, RootProps, RootRef } from './types';
 
 const ToggleGroupContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       type,
       value,
       onValueChange,
@@ -20,9 +17,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       dir,
       loop,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ToggleGroupContext.Provider
@@ -51,7 +46,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ToggleGroupContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootToggleGroup';
 
@@ -67,11 +61,7 @@ function useRootContext() {
 
 const ItemContext = React.createContext<ItemProps | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
-    ref
-  ) => {
+function Item({ ref, asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props  }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { type, disabled, value, onValueChange } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -99,7 +89,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemToggleGroup';
 
diff --git a/packages/toggle/src/toggle.tsx b/packages/toggle/src/toggle.tsx
index 606cfad3..efab9d81 100644
--- a/packages/toggle/src/toggle.tsx
+++ b/packages/toggle/src/toggle.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
 import { Pressable, type GestureResponderEvent } from 'react-native';
 import type { RootProps, RootRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+function Root({ ref, asChild, pressed, onPressedChange, disabled, onPress: onPressProp, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     function onPress(ev: GestureResponderEvent) {
       if (disabled) return;
       const newValue = !pressed;
@@ -28,8 +27,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
         {...props}
       />
     );
-  }
-);
+}
 
 Root.displayName = 'RootNativeToggle';
 
diff --git a/packages/toggle/src/toggle.web.tsx b/packages/toggle/src/toggle.web.tsx
index 046d064a..089383eb 100644
--- a/packages/toggle/src/toggle.web.tsx
+++ b/packages/toggle/src/toggle.web.tsx
@@ -4,8 +4,7 @@ import * as React from 'react';
 import { Pressable, type GestureResponderEvent } from 'react-native';
 import type { RootProps, RootRef } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+function Root({ ref, asChild, pressed, onPressedChange, disabled, onPress: onPressProp, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     function onPress(ev: GestureResponderEvent) {
       onPressProp?.(ev);
       onPressedChange(!pressed);
@@ -17,8 +16,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
         <Component ref={ref} onPress={onPress} disabled={disabled} role='button' {...props} />
       </Toggle.Root>
     );
-  }
-);
+}
 
 Root.displayName = 'RootWebToggle';
 
diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
index f572bcf5..fbf38c63 100644
--- a/packages/toolbar/src/toolbar.tsx
+++ b/packages/toolbar/src/toolbar.tsx
@@ -17,19 +17,16 @@ import type {
   ToggleItemRef,
 } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, orientation: _orientation, dir: _dir, loop: _loop, ...props }, ref) => {
+function Root({ ref, asChild, orientation: _orientation, dir: _dir, loop: _loop, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} role='toolbar' {...props} />;
   }
-);
 
 Root.displayName = 'RootNativeToolbar';
 
 const ToggleGroupContext = React.createContext<ToggleGroupProps | null>(null);
 
-const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(
-  ({ asChild, type, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+function ToggleGroup({ ref, asChild, type, value, onValueChange, disabled = false, ...viewProps  }: ToggleGroupProps & { ref?: React.Ref<ToggleGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ToggleGroupContext.Provider
@@ -46,7 +43,6 @@ const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(
       </ToggleGroupContext.Provider>
     );
   }
-);
 
 ToggleGroup.displayName = 'ToggleGroupNativeToolbar';
 
@@ -60,11 +56,7 @@ function useToggleGroupContext() {
   return context;
 }
 
-const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
-  (
-    { asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props },
-    ref
-  ) => {
+function ToggleItem({ ref, asChild, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props  }: ToggleItemProps & { ref?: React.Ref<ToggleItemRef> }) {
     const { type, disabled, value, onValueChange } = useToggleGroupContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -102,27 +94,26 @@ const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
       />
     );
   }
-);
 
 ToggleItem.displayName = 'ToggleItemNativeToolbar';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ asChild, ...props }, ref) => {
+function Separator({ ref, asChild, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
   const Component = asChild ? Slot.View : View;
   return <Component role={'separator'} ref={ref} {...props} />;
-});
+}
 
 Separator.displayName = 'SeparatorNativeToolbar';
 
-const Link = React.forwardRef<LinkRef, LinkProps>(({ asChild, ...props }, ref) => {
+function Link({ ref, asChild, ...props  }: LinkProps & { ref?: React.Ref<LinkRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} role='link' {...props} />;
-});
+}
 
 Link.displayName = 'LinkNativeToolbar';
 
-const Button = React.forwardRef<ButtonRef, ButtonProps>(({ asChild, ...props }, ref) => {
+function Button({ ref, asChild, ...props  }: ButtonProps & { ref?: React.Ref<ButtonRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return <Component ref={ref} role='button' {...props} />;
-});
+}
 
 export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };
diff --git a/packages/toolbar/src/toolbar.web.tsx b/packages/toolbar/src/toolbar.web.tsx
index f7fa25dc..2272fa2f 100644
--- a/packages/toolbar/src/toolbar.web.tsx
+++ b/packages/toolbar/src/toolbar.web.tsx
@@ -18,8 +18,7 @@ import type {
   ToggleItemRef,
 } from './types';
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ asChild, orientation, dir, loop, style, ...props }, ref) => {
+function Root({ ref, asChild, orientation, dir, loop, style, ...props  }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Toolbar.Root orientation={orientation} dir={dir} loop={loop} asChild>
@@ -27,14 +26,12 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </Toolbar.Root>
     );
   }
-);
 
 Root.displayName = 'RootWebToolbar';
 
 const ToggleGroupContext = React.createContext<ToggleGroupProps | null>(null);
 
-const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(
-  ({ asChild, type, value, onValueChange, disabled = false, style, ...viewProps }, ref) => {
+function ToggleGroup({ ref, asChild, type, value, onValueChange, disabled = false, style, ...viewProps  }: ToggleGroupProps & { ref?: React.Ref<ToggleGroupRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ToggleGroupContext.Provider
@@ -59,7 +56,6 @@ const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(
       </ToggleGroupContext.Provider>
     );
   }
-);
 
 ToggleGroup.displayName = 'ToggleGroupWebToolbar';
 
@@ -73,18 +69,13 @@ function useToggleGroupContext() {
   return context;
 }
 
-const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
-  (
-    {
-      asChild,
+function ToggleItem({ ref, asChild,
       value: itemValue,
       disabled: disabledProp = false,
       onPress: onPressProp,
       style,
       ...props
-    },
-    ref
-  ) => {
+     }: ToggleItemProps & { ref?: React.Ref<ToggleItemRef> }) {
     const { type, disabled, value, onValueChange } = useToggleGroupContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -105,37 +96,34 @@ const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
       </Toolbar.ToggleItem>
     );
   }
-);
 
 ToggleItem.displayName = 'ToggleItemWebToolbar';
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
-  ({ asChild, style, ...props }, ref) => {
+function Separator({ ref, asChild, style, ...props  }: SeparatorProps & { ref?: React.Ref<SeparatorRef> }) {
     const Component = asChild ? Slot.View : View;
     return <Component ref={ref} {...props} />;
   }
-);
 
 Separator.displayName = 'SeparatorWebToolbar';
 
-const Link = React.forwardRef<LinkRef, LinkProps>(({ asChild, style, ...props }, ref) => {
+function Link({ ref, asChild, style, ...props  }: LinkProps & { ref?: React.Ref<LinkRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return (
     <Toolbar.Link asChild>
       <Component ref={ref} {...props} />
     </Toolbar.Link>
   );
-});
+}
 
 Link.displayName = 'LinkWebToolbar';
 
-const Button = React.forwardRef<ButtonRef, ButtonProps>(({ asChild, style, ...props }, ref) => {
+function Button({ ref, asChild, style, ...props  }: ButtonProps & { ref?: React.Ref<ButtonRef> }) {
   const Component = asChild ? Slot.Pressable : Pressable;
   return (
     <Toolbar.Button asChild>
       <Component ref={ref} role='button' {...props} />
     </Toolbar.Button>
   );
-});
+}
 
 export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };
diff --git a/packages/tooltip/src/tooltip.tsx b/packages/tooltip/src/tooltip.tsx
index c285d400..dbfc48c2 100644
--- a/packages/tooltip/src/tooltip.tsx
+++ b/packages/tooltip/src/tooltip.tsx
@@ -34,18 +34,13 @@ interface IRootContext {
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       delayDuration: _delayDuration,
       skipDelayDuration: _skipDelayDuration,
       disableHoverableContent: _disableHoverableContent,
       onOpenChange: onOpenChangeProp,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
     const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
@@ -73,7 +68,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeTooltip';
 
@@ -85,8 +79,7 @@ function useTooltipContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, disabled = false, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange, setTriggerPosition } = useTooltipContext();
 
     const augmentedRef = useAugmentedRef({
@@ -127,7 +120,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeTooltip';
 
@@ -154,8 +146,7 @@ function Portal({ forceMount, hostName, children }: PortalProps) {
   );
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const { open, onOpenChange, setContentLayout, setTriggerPosition } = useTooltipContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -176,17 +167,13 @@ const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} onPress={onPress} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayNativeTooltip';
 
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior on native by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'center',
       side = 'top',
@@ -198,9 +185,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -262,7 +247,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeTooltip';
 
diff --git a/packages/tooltip/src/tooltip.web.tsx b/packages/tooltip/src/tooltip.web.tsx
index 2aa735da..dd7ff1f4 100644
--- a/packages/tooltip/src/tooltip.web.tsx
+++ b/packages/tooltip/src/tooltip.web.tsx
@@ -20,18 +20,13 @@ const RootContext = React.createContext<{
   onOpenChange: (open: boolean) => void;
 } | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       delayDuration,
       skipDelayDuration,
       disableHoverableContent,
       onOpenChange: onOpenChangeProp,
       ...viewProps
-    },
-    ref
-  ) => {
+     }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open, setOpen] = React.useState(false);
 
     function onOpenChange(value: boolean) {
@@ -59,7 +54,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebTooltip';
 
@@ -71,8 +65,7 @@ function useTooltipContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
-  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, role: _role, disabled, ...props  }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { onOpenChange, open } = useTooltipContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -113,7 +106,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Tooltip.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebTooltip';
 
@@ -121,19 +113,14 @@ function Portal({ forceMount, container, children }: PortalProps) {
   return <Tooltip.Portal forceMount={forceMount} children={children} container={container} />;
 }
 
-const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Overlay({ ref, asChild, forceMount, ...props  }: OverlayProps & { ref?: React.Ref<OverlayRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return <Component ref={ref} {...props} />;
   }
-);
 
 Overlay.displayName = 'OverlayWebTooltip';
 
-const Content = React.forwardRef<ContentRef, ContentProps>(
-  (
-    {
-      asChild = false,
+function Content({ ref, asChild = false,
       forceMount,
       align = 'center',
       side = 'top',
@@ -149,9 +136,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       sticky,
       hideWhenDetached,
       ...props
-    },
-    ref
-  ) => {
+     }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Tooltip.Content
@@ -170,7 +155,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Tooltip.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebTooltip';