styled-components 7.0 Alpha: CSS Custom Properties on React Native, New Parser, Native Animations
The v7 alpha rewrites the CSS parser, brings CSS custom properties and media queries to React Native, and adds a built-in animation adapter. No Reanimated required.
styled-components 7.0 is now in alpha, with prereleases shipping weekly, and the scope is bigger than any release since v5. The team has replaced the underlying CSS parser, dropping the stylis dependency that has been the source of :is() and :where() recursion bugs for years, with an in-house implementation that handles modern at-rules correctly.
The biggest changes are on React Native. CSS custom properties now work natively: declare --brand: tomato on any styled component and descendants can read it via var(--brand), with full spec behavior for fallbacks, nesting, and cycle detection. @media and @container queries work on native. Viewport units (vh, vw, dvh, svh, lvh) and container query units (cqh, cqw) are supported. Modern color spaces and relative color syntax work across platforms.
Animations get a built-in adapter powered by React Native's Animated API. transition, @keyframes, and @starting-style run with zero configuration. An optional Reanimated adapter is available for teams that need it. !important now works on React Native, beating runtime style={{}} props. Selectors that were web-only, like attribute selectors, :nth-child(an+b of S), and tree-structural pseudo-classes, now work on native styled components.
The prerelease is iterating fast; the latest tag is from June 11. The team is actively seeking sponsorship to sustain the work. Install with npm install styled-components@test if you want to kick the tires. React v19 and React Native v0.85+ are required.