Sharing styled-components theme and components between React DOM and React Native: what is the safe boundary?
21.5K reputation · 15 Apr 2020, 12:21 UTC
We have a React web app using styled-components and are adding a React Native app using styled-components/native. Both should consume the same design tokens (colors, spacing, typography) through ThemeProvider, and ideally some presentational components would be shared rather than rewritten per platform.
The uncertainty is where the interoperability line actually sits. The web target emits real CSS rules, so pseudo-selectors, media queries, and descendant selectors work there; the native target maps declarations to style objects, so those features presumably cannot carry over. It is also unclear whether helpers like the css utility, attrs, keyframes, and the as prop behave identically across both targets on the same major version, and whether sharing a single component file is realistic or whether only the theme shape and pure helper functions should be shared, with platform-specific styled wrappers behind separate entry points.
Assume a recent major version of styled-components for both targets, with SSR on the web side.
- Which parts of the styled-components API are documented to work on both targets, and which are web-only?
- Is sharing raw theme objects and token modules between the two targets the recommended boundary, or is full component sharing supported?
- Are there version-specific differences (stylis processing, transient props, SSR APIs) that change this answer?
0 answers
A thoughtful contribution can make all the difference. Be the first to share one.
0 question comments
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.