ClassNames do not work on Nextjs

[a-eid]

it's open by default and some styles are not applied correctly. it works fine on android & ios however.

[megacherry]

same here (nextjs)

[mrzachnugent]

@a-eid Which styles are not applied correctly?

[megacherry]

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 [&amp;>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]

@a-eid Which styles are not applied correctly?

<SelectPrimitive.Overlay style={[StyleSheet.absoluteFill, {backgroundColor: "#00000050"}]} >

[mrzachnugent]

@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

[a-eid]

@mrzachnugent perfect, thank you. will be testing it later today.

[mrzachnugent]

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.

[w7tf]

@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.

[w7tf]

@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: nativewind/nativewind#734

[megacherry]

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?

[qhoarau]

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 ?

[mrzachnugent]

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.

[mrzachnugent]

They do now! You can update your primitives to their latest versions to get it to work with nextjs.