feat: migrate from React.forwardRef to React 19 ref-as-prop pattern

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 };

apps/expo-nativewind/app/(components)/navigation-menu.tsx

@@ -175,6 +175,6 @@ const ListItem = React.forwardRef<
         </Text>
       </NavigationMenuLink>
     </View>
-  );
-});
+  }
+
 ListItem.displayName = 'ListItem';

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;
 

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 = ({

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 };

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 };

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<

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>) => (

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<

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 };

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';
 

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<

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 {

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 };

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 };

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 };

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<

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({