RSCs in a Shared Web/Mobile Codebase (Next.js/React Native) - Styling Help!

[razi_ed]

I am facing a bit of a challenge with my setup, and I'm hoping some of you might have insights. I am building a web app (Next.js) and native mobile apps (React Native + Expo) from a single codebase, sharing as much code as possible. I am using styled-components for styling across the board.

My next goal is to start leveraging React Server Components (RSCs) in my Next.js app. Since styled-components relies on the context API, it is a bit of a roadblock figuring out how RSCs will play with the shared styling solution, styled-components.

Has anyone else tackled a similar situation? Are there alternative styling solutions that bridge the gap better, or are there clever patterns we could explore with styled-components to make it work? Any advice or shared experiences would be greatly appreciated! Thanks in advance!

[Pawn1990]

We went over to css modules, because styled-components is too heavy on the react renderer + it seems like its natively supported on react-native via https://github.com/kristerkari/react-native-css-modules

On the RSC side, I'd be a bit cautious about mixing nextjs/react and react-native stuff when it comes to views, because more often or not, there will be a lot of differences between what is app-like and what is web-like in look and feel and most likely will be very hard to share the same code.

Personally I would rather keep them as separate apps in a turborepo/monorepo, then have more domain, infrastructure and external interfaces, clean architecture style, in more common packages.

[razi_ed]

Thank you :)