How to publish as reusable component library?

[lancejnextiva]

I've been looking to build a new reusable component library for work that will work across web + react native and this library looks like a great fit. Really impressive how much has already been built, so I appreciate it being shared as open source.

What Im wondering is: is there any guidance for repackaging this library so it can be reused across multiple apps and across repos that might not be part of a monorepo? At this point I've tried a variety of approaches but none of them have worked.

Originally I had assumed it would be as simple as repurposing the reusables directory in this monorepo to be the source of all components, so I just ran pnpm i @rnr/reusables in the starter-base directory and updated all of the component imports to come from @rnr/reusables. But immediately I was getting module resolution errors, so I went back to the reusables package.json file and added a main field, which Expo seemed happy to resolve. I also made sure to add the reusable directory to the tailwind.config.js content field so that tailwind/nativewind would know to apply the styles. I also found that I needed to update the metro config for everything to resolve, so I took this config from create-t3-turbo and it seemed to work fine.

However, after doing all of this the styles in the starter-base app were very broken on android builds (and potentially ios, but I didn't check). The original Rick card UI seemed to work fine, but if I tried to add in the alert-dialog showcase then it wouldn't work at all. Like, the dialog overlay wouldn't visibly display and the dialog content wouldn't either, but the alertdialog trigger was definitely working. Console logging the open state of the AlertDialog internals showed it would properly toggle when trying to launch the dialog, but none of the styles seemed to be working as expected.

I've tried a similar approach by using a brand new directory in the packages workspace of the monorepo and then installing all of the components through the recent CLI, but I found myself running into the same problems.

Im not entirely sure how to go about debugging this either, since pnpm web works fine in the starter-base after these changes but android seems pretty broken.

Are there any examples of how to use react-native-reusables as the basis for a consumable component library? Im hoping this is all just skill issues on my end, and Im overlooking some easy process to actually build a component library on top of RNR. Any help is appreciated!

[mrzachnugent]

Hey @lancejnextiva,

If this is something for your work, I offer consulting.

A couple of things from your question:

• Running pnpm i @rnr/reusables in the starter-base only works in this monorepo. @rnr/reusables is not a package on npm. If you were to clone this repo, I would stick with the showcase app as it is already set up.
• For "can be reused across multiple apps and across repos that might not be part of a monorepo", if your goal is not to have a monorepo, then I would not suggest the point above as it only works in a monorepo.
• You can publish them privately on npm or use module federation (both of which I have little to no experience).
• I started looking into publishing just the primitives on npm but I ran into some errors with NativeWind styling so I put that project on pause. Which is why I would most likely suggest using a monorepo for your work unless you have a good reason not to do so.
• There is now a CLI tool that could help you get started with a new project.
• For "how to use react-native-reusables as the basis for a consumable component library", it depends what you mean. The starter-base is an example that does that. Instead of having the library be in a node_modules folder, it's in your components folder.
• If you want to start a new project with starter-base, here are the instructions

[lancejnextiva]

@mrzachnugent

If this is something for your work, I offer consulting.

I'll see if I can squeeze any money out of work, but we've recently gone through some layoffs and I've been unable to secure funding for the OSS we already rely on so I wouldn't hold your breath 😬 I may wind up having to dig into my own pockets to try and sponsor this project if we are able to figure out a way for people to build publishable libraries atop RNR.

Either way, if we do wind up devising a way for devs to package and publish their own component libraries based on RNR I would be more than happy to contribute docs or anything else necessary upstream to this repo.

• There is now a CLI tool that could help you get started with a new project.
• For "how to use react-native-reusables as the basis for a consumable component library", it depends what you mean. The starter-base is an example that does that. Instead of having the library be in a node_modules folder, it's in your components folder.
• If you want to start a new project with starter-base, here are the instructions

To clarify what I meant here: I want to create a component library that can be published to a registry as an npm package. The component library would just be a thin wrapper around RNR with some changes to theme colors and maybe some additional components.

By making a publishable npm package, teams working in other repos can install the package and use the components without needing to do any customization of their own. It also gives consuming apps an easy upgrade workflow any time we want to make "shared" changes in the component library that should impact all of the different consuming apps. For example, if I want to update a color in the theme or add a new component, I want to make that change in one place (the consumable npm package) rather than having to go through multiple repos and manually change the color.

For that reason, copy-pasting the components (or using the CLI to install them) isn't really viable. Instead, organizing everything into an npm package makes the upgrade process easy -- I can simply make a change in the component library package and bump the package.json version, then tell consuming teams to run pnpm i my-component-lib@latest.

I suspect that there are a lot of other teams out there that have similar needs, so Im hoping that we can figure out a path forward and then document it for everyone else.

• Running pnpm i @rnr/reusables in the starter-base only works in this monorepo. @rnr/reusables is not a package on npm. If you were to clone this repo, I would stick with the showcase app as it is already set up.

Just to be clear, I'm aware it's not a publishable library. I was just using it via pnpm i in the starter-base so that I could test out importing the components from outside the consuming app (as a workspace dependency, and then later as an npm package), since the current examples all rely on the components living within the consuming app. Unfortunately, I didn't manage to get very far.

• You can publish them privately on npm or use module federation (both of which I have little to no experience).
• I started looking into publishing just the primitives on npm but I ran into some errors with NativeWind styling so I put that project on pause. Which is why I would most likely suggest using a monorepo for your work unless you have a good reason not to do so.

Publishing privately to npm is the goal here, but I haven't figured out how to actually make that work since the styles seem broken even after trying everything I mentioned in the OP. Specifically, things like the AlertDialog no longer pop up properly on mobile although I was able to get everything working when using expo web while importing the components from @rnr/reusables as a workspace-dependency in the same monorepo.

Regarding your nativewind issue, did you already try ensuring tailwind was configured to scan the package directory within the consuming application? You can see an example of this in their docs https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries

[mrzachnugent]

Unfortunately without a reproduction repo, I could not tell you why you are having this issue.

[LanceALaughlin]

@lancejnextiva Did you ever figure out a solution for this? I've been trying to do the same and have been hitting a wall. I'm able to the components into the consuming app but there are no styles present. @mrzachnugent, I am just putting in another request for any guide on how to accomplish this. I saw someone else asking about this in the NativeWind Discord so I think there is a desire to use RNR as a base for building published component libraries.

Appreciate all of the work you've done with this project! Any insight you might have (even pointing to a place in a repo) where these components have been bundled into an npm package would be tremendously helpful