Open a-eid opened 2 months ago
same here (nextjs)
@a-eid Which styles are not applied correctly?
hi @mrzachnugent,
as already written in the discord, packages like select or dropdown-menu do not seem to translate the classNames. In your showcase it looks fine, but in a monorepo (or standalone project) with nextjs it doesn't work.
e.g. select in your showcase (https://rnr-showcase.vercel.app/select):
<button dir="ltr" aria-autocomplete="none" aria-controls="radix-:r5:" aria-expanded="false" role="button" tabindex="0" class="css-175oi2r r-1loqt21 r-1otgn73 flex flex-row h-10 native:h-12 items-center text-sm justify-between rounded-md border border-input bg-background px-3 py-2 web:ring-offset-background text-muted-foreground web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1 w-[250px]" type="button" data-state="closed">
...
</button>
in my nextjs example (https://github.com/megacherry/nextjs-rnr):
<button dir="ltr" aria-autocomplete="none" aria-controls="radix-:R2km:" aria-expanded="false" role="button" tabindex="0" class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73" type="button" data-state="closed">
...
</button>
As you can see, the classNames are not taken over by tailwind, although they are defined in the select component.
Thanks for taking the time to watch.
@a-eid Which styles are not applied correctly?
<SelectPrimitive.Overlay style={[StyleSheet.absoluteFill, {backgroundColor: "#00000050"}]} >
@a-eid Which styles are not applied correctly?
<SelectPrimitive.Overlay style={[StyleSheet.absoluteFill, {backgroundColor: "#00000050"}]} >
The Select component was updated to version 1.0.4
which fixes this issue
@mrzachnugent perfect, thank you. will be testing it later today.
This is a Nextjs/webpack issue, it works in an expo project with react-native-web.
It seems that the classNames are not being added to react-native-web components from the /node_modules
which seems like a bundler issue.
For example, a primitive with this testing style attribute will work:
<DropdownMenuPrimitive.Trigger style={{ $$css: true, test: "bg-blue-500" }} >{/* ... */}</DropdownMenuPrimitive.Trigger>
Whereas using className="bg-blue-500"
will not work.
Currently investigating.
@mrzachnugent
I am experiencing the same issue but for expo (no nextjs, no expo web, native only) in a mono repo. Components such as Button, Badge and Text are working fine. Dropdown & Select are not working. Portal (root layout) was added, nativewind is working.
Tried your starter, it works there. I tried finding the issue but I can't seem to find it.
The button with the text "Open" is the drop down.
@mrzachnugent
I am experiencing the same issue but for expo (no nextjs, no expo web, native only) in a mono repo. Components such as Button, Badge and Text are working fine. Dropdown & Select are not working. Portal (root layout) was added, nativewind is working.
Tried your starter, it works there. I tried finding the issue but I can't seem to find it.
The button with the text "Open" is the drop down.
This probably won't help the nextjs users that are experiencing issues, but it might help users that are using the library in a mono repo setup. In my case I had to add the following to metro config: config.resolver.disableHierarchicalLookup = true;
Issue link: https://github.com/nativewind/nativewind/issues/734
This is a Nextjs/webpack issue, it works in an expo project with react-native-web.
It seems that the classNames are not being added to react-native-web components from the
/node_modules
which seems like a bundler issue.For example, a primitive with this testing style attribute will work:
<DropdownMenuPrimitive.Trigger style={{ $$css: true, test: "bg-blue-500" }} >{/* ... */}</DropdownMenuPrimitive.Trigger>
Whereas using
className="bg-blue-500"
will not work.Currently investigating.
@mrzachnugent: Do you know a workaround for this?
This is a Nextjs/webpack issue, it works in an expo project with react-native-web.
It seems that the classNames are not being added to react-native-web components from the
/node_modules
which seems like a bundler issue.For example, a primitive with this testing style attribute will work:
<DropdownMenuPrimitive.Trigger style={{ $$css: true, test: "bg-blue-500" }} >{/* ... */}</DropdownMenuPrimitive.Trigger>
Whereas using
className="bg-blue-500"
will not work.Currently investigating.
I have the same issue and writing as you said $$css: true, test: "bg-blue-500" works but className doesnt work. Did you find a solution ?
As a work around, you can copy the primitives into your ~/components/primitives. There's manual instructions on https://rnprimitives.com/
Then in your ~/components/ui files use the import from ~/components/primitives instead of @rn-primitives
The devs working on NativeWind have a lot of stuff going on so hopefully after the official release of v4, they'll be able to look into it.
it's open by default and some styles are not applied correctly. it works fine on android & ios however.