Has anyone successfully created a cross-platform package for React Native and React that serves as a Design System using RollupJS and styled-components?
I know it’s possible to build and style components using stylexjs, which is newer than styled-components. I’ve tested it and managed to compile npm packages that work with both React and React Native, styling them with stylexjs.
However, I haven’t found good examples of creating a cross-platform package using styled-components and React Native that works seamlessly on all platforms. Over the months, I’ve experimented with compiling a package using Rollup for my Design System built in Storybook with React and React Native Web. The advice to include styled-components as an external dependency doesn’t seem to work well, as it often causes crashes when importing.
I ended up using submodules for that particular Design System because it’s large, but I’d prefer to package it into an npm module without rewriting all the styles in stylexjs.
Could anyone provide examples of:
- A Storybook project that renders to web using React Native and styled-components/native.
- A Rollup configuration file that works for such a setup.
- How Webpack could be used to create a cross-platform package.
Unfortunately, I don’t have examples of the errors I encountered since I’ve tried various approaches with Rollup over the past few months and didn’t keep track of them. Any examples of cross-platform repositories set up for npm package publication would be greatly appreciated.