[ BUG ] cli installing incorrect primitives

[gcoe95]

Describe the bug

When using rnr on web, most of the components behave incorrectly or not at all. I think this is because the primitives installed by the cli are not compatible with my rnr. For my testing, I've copied the components directly from the examples in the docs.

Taking the alert-dialog for example, when I use the manually installed primitive from a few months back, it works as expected and I end up with the following files;

• alert-dialog/
  • src/
    • alert-dialog.tsx
    • alert-dialog.web.tsx
    • index.ts
    • types.ts
  • index.ts

On the other hand, if I used the @rn-primitives installed by the cli, I get a completely different set of files;

If I change the main tooltip component import to use this, it renders incorrectly at the bottom of the page and I have to zoom out to see it...

Other issues I've encountered include

• Tooltip not showing when hovering with the mouse. Only on click
• Dropdown not opening
• Select not opening

I might be wrong about the whole primitive thing but thats where I'd put my money. I originally thought that the portal might be working correctly but I did a quick test and it seems to be okay. This has been driving me crazy for days now. :-(

To Reproduce Not really sure... Might just be a me problem. I'm using solito, but I don't think that should make a difference.

Platform (please complete the following information):

• Type: Browser
• OS: Mac OS
• Browser: Chrome

[mrzachnugent]

Hey @gcoe95, there is currently an issue where the primitives do not work with nextjs (web for solito).

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

[mrzachnugent]

https://github.com/roninoss/rn-primitives/issues/17

[gcoe95]

Thanks @mrzachnugent. I'll keep an eye on the rn-primitives issue above for updates.

Creating my own trigger ref has helped with a lot of my issues. Also, wrapping some of the unstylable components with one that still works with className has help me get some basic styling working, albeit a bit hacky.