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: https://github.com/nativewind/nativewind/issues/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.

[francois-pasquier]

Sorry for bumping this closed issue but how are you guys using rn reusables with basic block like https://github.com/mrzachnugent/react-native-reusables/blob/main/packages/reusables/src/components/ui/text.tsx using createContext?

Sure, we could remove this but most of the components are using contexts so we need to add "use client"

[mrzachnugent]

@francois-pasquier, on the web text class names cascade so if you're project is only a Nextjs you don't need the TextClassContext.

Otherwise, you will need to use "use client"; in all the components that want to pass a className through the TextClassContext. All of the @rn-primitives/* packages have the "use client"; directive so if you are using react-native-reuables, it mostly just adds class names to those primitives. This means that adding another "use client"; doesn't really change the rendering method in Nextjs.

Alternatively, there's probably a way to make only native use createContext. For example, you can have a custom component like text-class-provider.web.tsx and text-class-provider.tsx where the web version returns a fragment. Then, text.web.tsx and a text.tsx where the web version doesn't use context. All react-native-web components use "use client"; including the Text so your custom text.web.tsx would need to use html elements. And you would have to manually map the props, you couldn't use SlottableTextProps like in your link example.