diff --git a/apps/docs/src/components/ui/button.tsx b/apps/docs/src/components/ui/button.tsx
index e6f5744d..51be9f85 100644
--- a/apps/docs/src/components/ui/button.tsx
+++ b/apps/docs/src/components/ui/button.tsx
@@ -37,14 +37,12 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+function Button({ ref, className, variant, size, asChild = false, ...props }: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) {
     const Comp = asChild ? Slot : 'button';
     return (
       <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  }
-);
+    }
+
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/apps/expo-nativewind/app/(components)/navigation-menu.tsx b/apps/expo-nativewind/app/(components)/navigation-menu.tsx
index 4ccd0699..8f82a0d5 100644
--- a/apps/expo-nativewind/app/(components)/navigation-menu.tsx
+++ b/apps/expo-nativewind/app/(components)/navigation-menu.tsx
@@ -175,6 +175,6 @@ const ListItem = React.forwardRef<
         </Text>
       </NavigationMenuLink>
     </View>
-  );
-});
+  }
+
 ListItem.displayName = 'ListItem';
diff --git a/apps/expo-nativewind/components/ui/accordion.tsx b/apps/expo-nativewind/components/ui/accordion.tsx
index 6d214765..ca076c20 100644
--- a/apps/expo-nativewind/components/ui/accordion.tsx
+++ b/apps/expo-nativewind/components/ui/accordion.tsx
@@ -26,8 +26,7 @@ const Accordion = React.forwardRef<
         <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
       </AccordionPrimitive.Root>
     </LayoutAnimationConfig>
-  );
-});
+  }
 
 Accordion.displayName = AccordionPrimitive.Root.displayName;
 
@@ -44,8 +43,8 @@ const AccordionItem = React.forwardRef<
         {...props}
       />
     </Animated.View>
-  );
-});
+  }
+
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
 
 const Trigger = Platform.OS === 'web' ? View : Pressable;
@@ -82,8 +81,8 @@ const AccordionTrigger = React.forwardRef<
         </AccordionPrimitive.Trigger>
       </AccordionPrimitive.Header>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
@@ -119,8 +118,7 @@ function InnerContent({ children, className }: { children: React.ReactNode; clas
     >
       {children}
     </Animated.View>
-  );
-}
+  }
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
diff --git a/apps/expo-nativewind/components/ui/alert-dialog.tsx b/apps/expo-nativewind/components/ui/alert-dialog.tsx
index ebd548dc..794a7fd8 100644
--- a/apps/expo-nativewind/components/ui/alert-dialog.tsx
+++ b/apps/expo-nativewind/components/ui/alert-dialog.tsx
@@ -27,8 +27,7 @@ const AlertDialogOverlayWeb = React.forwardRef<
       {...props}
       ref={ref}
     />
-  );
-});
+  }
 
 AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
 
@@ -48,8 +47,7 @@ const AlertDialogOverlayNative = React.forwardRef<
         {children}
       </Animated.View>
     </AlertDialogPrimitive.Overlay>
-  );
-});
+  }
 
 AlertDialogOverlayNative.displayName = 'AlertDialogOverlayNative';
 
@@ -80,8 +78,8 @@ const AlertDialogContent = React.forwardRef<
         />
       </AlertDialogOverlay>
     </AlertDialogPortal>
-  );
-});
+  }
+
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
diff --git a/apps/expo-nativewind/components/ui/button.tsx b/apps/expo-nativewind/components/ui/button.tsx
index 5e0e4a09..e2d97dac 100644
--- a/apps/expo-nativewind/components/ui/button.tsx
+++ b/apps/expo-nativewind/components/ui/button.tsx
@@ -79,9 +79,8 @@ const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>
           {...props}
         />
       </TextClassContext.Provider>
-    );
-  }
-);
+    }
+
 Button.displayName = 'Button';
 
 export { Button, buttonTextVariants, buttonVariants };
diff --git a/apps/expo-nativewind/components/ui/checkbox.tsx b/apps/expo-nativewind/components/ui/checkbox.tsx
index 920feea3..6a175bfc 100644
--- a/apps/expo-nativewind/components/ui/checkbox.tsx
+++ b/apps/expo-nativewind/components/ui/checkbox.tsx
@@ -26,8 +26,8 @@ const Checkbox = React.forwardRef<
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  );
-});
+  }
+
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
diff --git a/apps/expo-nativewind/components/ui/context-menu.tsx b/apps/expo-nativewind/components/ui/context-menu.tsx
index eeafc4ff..b2e0952a 100644
--- a/apps/expo-nativewind/components/ui/context-menu.tsx
+++ b/apps/expo-nativewind/components/ui/context-menu.tsx
@@ -43,8 +43,8 @@ const ContextMenuSubTrigger = React.forwardRef<
         <Icon size={18} className='ml-auto text-foreground' />
       </ContextMenuPrimitive.SubTrigger>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
@@ -64,8 +64,8 @@ const ContextMenuSubContent = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
@@ -105,8 +105,8 @@ const ContextMenuContent = React.forwardRef<
         />
       </ContextMenuPrimitive.Overlay>
     </ContextMenuPrimitive.Portal>
-  );
-});
+  }
+
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
diff --git a/apps/expo-nativewind/components/ui/dialog.tsx b/apps/expo-nativewind/components/ui/dialog.tsx
index 7347328c..cd366d34 100644
--- a/apps/expo-nativewind/components/ui/dialog.tsx
+++ b/apps/expo-nativewind/components/ui/dialog.tsx
@@ -28,8 +28,7 @@ const DialogOverlayWeb = React.forwardRef<
       {...props}
       ref={ref}
     />
-  );
-});
+  }
 
 DialogOverlayWeb.displayName = 'DialogOverlayWeb';
 
@@ -48,8 +47,7 @@ const DialogOverlayNative = React.forwardRef<
         <>{children}</>
       </Animated.View>
     </DialogPrimitive.Overlay>
-  );
-});
+  }
 
 DialogOverlayNative.displayName = 'DialogOverlayNative';
 
@@ -91,8 +89,8 @@ const DialogContent = React.forwardRef<
         </DialogPrimitive.Content>
       </DialogOverlay>
     </DialogPortal>
-  );
-});
+  }
+
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
diff --git a/apps/expo-nativewind/components/ui/dropdown-menu.tsx b/apps/expo-nativewind/components/ui/dropdown-menu.tsx
index 09f01a6e..986b777e 100644
--- a/apps/expo-nativewind/components/ui/dropdown-menu.tsx
+++ b/apps/expo-nativewind/components/ui/dropdown-menu.tsx
@@ -49,8 +49,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
         <Icon size={18} className='ml-auto text-foreground' />
       </DropdownMenuPrimitive.SubTrigger>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
@@ -70,8 +70,8 @@ const DropdownMenuSubContent = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
@@ -111,8 +111,8 @@ const DropdownMenuContent = React.forwardRef<
         />
       </DropdownMenuPrimitive.Overlay>
     </DropdownMenuPrimitive.Portal>
-  );
-});
+  }
+
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
diff --git a/apps/expo-nativewind/components/ui/hover-card.tsx b/apps/expo-nativewind/components/ui/hover-card.tsx
index 895eee6c..0d4ecebc 100644
--- a/apps/expo-nativewind/components/ui/hover-card.tsx
+++ b/apps/expo-nativewind/components/ui/hover-card.tsx
@@ -38,8 +38,8 @@ const HoverCardContent = React.forwardRef<
         </Animated.View>
       </HoverCardPrimitive.Overlay>
     </HoverCardPrimitive.Portal>
-  );
-});
+  }
+
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 export { HoverCard, HoverCardContent, HoverCardTrigger };
diff --git a/apps/expo-nativewind/components/ui/input.tsx b/apps/expo-nativewind/components/ui/input.tsx
index afc652da..9c334705 100644
--- a/apps/expo-nativewind/components/ui/input.tsx
+++ b/apps/expo-nativewind/components/ui/input.tsx
@@ -17,8 +17,7 @@ const Input = React.forwardRef<
       placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
       {...props}
     />
-  );
-});
+  }
 
 Input.displayName = 'Input';
 
diff --git a/apps/expo-nativewind/components/ui/menubar.tsx b/apps/expo-nativewind/components/ui/menubar.tsx
index c36e488a..f6219c85 100644
--- a/apps/expo-nativewind/components/ui/menubar.tsx
+++ b/apps/expo-nativewind/components/ui/menubar.tsx
@@ -50,8 +50,8 @@ const MenubarTrigger = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
@@ -83,8 +83,8 @@ const MenubarSubTrigger = React.forwardRef<
         <Icon size={18} className='ml-auto text-foreground' />
       </MenubarPrimitive.SubTrigger>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
@@ -104,8 +104,8 @@ const MenubarSubContent = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
@@ -128,8 +128,8 @@ const MenubarContent = React.forwardRef<
         {...props}
       />
     </MenubarPrimitive.Portal>
-  );
-});
+  }
+
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
diff --git a/apps/expo-nativewind/components/ui/navigation-menu.tsx b/apps/expo-nativewind/components/ui/navigation-menu.tsx
index 7f9b986e..be577503 100644
--- a/apps/expo-nativewind/components/ui/navigation-menu.tsx
+++ b/apps/expo-nativewind/components/ui/navigation-menu.tsx
@@ -85,8 +85,8 @@ const NavigationMenuTrigger = React.forwardRef<
         />
       </Animated.View>
     </NavigationMenuPrimitive.Trigger>
-  );
-});
+  }
+
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
@@ -118,8 +118,8 @@ const NavigationMenuContent = React.forwardRef<
         </Animated.View>
       </NavigationMenuPrimitive.Content>
     </NavigationMenuPrimitive.Portal>
-  );
-});
+  }
+
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
@@ -141,8 +141,8 @@ const NavigationMenuViewport = React.forwardRef<
         <NavigationMenuPrimitive.Viewport />
       </View>
     </View>
-  );
-});
+  }
+
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
@@ -164,8 +164,8 @@ const NavigationMenuIndicator = React.forwardRef<
     >
       <View className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md shadow-foreground/5' />
     </NavigationMenuPrimitive.Indicator>
-  );
-});
+  }
+
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 export {
diff --git a/apps/expo-nativewind/components/ui/popover.tsx b/apps/expo-nativewind/components/ui/popover.tsx
index 0b9efbbe..858ac6b8 100644
--- a/apps/expo-nativewind/components/ui/popover.tsx
+++ b/apps/expo-nativewind/components/ui/popover.tsx
@@ -32,8 +32,8 @@ const PopoverContent = React.forwardRef<
         </Animated.View>
       </PopoverPrimitive.Overlay>
     </PopoverPrimitive.Portal>
-  );
-});
+  }
+
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverContent, PopoverTrigger };
diff --git a/apps/expo-nativewind/components/ui/progress.tsx b/apps/expo-nativewind/components/ui/progress.tsx
index d0dd32be..0995c112 100644
--- a/apps/expo-nativewind/components/ui/progress.tsx
+++ b/apps/expo-nativewind/components/ui/progress.tsx
@@ -24,8 +24,8 @@ const Progress = React.forwardRef<
     >
       <Indicator value={value} className={indicatorClassName} />
     </ProgressPrimitive.Root>
-  );
-});
+  }
+
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };
diff --git a/apps/expo-nativewind/components/ui/radio-group.tsx b/apps/expo-nativewind/components/ui/radio-group.tsx
index 89a57394..a216e23a 100644
--- a/apps/expo-nativewind/components/ui/radio-group.tsx
+++ b/apps/expo-nativewind/components/ui/radio-group.tsx
@@ -9,8 +9,8 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} ref={ref} />
-  );
-});
+  }
+
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
@@ -31,8 +31,8 @@ const RadioGroupItem = React.forwardRef<
         <View className='aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full' />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  );
-});
+  }
+
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 export { RadioGroup, RadioGroupItem };
diff --git a/apps/expo-nativewind/components/ui/select.tsx b/apps/expo-nativewind/components/ui/select.tsx
index a5c735fa..a0e595a9 100644
--- a/apps/expo-nativewind/components/ui/select.tsx
+++ b/apps/expo-nativewind/components/ui/select.tsx
@@ -113,8 +113,8 @@ const SelectContent = React.forwardRef<
         </Animated.View>
       </SelectPrimitive.Overlay>
     </SelectPrimitive.Portal>
-  );
-});
+  }
+
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
diff --git a/apps/expo-nativewind/components/ui/switch.tsx b/apps/expo-nativewind/components/ui/switch.tsx
index 7273b91f..b4072831 100644
--- a/apps/expo-nativewind/components/ui/switch.tsx
+++ b/apps/expo-nativewind/components/ui/switch.tsx
@@ -85,8 +85,8 @@ const SwitchNative = React.forwardRef<
         </Animated.View>
       </SwitchPrimitives.Root>
     </Animated.View>
-  );
-});
+  }
+
 SwitchNative.displayName = 'SwitchNative';
 
 const Switch = Platform.select({
diff --git a/apps/expo-nativewind/components/ui/tabs.tsx b/apps/expo-nativewind/components/ui/tabs.tsx
index 93a96852..184ed007 100644
--- a/apps/expo-nativewind/components/ui/tabs.tsx
+++ b/apps/expo-nativewind/components/ui/tabs.tsx
@@ -43,8 +43,8 @@ const TabsTrigger = React.forwardRef<
         {...props}
       />
     </TextClassContext.Provider>
-  );
-});
+  }
+
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
diff --git a/apps/expo-nativewind/components/ui/text.tsx b/apps/expo-nativewind/components/ui/text.tsx
index 0d7af0f9..c09126d8 100644
--- a/apps/expo-nativewind/components/ui/text.tsx
+++ b/apps/expo-nativewind/components/ui/text.tsx
@@ -6,8 +6,7 @@ import { cn } from '~/lib/utils';
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
-const Text = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Text({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const textClass = React.useContext(TextClassContext);
     const Component = asChild ? Slot.Text : RNText;
     return (
@@ -16,9 +15,8 @@ const Text = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
+
 Text.displayName = 'Text';
 
 export { Text, TextClassContext };
diff --git a/apps/expo-nativewind/components/ui/toggle-group.tsx b/apps/expo-nativewind/components/ui/toggle-group.tsx
index 48c6b6cf..4ffb85c0 100644
--- a/apps/expo-nativewind/components/ui/toggle-group.tsx
+++ b/apps/expo-nativewind/components/ui/toggle-group.tsx
@@ -67,8 +67,7 @@ const ToggleGroupItem = React.forwardRef<
         {children}
       </ToggleGroupPrimitive.Item>
     </TextClassContext.Provider>
-  );
-});
+  }
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
diff --git a/apps/expo-nativewind/components/ui/typography.tsx b/apps/expo-nativewind/components/ui/typography.tsx
index 47dd3795..bc78a566 100644
--- a/apps/expo-nativewind/components/ui/typography.tsx
+++ b/apps/expo-nativewind/components/ui/typography.tsx
@@ -4,8 +4,7 @@ import * as React from 'react';
 import { Platform, Text as RNText } from 'react-native';
 import { cn } from '~/lib/utils';
 
-const H1 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H1({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -18,14 +17,11 @@ const H1 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H1.displayName = 'H1';
 
-const H2 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H2({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -38,14 +34,11 @@ const H2 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H2.displayName = 'H2';
 
-const H3 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H3({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -58,14 +51,11 @@ const H3 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H3.displayName = 'H3';
 
-const H4 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H4({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -78,14 +68,11 @@ const H4 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H4.displayName = 'H4';
 
-const P = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function P({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -93,13 +80,11 @@ const P = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
+
 P.displayName = 'P';
 
-const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function BlockQuote({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -112,14 +97,11 @@ const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 BlockQuote.displayName = 'BlockQuote';
 
-const Code = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Code({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -132,14 +114,11 @@ const Code = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Code.displayName = 'Code';
 
-const Lead = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Lead({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -147,14 +126,11 @@ const Lead = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Lead.displayName = 'Lead';
 
-const Large = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Large({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -162,14 +138,11 @@ const Large = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Large.displayName = 'Large';
 
-const Small = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Small({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -180,14 +153,11 @@ const Small = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Small.displayName = 'Small';
 
-const Muted = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Muted({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -195,9 +165,7 @@ const Muted = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Muted.displayName = 'Muted';
 
diff --git a/apps/expo-stylesheet/components/ui/select.tsx b/apps/expo-stylesheet/components/ui/select.tsx
index a3f58565..f389e7eb 100644
--- a/apps/expo-stylesheet/components/ui/select.tsx
+++ b/apps/expo-stylesheet/components/ui/select.tsx
@@ -132,8 +132,8 @@ const SelectContent = React.forwardRef<
         </Animated.View>
       </SelectPrimitive.Overlay>
     </SelectPrimitive.Portal>
-  );
-});
+  }
+
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
diff --git a/apps/nextjs-nativewind/src/components/NavigationMenuExample.tsx b/apps/nextjs-nativewind/src/components/NavigationMenuExample.tsx
index a22ce4a1..ed005ca8 100644
--- a/apps/nextjs-nativewind/src/components/NavigationMenuExample.tsx
+++ b/apps/nextjs-nativewind/src/components/NavigationMenuExample.tsx
@@ -151,6 +151,6 @@ const ListItem = React.forwardRef<
         </Text>
       </NavigationMenuLink>
     </View>
-  );
-});
+  }
+
 ListItem.displayName = 'ListItem';
diff --git a/apps/nextjs-nativewind/src/components/ui/accordion.tsx b/apps/nextjs-nativewind/src/components/ui/accordion.tsx
index cdd1e81d..76aeb0da 100644
--- a/apps/nextjs-nativewind/src/components/ui/accordion.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/accordion.tsx
@@ -23,8 +23,7 @@ const Accordion = React.forwardRef<
         <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
       </AccordionPrimitive.Root>
     </LayoutAnimationConfig>
-  );
-});
+  }
 
 Accordion.displayName = AccordionPrimitive.Root.displayName;
 
@@ -41,8 +40,8 @@ const AccordionItem = React.forwardRef<
         {...props}
       />
     </Animated.View>
-  );
-});
+  }
+
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
 
 const Trigger = Platform.OS === 'web' ? View : Pressable;
@@ -71,8 +70,8 @@ const AccordionTrigger = React.forwardRef<
         </AccordionPrimitive.Trigger>
       </AccordionPrimitive.Header>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
@@ -108,8 +107,7 @@ function InnerContent({ children, className }: { children: React.ReactNode; clas
     >
       {children}
     </Animated.View>
-  );
-}
+  }
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
diff --git a/apps/nextjs-nativewind/src/components/ui/alert-dialog.tsx b/apps/nextjs-nativewind/src/components/ui/alert-dialog.tsx
index 0bff8c25..465fe06f 100644
--- a/apps/nextjs-nativewind/src/components/ui/alert-dialog.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/alert-dialog.tsx
@@ -29,8 +29,7 @@ const AlertDialogOverlayWeb = React.forwardRef<
       {...props}
       ref={ref}
     />
-  );
-});
+  }
 
 AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
 
@@ -50,8 +49,7 @@ const AlertDialogOverlayNative = React.forwardRef<
         {children}
       </Animated.View>
     </AlertDialogPrimitive.Overlay>
-  );
-});
+  }
 
 AlertDialogOverlayNative.displayName = 'AlertDialogOverlayNative';
 
@@ -82,8 +80,8 @@ const AlertDialogContent = React.forwardRef<
         />
       </AlertDialogOverlay>
     </AlertDialogPortal>
-  );
-});
+  }
+
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
diff --git a/apps/nextjs-nativewind/src/components/ui/button.tsx b/apps/nextjs-nativewind/src/components/ui/button.tsx
index feea50a1..cdb87ccd 100644
--- a/apps/nextjs-nativewind/src/components/ui/button.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/button.tsx
@@ -62,28 +62,27 @@ const buttonTextVariants = cva(
 type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
   VariantProps<typeof buttonVariants>;
 
-const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <TextClassContext.Provider
-        value={cn(
-          props.disabled && 'web:pointer-events-none',
-          buttonTextVariants({ variant, size })
+function Button({ ref, className, variant, size, ...props }: ButtonProps & { ref?: React.Ref<React.ElementRef<typeof Pressable>> }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        props.disabled && 'web:pointer-events-none',
+        buttonTextVariants({ variant, size })
+      )}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && 'opacity-50 web:pointer-events-none',
+          buttonVariants({ variant, size, className })
         )}
-      >
-        <Pressable
-          className={cn(
-            props.disabled && 'opacity-50 web:pointer-events-none',
-            buttonVariants({ variant, size, className })
-          )}
-          ref={ref}
-          role='button'
-          {...props}
-        />
-      </TextClassContext.Provider>
-    );
-  }
-);
+        ref={ref}
+        role='button'
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
 Button.displayName = 'Button';
 
 export { Button, buttonTextVariants, buttonVariants };
diff --git a/apps/nextjs-nativewind/src/components/ui/checkbox.tsx b/apps/nextjs-nativewind/src/components/ui/checkbox.tsx
index e0334e04..fa591a0f 100644
--- a/apps/nextjs-nativewind/src/components/ui/checkbox.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/checkbox.tsx
@@ -28,8 +28,8 @@ const Checkbox = React.forwardRef<
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  );
-});
+  }
+
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
diff --git a/apps/nextjs-nativewind/src/components/ui/context-menu.tsx b/apps/nextjs-nativewind/src/components/ui/context-menu.tsx
index 15d9fe66..ca7800f3 100644
--- a/apps/nextjs-nativewind/src/components/ui/context-menu.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/context-menu.tsx
@@ -45,8 +45,8 @@ const ContextMenuSubTrigger = React.forwardRef<
         <Icon size={18} className='ml-auto text-foreground' />
       </ContextMenuPrimitive.SubTrigger>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
@@ -66,8 +66,8 @@ const ContextMenuSubContent = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
@@ -107,8 +107,8 @@ const ContextMenuContent = React.forwardRef<
         />
       </ContextMenuPrimitive.Overlay>
     </ContextMenuPrimitive.Portal>
-  );
-});
+  }
+
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
diff --git a/apps/nextjs-nativewind/src/components/ui/dialog.tsx b/apps/nextjs-nativewind/src/components/ui/dialog.tsx
index 58b8b972..4479b43b 100644
--- a/apps/nextjs-nativewind/src/components/ui/dialog.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/dialog.tsx
@@ -30,8 +30,7 @@ const DialogOverlayWeb = React.forwardRef<
       {...props}
       ref={ref}
     />
-  );
-});
+  }
 
 DialogOverlayWeb.displayName = 'DialogOverlayWeb';
 
@@ -50,8 +49,7 @@ const DialogOverlayNative = React.forwardRef<
         <>{children}</>
       </Animated.View>
     </DialogPrimitive.Overlay>
-  );
-});
+  }
 
 DialogOverlayNative.displayName = 'DialogOverlayNative';
 
@@ -93,8 +91,8 @@ const DialogContent = React.forwardRef<
         </DialogPrimitive.Content>
       </DialogOverlay>
     </DialogPortal>
-  );
-});
+  }
+
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
diff --git a/apps/nextjs-nativewind/src/components/ui/dropdown-menu.tsx b/apps/nextjs-nativewind/src/components/ui/dropdown-menu.tsx
index 6bff62a2..584cb879 100644
--- a/apps/nextjs-nativewind/src/components/ui/dropdown-menu.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/dropdown-menu.tsx
@@ -51,8 +51,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
         <Icon size={18} className='ml-auto text-foreground' />
       </DropdownMenuPrimitive.SubTrigger>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
@@ -72,8 +72,8 @@ const DropdownMenuSubContent = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
@@ -113,8 +113,8 @@ const DropdownMenuContent = React.forwardRef<
         />
       </DropdownMenuPrimitive.Overlay>
     </DropdownMenuPrimitive.Portal>
-  );
-});
+  }
+
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
diff --git a/apps/nextjs-nativewind/src/components/ui/hover-card.tsx b/apps/nextjs-nativewind/src/components/ui/hover-card.tsx
index f23c94f3..58ff8a65 100644
--- a/apps/nextjs-nativewind/src/components/ui/hover-card.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/hover-card.tsx
@@ -40,8 +40,8 @@ const HoverCardContent = React.forwardRef<
         </Animated.View>
       </HoverCardPrimitive.Overlay>
     </HoverCardPrimitive.Portal>
-  );
-});
+  }
+
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 export { HoverCard, HoverCardContent, HoverCardTrigger };
diff --git a/apps/nextjs-nativewind/src/components/ui/input.tsx b/apps/nextjs-nativewind/src/components/ui/input.tsx
index 97a36fc3..40b5ee4c 100644
--- a/apps/nextjs-nativewind/src/components/ui/input.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/input.tsx
@@ -19,8 +19,7 @@ const Input = React.forwardRef<
       placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
       {...props}
     />
-  );
-});
+  }
 
 Input.displayName = 'Input';
 
diff --git a/apps/nextjs-nativewind/src/components/ui/menubar.tsx b/apps/nextjs-nativewind/src/components/ui/menubar.tsx
index eeeb57da..810b36e2 100644
--- a/apps/nextjs-nativewind/src/components/ui/menubar.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/menubar.tsx
@@ -52,8 +52,8 @@ const MenubarTrigger = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
@@ -85,8 +85,8 @@ const MenubarSubTrigger = React.forwardRef<
         <Icon size={18} className='ml-auto text-foreground' />
       </MenubarPrimitive.SubTrigger>
     </TextClassContext.Provider>
-  );
-});
+  }
+
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
@@ -106,8 +106,8 @@ const MenubarSubContent = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
+  }
+
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
@@ -130,8 +130,8 @@ const MenubarContent = React.forwardRef<
         {...props}
       />
     </MenubarPrimitive.Portal>
-  );
-});
+  }
+
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
diff --git a/apps/nextjs-nativewind/src/components/ui/navigation-menu.tsx b/apps/nextjs-nativewind/src/components/ui/navigation-menu.tsx
index 10d958a9..0840c64d 100644
--- a/apps/nextjs-nativewind/src/components/ui/navigation-menu.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/navigation-menu.tsx
@@ -70,8 +70,8 @@ const NavigationMenuTrigger = React.forwardRef<
         />
       </View>
     </NavigationMenuPrimitive.Trigger>
-  );
-});
+  }
+
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
@@ -98,8 +98,8 @@ const NavigationMenuContent = React.forwardRef<
         {children}
       </NavigationMenuPrimitive.Content>
     </NavigationMenuPrimitive.Portal>
-  );
-});
+  }
+
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
@@ -121,8 +121,8 @@ const NavigationMenuViewport = React.forwardRef<
         <NavigationMenuPrimitive.Viewport />
       </View>
     </View>
-  );
-});
+  }
+
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
@@ -144,8 +144,8 @@ const NavigationMenuIndicator = React.forwardRef<
     >
       <View className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md shadow-foreground/5' />
     </NavigationMenuPrimitive.Indicator>
-  );
-});
+  }
+
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 export {
diff --git a/apps/nextjs-nativewind/src/components/ui/popover.tsx b/apps/nextjs-nativewind/src/components/ui/popover.tsx
index d8b9ef96..259f504c 100644
--- a/apps/nextjs-nativewind/src/components/ui/popover.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/popover.tsx
@@ -31,8 +31,8 @@ const PopoverContent = React.forwardRef<
         </TextClassContext.Provider>
       </PopoverPrimitive.Overlay>
     </PopoverPrimitive.Portal>
-  );
-});
+  }
+
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverContent, PopoverTrigger };
diff --git a/apps/nextjs-nativewind/src/components/ui/progress.tsx b/apps/nextjs-nativewind/src/components/ui/progress.tsx
index aef1766a..91d18b46 100644
--- a/apps/nextjs-nativewind/src/components/ui/progress.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/progress.tsx
@@ -19,8 +19,8 @@ const Progress = React.forwardRef<
     >
       <Indicator value={value} className={indicatorClassName} />
     </ProgressPrimitive.Root>
-  );
-});
+  }
+
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };
diff --git a/apps/nextjs-nativewind/src/components/ui/radio-group.tsx b/apps/nextjs-nativewind/src/components/ui/radio-group.tsx
index a9c8907d..a6db8def 100644
--- a/apps/nextjs-nativewind/src/components/ui/radio-group.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/radio-group.tsx
@@ -11,8 +11,8 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} ref={ref} />
-  );
-});
+  }
+
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
@@ -33,8 +33,8 @@ const RadioGroupItem = React.forwardRef<
         <View className='aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full' />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  );
-});
+  }
+
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 export { RadioGroup, RadioGroupItem };
diff --git a/apps/nextjs-nativewind/src/components/ui/select.tsx b/apps/nextjs-nativewind/src/components/ui/select.tsx
index d82bc3d2..c2cc3691 100644
--- a/apps/nextjs-nativewind/src/components/ui/select.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/select.tsx
@@ -113,8 +113,8 @@ const SelectContent = React.forwardRef<
         </SelectPrimitive.Content>
       </Animated.View>
     </SelectPrimitive.Overlay>
-  );
-});
+  }
+
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
diff --git a/apps/nextjs-nativewind/src/components/ui/switch.tsx b/apps/nextjs-nativewind/src/components/ui/switch.tsx
index 16a4dfe6..29b52dc6 100644
--- a/apps/nextjs-nativewind/src/components/ui/switch.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/switch.tsx
@@ -87,8 +87,8 @@ const SwitchNative = React.forwardRef<
         </Animated.View>
       </SwitchPrimitives.Root>
     </Animated.View>
-  );
-});
+  }
+
 SwitchNative.displayName = 'SwitchNative';
 
 const Switch = Platform.select({
diff --git a/apps/nextjs-nativewind/src/components/ui/tabs.tsx b/apps/nextjs-nativewind/src/components/ui/tabs.tsx
index eaf5a4f9..4999b3b4 100644
--- a/apps/nextjs-nativewind/src/components/ui/tabs.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/tabs.tsx
@@ -45,8 +45,8 @@ const TabsTrigger = React.forwardRef<
         {...props}
       />
     </TextClassContext.Provider>
-  );
-});
+  }
+
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
diff --git a/apps/nextjs-nativewind/src/components/ui/text.tsx b/apps/nextjs-nativewind/src/components/ui/text.tsx
index 8442ba6f..1cb308ae 100644
--- a/apps/nextjs-nativewind/src/components/ui/text.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/text.tsx
@@ -8,8 +8,7 @@ import { cn } from '~/lib/utils';
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
-const Text = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Text({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const textClass = React.useContext(TextClassContext);
     const Component = asChild ? Slot.Text : RNText;
     return (
@@ -18,9 +17,8 @@ const Text = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
+
 Text.displayName = 'Text';
 
 export { Text, TextClassContext };
diff --git a/apps/nextjs-nativewind/src/components/ui/toggle-group.tsx b/apps/nextjs-nativewind/src/components/ui/toggle-group.tsx
index 6c99dd9b..34235a65 100644
--- a/apps/nextjs-nativewind/src/components/ui/toggle-group.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/toggle-group.tsx
@@ -69,8 +69,7 @@ const ToggleGroupItem = React.forwardRef<
         {children}
       </ToggleGroupPrimitive.Item>
     </TextClassContext.Provider>
-  );
-});
+  }
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
diff --git a/apps/nextjs-nativewind/src/components/ui/typography.tsx b/apps/nextjs-nativewind/src/components/ui/typography.tsx
index 7e54bf7c..9de65d0f 100644
--- a/apps/nextjs-nativewind/src/components/ui/typography.tsx
+++ b/apps/nextjs-nativewind/src/components/ui/typography.tsx
@@ -6,8 +6,7 @@ import * as React from 'react';
 import { Platform, Text as RNText } from 'react-native';
 import { cn } from '~/lib/utils';
 
-const H1 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H1({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -20,14 +19,11 @@ const H1 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H1.displayName = 'H1';
 
-const H2 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H2({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -40,14 +36,11 @@ const H2 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H2.displayName = 'H2';
 
-const H3 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H3({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -60,14 +53,11 @@ const H3 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H3.displayName = 'H3';
 
-const H4 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function H4({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -80,14 +70,11 @@ const H4 = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 H4.displayName = 'H4';
 
-const P = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function P({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -95,13 +82,11 @@ const P = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
+
 P.displayName = 'P';
 
-const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function BlockQuote({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -114,14 +99,11 @@ const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 BlockQuote.displayName = 'BlockQuote';
 
-const Code = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Code({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -134,14 +116,11 @@ const Code = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Code.displayName = 'Code';
 
-const Lead = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Lead({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -149,14 +128,11 @@ const Lead = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Lead.displayName = 'Lead';
 
-const Large = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Large({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -164,14 +140,11 @@ const Large = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Large.displayName = 'Large';
 
-const Small = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Small({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -182,14 +155,11 @@ const Small = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Small.displayName = 'Small';
 
-const Muted = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
+function Muted({ ref, className, asChild = false, ...props }: SlottableTextProps & { ref?: React.Ref<TextRef> }) {
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
@@ -197,9 +167,7 @@ const Muted = React.forwardRef<TextRef, SlottableTextProps>(
         ref={ref}
         {...props}
       />
-    );
-  }
-);
+    }
 
 Muted.displayName = 'Muted';
 
diff --git a/packages/accordion/src/accordion.tsx b/packages/accordion/src/accordion.tsx
index afc5a4fe..ce1a0ab6 100644
--- a/packages/accordion/src/accordion.tsx
+++ b/packages/accordion/src/accordion.tsx
@@ -18,20 +18,14 @@ import type {
 
 const AccordionContext = React.createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       type,
       disabled,
       collapsible = true,
       value: valueProp,
       onValueChange: onValueChangeProps,
       defaultValue,
-      ...viewProps
-    },
-    ref
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
       (string | undefined) | string[]
     >({
@@ -55,7 +49,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </AccordionContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeAccordion';
 
@@ -76,8 +69,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 +87,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </AccordionItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemNativeAccordion';
 
@@ -109,7 +100,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 +114,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 +165,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 +189,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..cf84a2c6 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,
@@ -34,10 +31,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       dir,
       orientation = 'vertical',
       collapsible,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
       (string | undefined) | string[]
     >({
@@ -75,7 +69,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </AccordionContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebAccordion';
 
@@ -93,8 +86,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 +125,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </AccordionItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemWebAccordion';
 
@@ -147,7 +138,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 +168,7 @@ const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props },
       <Component ref={augmentedRef} {...props} />
     </Accordion.Header>
   );
-});
+}
 
 Header.displayName = 'HeaderWebAccordion';
 
@@ -189,8 +180,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 +236,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 +271,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..998bd88e 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..3d114d67 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..0ed08814 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..22ffe600 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,11 +40,7 @@ function useRootContext() {
   return context;
 }
 
-const Image = React.forwardRef<ImageRef, ImageProps>(
-  (
-    { asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props },
-    ref
-  ) => {
+function Image({ ref, asChild, onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props }: ImageProps & { ref?: React.Ref<ImageRef> }) {
     const { alt, setStatus, status } = useRootContext();
 
     useIsomorphicLayoutEffect(() => {
@@ -82,11 +78,10 @@ const Image = React.forwardRef<ImageRef, ImageProps>(
     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..b51eeb40 100644
--- a/packages/checkbox/src/checkbox.tsx
+++ b/packages/checkbox/src/checkbox.tsx
@@ -10,8 +10,7 @@ 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) => {
+function Root({ ref, asChild, disabled = false, checked, onCheckedChange, nativeID, ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
     return (
       <CheckboxContext.Provider
         value={{
@@ -25,7 +24,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </CheckboxContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeCheckbox';
 
@@ -39,8 +37,7 @@ function useCheckboxContext() {
   return context;
 }
 
-const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-  ({ asChild, onPress: onPressProp, ...props }, ref) => {
+function Trigger({ ref, asChild, onPress: onPressProp, ...props }: SlottablePressableProps & { ref?: React.Ref<PressableRef> }) {
     const { disabled, checked, onCheckedChange, nativeID } = useCheckboxContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -68,12 +65,10 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeCheckbox';
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Indicator({ ref, asChild, forceMount, ...props }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
     const { checked, disabled } = useCheckboxContext();
 
     if (!forceMount) {
@@ -93,7 +88,6 @@ const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
       />
     );
   }
-);
 
 Indicator.displayName = 'IndicatorNativeCheckbox';
 
diff --git a/packages/checkbox/src/checkbox.web.tsx b/packages/checkbox/src/checkbox.web.tsx
index d59db1ac..77decafd 100644
--- a/packages/checkbox/src/checkbox.web.tsx
+++ b/packages/checkbox/src/checkbox.web.tsx
@@ -7,11 +7,7 @@ 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
-  ) => {
+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) {
@@ -61,7 +57,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </CheckboxContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebCheckbox';
 
@@ -75,8 +70,7 @@ function useCheckboxContext() {
   return context;
 }
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
-  ({ asChild, forceMount, ...props }, ref) => {
+function Indicator({ ref, asChild, forceMount, ...props }: IndicatorProps & { ref?: React.Ref<IndicatorRef> }) {
     const { checked, disabled } = useCheckboxContext();
     const augmentedRef = useAugmentedRef({ ref });
 
@@ -105,7 +99,6 @@ const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(
       </Checkbox.Indicator>
     );
   }
-);
 
 Indicator.displayName = 'IndicatorWebCheckbox';
 
diff --git a/packages/collapsible/src/collapsible.tsx b/packages/collapsible/src/collapsible.tsx
index 12e10f95..4647a59e 100644
--- a/packages/collapsible/src/collapsible.tsx
+++ b/packages/collapsible/src/collapsible.tsx
@@ -14,18 +14,12 @@ 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
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
@@ -47,7 +41,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </CollapsibleContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeCollapsible';
 
@@ -61,8 +54,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) {
@@ -88,12 +80,10 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 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) {
@@ -113,7 +103,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeCollapsible';
 
diff --git a/packages/collapsible/src/collapsible.web.tsx b/packages/collapsible/src/collapsible.web.tsx
index c7957c10..0da5a109 100644
--- a/packages/collapsible/src/collapsible.web.tsx
+++ b/packages/collapsible/src/collapsible.web.tsx
@@ -19,18 +19,12 @@ 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
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open = false, onOpenChange] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen,
@@ -76,7 +70,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </CollapsibleContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebCollapsible';
 
@@ -90,8 +83,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 } = useCollapsibleContext();
     const augmentedRef = useAugmentedRef({ ref });
 
@@ -133,12 +125,10 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Collapsible.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebCollapsible';
 
-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 { open } = useCollapsibleContext();
 
@@ -156,7 +146,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </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..fd0cf57b 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,11 @@ 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
-  ) => {
+      ...props }: TriggerProps & { ref?: React.Ref<TriggerRef> }) {
     const { open, onOpenChange, relativeTo, setPressPosition } = useRootContext();
     const augmentedRef = useAugmentedRef({
       ref,
@@ -186,7 +178,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeContextMenu';
 
@@ -213,8 +204,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 +225,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',
@@ -253,10 +239,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       insets,
       style,
       disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -318,15 +301,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 +330,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,20 +356,14 @@ type FormItemContext =
 
 const FormItemContext = React.createContext<FormItemContext | null>(null);
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
       onPress: onPressProp,
       closeOnPress = true,
       disabled = false,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { onOpenChange, setContentLayout, setPressPosition, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -422,7 +393,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemNativeContextMenu';
 
@@ -436,8 +406,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 +414,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupNativeContextMenu';
 
@@ -455,19 +423,13 @@ 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
-  ) => {
+      ...props }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onOpenChange, setContentLayout, setPressPosition } = useRootContext();
 
     const { value, onValueChange } = useFormItemContext() as BothFormItemContext;
@@ -500,7 +462,6 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemNativeContextMenu';
 
@@ -508,8 +469,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 +484,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 +500,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 +521,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </SubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubNativeContextMenu';
 
@@ -577,8 +532,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 +556,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 +571,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..0a5adb10 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,
@@ -158,10 +151,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       collisionBoundary,
       sticky,
       hideWhenDetached,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const itemRef = React.useRef<HTMLDivElement>(null);
 
     function close() {
@@ -199,7 +189,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </ContextMenuContentContext.Provider>
     );
   }
-);
 
 Content.displayName = 'ContentWebContextMenu';
 
@@ -213,8 +202,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 +233,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,
@@ -282,10 +266,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { close } = useContextMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -329,7 +310,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </ContextMenu.CheckboxItem>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemWebContextMenu';
 
@@ -338,8 +318,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 +328,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </ContextMenuRadioGroupContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupWebContextMenu';
 
@@ -363,19 +341,13 @@ 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
-  ) => {
+      ...props }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onValueChange } = useContextMenuRadioGroupContext();
     const { close } = useContextMenuContentContext();
 
@@ -416,12 +388,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 +399,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 +410,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </ContextMenu.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebContextMenu';
 
@@ -451,8 +418,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 +434,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </ContextMenuSubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubWebContextMenu';
 
@@ -482,8 +447,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 +462,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 +475,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..9dd27853 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..57c3c4c9 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,24 +100,17 @@ 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,
       onEscapeKeyDown,
       onInteractOutside,
       onPointerDownOutside,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Dialog.Content
@@ -137,12 +125,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 +161,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 +183,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..71d6f727 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',
@@ -218,10 +209,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       insets,
       style,
       disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -282,15 +270,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 +299,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,20 +325,14 @@ type FormItemContext =
 
 const FormItemContext = React.createContext<FormItemContext | null>(null);
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
       onPress: onPressProp,
       closeOnPress = true,
       disabled = false,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { onOpenChange, setContentLayout, setTriggerPosition, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -386,7 +362,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemNativeDropdownMenu';
 
@@ -400,8 +375,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 +383,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupNativeDropdownMenu';
 
@@ -419,19 +392,13 @@ 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
-  ) => {
+      ...props }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
 
     const { value, onValueChange } = useFormItemContext() as BothFormItemContext;
@@ -464,7 +431,6 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemNativeDropdownMenu';
 
@@ -472,8 +438,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 +453,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 +469,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 +490,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </SubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubNativeDropdownMenu';
 
@@ -541,8 +501,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 +525,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 +540,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..c1c75017 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,
@@ -158,10 +151,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       collisionBoundary,
       sticky,
       hideWhenDetached,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const itemRef = React.useRef<HTMLDivElement>(null);
 
     function close() {
@@ -201,7 +191,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </DropdownMenuContentContext.Provider>
     );
   }
-);
 
 Content.displayName = 'ContentWebDropdownMenu';
 
@@ -215,18 +204,12 @@ function useDropdownMenuContentContext() {
   return context;
 }
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    {
-      asChild,
+function Item({ ref, asChild,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { close } = useDropdownMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -264,36 +247,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,
@@ -301,10 +280,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { close } = useDropdownMenuContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -346,7 +322,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </DropdownMenu.CheckboxItem>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemWebDropdownMenu';
 
@@ -355,8 +330,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 +340,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </DropdownMenuRadioGroupContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupWebDropdownMenu';
 
@@ -380,19 +353,13 @@ 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
-  ) => {
+      ...props }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onValueChange } = useDropdownMenuRadioGroupContext();
     const { close } = useDropdownMenuContentContext();
 
@@ -433,12 +400,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 +411,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 +422,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </DropdownMenu.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebDropdownMenu';
 
@@ -468,8 +430,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 +446,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </DropdownMenuSubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubWebDropdownMenu';
 
@@ -499,8 +459,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 +474,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 +487,6 @@ const SubContent = React.forwardRef<SubContentRef, SubContentProps>(
       </DropdownMenu.Portal>
     );
   }
-);
 
 Content.displayName = 'ContentWebDropdownMenu';
 
diff --git a/packages/hooks/src/useAugmentedRef.tsx b/packages/hooks/src/useAugmentedRef.tsx
index 13a56699..94ee9261 100644
--- a/packages/hooks/src/useAugmentedRef.tsx
+++ b/packages/hooks/src/useAugmentedRef.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 interface AugmentRefProps<T> {
-  ref: React.Ref<T>;
+  ref: React.Ref<T> | undefined;
   methods?: Record<string, (...args: any[]) => any>;
   deps?: any[];
 }
diff --git a/packages/hover-card/src/hover-card.tsx b/packages/hover-card/src/hover-card.tsx
index 1915c629..e8c5d87e 100644
--- a/packages/hover-card/src/hover-card.tsx
+++ b/packages/hover-card/src/hover-card.tsx
@@ -35,17 +35,11 @@ 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
-  ) => {
+      ...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);
@@ -73,7 +67,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeHoverCard';
 
@@ -87,8 +80,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 +121,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeHoverCard';
 
@@ -156,8 +147,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 +168,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',
@@ -199,10 +185,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       insets,
       style,
       disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -264,7 +247,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..c0398eb8 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,
@@ -110,10 +105,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       collisionBoundary,
       sticky,
       hideWhenDetached,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.Pressable : Pressable;
     return (
       <HoverCard.Content
@@ -136,7 +128,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..eca16762 100644
--- a/packages/label/src/label.web.tsx
+++ b/packages/label/src/label.web.tsx
@@ -4,15 +4,14 @@ 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) => {
+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}>
@@ -20,7 +19,6 @@ const Text = React.forwardRef<TextRef, TextProps>(
       </Label.Root>
     );
   }
-);
 
 Text.displayName = 'TextWebLabel';
 
diff --git a/packages/menubar/src/menubar.tsx b/packages/menubar/src/menubar.tsx
index 5451007a..3baf7002 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',
@@ -226,10 +217,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       insets,
       style,
       disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       value,
       onValueChange,
@@ -292,15 +280,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 +309,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,20 +335,14 @@ type FormItemContext =
 
 const FormItemContext = React.createContext<FormItemContext | null>(null);
 
-const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
-  (
-    {
-      asChild,
+function CheckboxItem({ ref, asChild,
       checked,
       onCheckedChange,
       textValue,
       onPress: onPressProp,
       closeOnPress = true,
       disabled = false,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     const { onValueChange, setTriggerPosition, setContentLayout, nativeID } = useRootContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -396,7 +372,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemMenubar';
 
@@ -410,8 +385,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 +393,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </FormItemContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupMenubar';
 
@@ -429,19 +402,13 @@ 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
-  ) => {
+      ...props }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const {
       onValueChange: onRootValueChange,
       setTriggerPosition,
@@ -478,7 +445,6 @@ const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
       </RadioItemContext.Provider>
     );
   }
-);
 
 RadioItem.displayName = 'RadioItemMenubar';
 
@@ -486,8 +452,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 +467,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 +483,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 +504,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </SubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubMenubar';
 
@@ -555,8 +515,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 +539,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 +554,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..cc4e1dae 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,
@@ -162,10 +155,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       collisionBoundary,
       sticky,
       hideWhenDetached,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const itemRef = React.useRef<HTMLDivElement>(null);
 
     function close() {
@@ -206,7 +196,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </MenubarContentContext.Provider>
     );
   }
-);
 
 Content.displayName = 'ContentWebMenubar';
 
@@ -220,18 +209,12 @@ function useMenubarContentContext() {
   return context;
 }
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
-  (
-    {
-      asChild,
+function Item({ ref, asChild,
       textValue,
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { close } = useMenubarContentContext();
 
     function onKeyDown(ev: React.KeyboardEvent) {
@@ -269,36 +252,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,
@@ -306,10 +285,7 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       closeOnPress = true,
       onPress: onPressProp,
       onKeyDown: onKeyDownProp,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: CheckboxItemProps & { ref?: React.Ref<CheckboxItemRef> }) {
     function onKeyDown(ev: React.KeyboardEvent) {
       onKeyDownProp?.(ev);
       if (ev.key === 'Enter' || ev.key === ' ') {
@@ -349,7 +325,6 @@ const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
       </Menubar.CheckboxItem>
     );
   }
-);
 
 CheckboxItem.displayName = 'CheckboxItemWebMenubar';
 
@@ -358,8 +333,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 +343,6 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(
       </MenubarRadioGroupContext.Provider>
     );
   }
-);
 
 RadioGroup.displayName = 'RadioGroupWebMenubar';
 
@@ -383,19 +356,13 @@ 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
-  ) => {
+      ...props }: RadioItemProps & { ref?: React.Ref<RadioItemRef> }) {
     const { onValueChange } = useMenubarRadioGroupContext();
     const { close } = useMenubarContentContext();
 
@@ -436,12 +403,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 +414,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 +425,6 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(
       </Menubar.Separator>
     );
   }
-);
 
 Separator.displayName = 'SeparatorWebMenubar';
 
@@ -471,8 +433,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 +448,6 @@ const Sub = React.forwardRef<SubRef, SubProps>(
       </MenubarSubContext.Provider>
     );
   }
-);
 
 Sub.displayName = 'SubWebMenubar';
 
@@ -501,8 +461,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 +476,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 +489,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..8f3eb87d 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',
@@ -204,10 +197,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       insets,
       style,
       disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       value,
       onValueChange,
@@ -269,27 +259,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..1ef7feb2 100644
--- a/packages/navigation-menu/src/navigation-menu.web.tsx
+++ b/packages/navigation-menu/src/navigation-menu.web.tsx
@@ -26,20 +26,14 @@ import type {
 
 const NavigationMenuContext = React.createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  (
-    {
-      asChild,
+function Root({ ref, asChild,
       value,
       onValueChange,
       delayDuration,
       skipDelayDuration,
       dir,
       orientation,
-      ...viewProps
-    },
-    ref
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <NavigationMenuContext.Provider value={{ value, onValueChange, orientation }}>
@@ -56,7 +50,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </NavigationMenuContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebNavigationMenu';
 
@@ -70,7 +63,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 +80,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 +95,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ asChild, value, ...props },
       </NavigationMenu.Item>
     </ItemContext.Provider>
   );
-});
+}
 
 Item.displayName = 'ItemWebNavigationMenu';
 
@@ -116,11 +109,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 +138,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </NavigationMenu.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebNavigationMenu';
 
@@ -157,10 +145,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,
@@ -174,10 +159,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onPointerDownOutside,
       onFocusOutside,
       onInteractOutside,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <NavigationMenu.Content
@@ -191,12 +173,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 +205,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..61a24f3a 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',
@@ -189,10 +180,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       onOpenAutoFocus: _onOpenAutoFocus,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -254,12 +242,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 +268,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..c5785627 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',
@@ -127,10 +118,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onInteractOutside,
       onPointerDownOutside,
       onOpenAutoFocus,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Popover.Content
@@ -150,12 +138,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 +174,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..f9cf724f 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..a24c0b4d 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..53dc9fe2 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..e84b1f6d 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..7ebb2594 100644
--- a/packages/select/src/select.tsx
+++ b/packages/select/src/select.tsx
@@ -58,19 +58,13 @@ 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
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const [value, onValueChange] = useControllableState({
       prop: valueProp,
@@ -106,7 +100,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeSelect';
 
@@ -118,8 +111,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 +152,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 +163,7 @@ const Value = React.forwardRef<ValueRef, ValueProps>(({ asChild, placeholder, ..
       {value?.label ?? placeholder}
     </Component>
   );
-});
+}
 
 Value.displayName = 'ValueNativeSelect';
 
@@ -199,8 +190,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 +211,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',
@@ -243,10 +229,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       style,
       disablePositioningStyle,
       position: _position,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -308,7 +291,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       />
     );
   }
-);
 
 Content.displayName = 'ContentNativeSelect';
 
@@ -317,19 +299,13 @@ 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
-  ) => {
+      ...props }: ItemProps & { ref?: React.Ref<ItemRef> }) {
     const { onOpenChange, value, onValueChange, setTriggerPosition, setContentLayout } =
       useRootContext();
     function onPress(ev: GestureResponderEvent) {
@@ -363,7 +339,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemNativeSelect';
 
@@ -375,7 +350,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 +359,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 +375,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..4d0ccd3e 100644
--- a/packages/select/src/select.web.tsx
+++ b/packages/select/src/select.web.tsx
@@ -49,18 +49,12 @@ 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
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [value, onValueChange] = useControllableState({
       prop: valueProp,
       defaultProp: defaultValue,
@@ -99,7 +93,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </SelectContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebSelect';
 
@@ -111,8 +104,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 +133,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 +150,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 +161,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',
@@ -193,10 +177,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onEscapeKeyDown,
       onInteractOutside: _onInteractOutside,
       onPointerDownOutside,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Select.Content
@@ -214,7 +195,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Select.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebSelect';
 
@@ -223,8 +203,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 +214,6 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       </ItemContext.Provider>
     );
   }
-);
 
 Item.displayName = 'ItemWebSelect';
 
@@ -247,25 +225,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 +248,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 +281,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..4a46e67e 100644
--- a/packages/separator/src/separator.tsx
+++ b/packages/separator/src/separator.tsx
@@ -3,8 +3,7 @@ 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) => {
+function Root({ ref, asChild, decorative, orientation = 'horizontal', ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Component
@@ -15,7 +14,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       />
     );
   }
-);
 
 Root.displayName = 'RootSeparator';
 
diff --git a/packages/slider/src/slider.tsx b/packages/slider/src/slider.tsx
index e1e23309..949f3832 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,
@@ -26,10 +23,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       inverted: _inverted,
       step: _step,
       onValueChange: _onValueChange,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <RootContext.Provider value={{ value, disabled, min, max }}>
@@ -37,7 +31,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeSlider';
 
@@ -49,7 +42,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 +58,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..f6765c06 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..b7177462 100644
--- a/packages/slot/src/slot.tsx
+++ b/packages/slot/src/slot.tsx
@@ -14,91 +14,76 @@ import {
   type StyleProp,
 } from 'react-native';
 
-const Pressable = React.forwardRef<React.ElementRef<typeof RNPressable>, RNPressableProps>(
-  (props, forwardedRef) => {
-    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,
-    });
+function Pressable({ ref: forwardedRef, children, ...pressableSlotProps }: RNPressableProps & { ref?: React.Ref<React.ElementRef<typeof RNPressable>> }) {
+  if (!React.isValidElement(children)) {
+    console.log('Slot.Pressable - Invalid asChild element', children);
+    return null;
   }
-);
-
-Pressable.displayName = 'SlotPressable';
 
-const View = React.forwardRef<React.ElementRef<typeof RNView>, RNViewProps>(
-  (props, forwardedRef) => {
-    const { children, ...viewSlotProps } = props;
+  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.View - Invalid asChild element', children);
-      return null;
-    }
+Pressable.displayName = 'SlotPressable';
 
-    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,
-    });
+function View({ ref: forwardedRef, children, ...viewSlotProps }: RNViewProps & { ref?: React.Ref<React.ElementRef<typeof RNView>> }) {
+  if (!React.isValidElement(children)) {
+    console.log('Slot.View - Invalid asChild element', children);
+    return null;
   }
-);
-
-View.displayName = 'SlotView';
 
-const Text = React.forwardRef<React.ElementRef<typeof RNText>, RNTextProps>(
-  (props, forwardedRef) => {
-    const { children, ...textSlotProps } = 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.Text - Invalid asChild element', children);
-      return null;
-    }
+View.displayName = 'SlotView';
 
-    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,
-    });
+function Text({ ref: forwardedRef, children, ...textSlotProps }: RNTextProps & { ref?: React.Ref<React.ElementRef<typeof RNText>> }) {
+  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';
 
 type ImageSlotProps = RNImageProps & {
   children?: React.ReactNode;
+  ref?: React.Ref<React.ElementRef<typeof RNImage>>;
 };
 
-const Image = React.forwardRef<React.ElementRef<typeof RNImage>, ImageSlotProps>(
-  (props, forwardedRef) => {
-    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,
-    });
+function Image({ ref: forwardedRef, children, ...imageSlotProps }: ImageSlotProps) {
+  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..c9073ae7 100644
--- a/packages/switch/src/switch.tsx
+++ b/packages/switch/src/switch.tsx
@@ -3,19 +3,16 @@ 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 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);
@@ -40,14 +37,13 @@ const Root = React.forwardRef<RootRef, RootProps>(
       />
     );
   }
-);
 
 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..c2f73d8d 100644
--- a/packages/switch/src/switch.web.tsx
+++ b/packages/switch/src/switch.web.tsx
@@ -4,19 +4,16 @@ 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 Root({
+  ref,
+  asChild,
+  checked,
+  onCheckedChange,
+  disabled,
+  onPress: onPressProp,
+  onKeyDown: onKeyDownProp,
+  ...props
+}: RootProps & { ref?: React.Ref<RootRef> }) {
     function onPress(ev: GestureResponderEvent) {
       onCheckedChange(!checked);
       onPressProp?.(ev);
@@ -43,18 +40,17 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </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..bd7f5af9 100644
--- a/packages/table/src/table.tsx
+++ b/packages/table/src/table.tsx
@@ -11,64 +11,71 @@ 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..3525fed2 100644
--- a/packages/tabs/src/tabs.tsx
+++ b/packages/tabs/src/tabs.tsx
@@ -18,19 +18,13 @@ 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
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const nativeID = React.useId();
     const Component = asChild ? Slot.View : View;
     return (
@@ -45,7 +39,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </TabsContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeTabs';
 
@@ -57,17 +50,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 +88,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </TriggerContext.Provider>
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeTabs';
 
@@ -110,8 +101,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 +121,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..6c024ee8 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..8d0aadfe 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..4df8ab09 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,
@@ -18,10 +15,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       orientation: _orientation,
       dir: _dir,
       loop: _loop,
-      ...viewProps
-    },
-    ref
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ToggleGroupContext.Provider
@@ -38,7 +32,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ToggleGroupContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootToggleGroup';
 
@@ -54,11 +47,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 +88,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..81dde2a7 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,
@@ -19,10 +16,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
       orientation,
       dir,
       loop,
-      ...viewProps
-    },
-    ref
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <ToggleGroupContext.Provider
@@ -51,7 +45,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </ToggleGroupContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootToggleGroup';
 
@@ -67,11 +60,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 +88,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..aa128ff0 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;
@@ -29,7 +28,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       />
     );
   }
-);
 
 Root.displayName = 'RootNativeToggle';
 
diff --git a/packages/toggle/src/toggle.web.tsx b/packages/toggle/src/toggle.web.tsx
index 046d064a..3a00ec7b 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);
@@ -18,7 +17,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </Toggle.Root>
     );
   }
-);
 
 Root.displayName = 'RootWebToggle';
 
diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
index f572bcf5..d8365789 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,28 @@ 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} />;
-});
+}
+
+Button.displayName = 'ButtonNativeToolbar';
 
 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..ee99548e 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,12 @@ 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
-  ) => {
+      ...props }: ToggleItemProps & { ref?: React.Ref<ToggleItemRef> }) {
     const { type, disabled, value, onValueChange } = useToggleGroupContext();
 
     function onPress(ev: GestureResponderEvent) {
@@ -105,37 +95,36 @@ 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>
   );
-});
+}
+
+Button.displayName = 'ButtonWebToolbar';
 
 export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };
diff --git a/packages/tooltip/src/tooltip.tsx b/packages/tooltip/src/tooltip.tsx
index c285d400..c75b8a4d 100644
--- a/packages/tooltip/src/tooltip.tsx
+++ b/packages/tooltip/src/tooltip.tsx
@@ -34,18 +34,12 @@ 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
-  ) => {
+      ...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);
@@ -73,7 +67,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootNativeTooltip';
 
@@ -85,8 +78,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 +119,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       />
     );
   }
-);
 
 Trigger.displayName = 'TriggerNativeTooltip';
 
@@ -154,8 +145,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 +166,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',
@@ -197,10 +183,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       insets,
       style,
       disablePositioningStyle,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const {
       open,
       onOpenChange,
@@ -262,7 +245,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..4de0342c 100644
--- a/packages/tooltip/src/tooltip.web.tsx
+++ b/packages/tooltip/src/tooltip.web.tsx
@@ -20,18 +20,12 @@ 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
-  ) => {
+      ...viewProps }: RootProps & { ref?: React.Ref<RootRef> }) {
     const [open, setOpen] = React.useState(false);
 
     function onOpenChange(value: boolean) {
@@ -59,7 +53,6 @@ const Root = React.forwardRef<RootRef, RootProps>(
       </RootContext.Provider>
     );
   }
-);
 
 Root.displayName = 'RootWebTooltip';
 
@@ -71,8 +64,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 +105,6 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(
       </Tooltip.Trigger>
     );
   }
-);
 
 Trigger.displayName = 'TriggerWebTooltip';
 
@@ -121,19 +112,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',
@@ -148,10 +134,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       onPointerDownOutside,
       sticky,
       hideWhenDetached,
-      ...props
-    },
-    ref
-  ) => {
+      ...props }: ContentProps & { ref?: React.Ref<ContentRef> }) {
     const Component = asChild ? Slot.View : View;
     return (
       <Tooltip.Content
@@ -170,7 +153,6 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
       </Tooltip.Content>
     );
   }
-);
 
 Content.displayName = 'ContentWebTooltip';
 
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 40f26e23..b81fe4ab 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -7,8 +7,11 @@ type ViewRef = React.ElementRef<typeof View>;
 type PressableRef = React.ElementRef<typeof Pressable>;
 type TextRef = React.ElementRef<typeof Text>;
 
-type SlottableViewProps = ComponentPropsWithAsChild<typeof View>;
+type SlottableViewProps = ComponentPropsWithAsChild<typeof View> & {
+  ref?: React.Ref<ViewRef>;
+};
 type SlottablePressableProps = ComponentPropsWithAsChild<typeof Pressable> & {
+  ref?: React.Ref<PressableRef>;
   /**
    * Platform: WEB ONLY
    */
@@ -18,7 +21,9 @@ type SlottablePressableProps = ComponentPropsWithAsChild<typeof Pressable> & {
    */
   onKeyUp?: (ev: React.KeyboardEvent) => void;
 };
-type SlottableTextProps = ComponentPropsWithAsChild<typeof Text>;
+type SlottableTextProps = ComponentPropsWithAsChild<typeof Text> & {
+  ref?: React.Ref<TextRef>;
+};
 
 interface Insets {
   top?: number;