Minor Changes

• Polymorphic as-target attribute autocompletion now works in editors. Typing <StyledComponent as="video" and then a partial attribute name surfaces that target's attributes (loop, muted, controls, poster, ...), including while the attribute name is still being typed. Plain usage keeps completing the component's own props, and forwardedAs targeting is unchanged. Runtime behavior is identical. (polymorphic-as-target-autocomplete.md)

Full Changelog: styled-components@7.0.0-prerelease-20260611043336...styled-components@7.0.0-prerelease-20260719013821

Patch Changes

• 537ea42: Reduce TypeScript type-checking cost for styled components, most noticeably styled(Component) wrappers and polymorphic as usage. Large codebases that saw elevated tsc memory and type-instantiation counts get lower type-check memory and time, with no change to the emitted types or runtime behavior.

Patch Changes

• 537ea42: Reduce TypeScript type-checking cost for styled components, most noticeably styled(Component) wrappers and polymorphic as usage. Large codebases that saw elevated tsc memory and type-instantiation counts get lower type-check memory and time, with no change to the emitted types or runtime behavior.

Full Changelog: [email protected]@6.4.4-prerelease-20260718230802

Patch Changes

• f692ec2: Fix a TypeScript error when wrapping a component whose props can't be statically read, such as Mantine v7's polymorphic-factory components (Button, Card, Menu.Item, and similar). These styled components no longer reject every prop, including children; arbitrary props are accepted again at the JSX call site and via .attrs(), while components with readable prop types stay fully type-checked.
• f692ec2: Keep TypeScript attribute autocomplete working while you type props on a polymorphic styled component. When a component renders a different element through as (for example as="video"), beginning to type a new prop name could make the whole suggestion list vanish; the rendered element's props now keep autocompleting as you go.

Major Changes

• React Native: isolation: isolate is supported on iOS, Android, and the web. Blended descendants (mix-blend-mode) composite against the isolated element's own group, matching across all three targets. Separately, when a filter on iOS uses effects the platform only renders at the experimental release level, development builds warn that the effect is invisible and that it suspends descendant mix-blend-mode compositing while mounted. (isolation-isolate-android-layer.md)
• react-native-web: CSS the browser implements natively reaches it untouched. This covers math functions with units (calc(), min(), max(), clamp(), round() and friends), viewport units (dvh / svh / lvh stay distinct), standalone translate / rotate / scale (3D values keep their Z component on the web), transform-style, transform-box, perspective, light-dark(), CSS system color keywords, wide-gamut color functions with theme values, hyphens, text-wrap, caret-color, accent-color, overscroll-behavior, scrollbar-width, field-sizing, interactivity, and direction. Native-only prop mappings and their platform-limitation warnings are scoped to the native targets and do not appear on the web. (rn-web-browser-native-passthrough.md)
• React Native: @supports conditions are evaluated as real feature queries. A condition like @supports (display: grid) answers based on what the current platform can actually render, not / and / or combinations follow the CSS grammar (invalid mixes are ignored as the spec requires), unknown future syntax such as selector(...) evaluates to false, and on the web the browser answers directly. Probing for an unsupported feature inside @supports is silent: the query is the supported way to ask, so it does not emit the development warning for that feature. (supports-real-feature-queries.md)
• React Native: z-index: auto resolves to the platform default stacking (the behavior CSS defines for auto) on iOS and Android, and passes through to the browser on the web. (z-index-auto-native.md)

Minor Changes

• Added CSS anchor positioning on React Native (core subset). Declare anchor-name: --save on any styled element and position absolutely-placed siblings against it in pure CSS: top: anchor(--save bottom); left: anchor(--save left); width: anchor-size(--save width);. Anchored elements track the anchor as it moves or resizes, fallback values apply when the anchor is missing, position-anchor supplies an implicit target, and the functions compose inside calc(). Supported subset: physical side keywords in top/left insets, with the anchor and positioned element sharing a parent; unsupported forms fall back with a development warning. On the web the browser handles the same declarations natively. (native-anchor-positioning.md)

• React Native: the CSS attr() function is supported. Styles can read the component's own props as typed CSS values: width: attr(data-size px, 48px) sizes from a data-size prop and uses the fallback when the prop is missing or invalid. Supported types include unit names (px, %, deg, ...), number, raw-string, and type() forms for lengths, numbers, percentages, and colors. attr() composes inside calc(), and fallbacks can themselves be dynamic values like light-dark(). (native-attr-function.md)

• React Native: the corner-shape property is supported. round renders iOS's circular corner curve and squircle (along with nearby superellipse() values) renders the Apple-smooth continuous curve. Contours React Native can't draw (bevel, notch, scoop, square, far-out superellipse values, and corners that mix shapes) drop with a development warning suggesting round or squircle. Android renders circular corners and warns that the curve only takes effect on iOS. On the web the value passes through to browsers that support it. (native-corner-shape.md)

  const Card = styled.View`
    border-radius: 16px;
    corner-shape: squircle;
  `;

• React Native: a display: grid layout subset is supported. A grid container written as display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; lays its direct styled children into equal columns, sizing each child to its share of the measured container width. Use grid-column: span 2 to make a child span multiple columns. (native-grid-subset.md)

  const Grid = styled.View`
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  `;
  const Wide = styled.View`
    grid-column: span 2;
  `;

  The supported subset is equal 1fr columns (repeat(N, 1fr) or a 1fr 1fr 1fr track list) plus gap / row-gap / column-gap and grid-column: span N on direct children. Anything outside it, including fixed-pixel tracks, minmax(), auto-fill / auto-fit, unequal fractions, and line-number or named-line placement, is ignored with a development warning that names a supported alternative, and the container falls back to a wrapping row. On the web the browser lays out the full grid as written.

  A grid container that also declares container-type is a container-query container at the same time: descendants can use @container rules and cq* units against its measured box.

• React Native: position: sticky is supported. Direct styled children of a styled ScrollView stick to the top edge and hold position exactly through flings and fast scrolling, with literal declarations and function interpolations alike. On the web the browser handles it. The current support matrix lives at https://styled-components.com/docs/compatibility. (native-position-sticky.md)

• React Native: the @property rule is supported. Custom properties can be registered with a typed syntax, an initial value, and an inheritance switch: an unset registered property resolves var() references to its typed initial value, and inherits: false registrations stop ancestor values from leaking into descendants. Invalid rules (missing descriptors, initial values that don't match the declared syntax) are ignored with a development warning, matching the spec. On the web, registrations forward to the browser's own CSS.registerProperty(). (native-property-rule.md)

• React Native: relative color syntax is supported for the rgb(), hsl(), hwb(), and color() forms, alongside oklch() / oklab() / lch() / lab(). A value like color: rgb(from ${theme.brand} r g b) resolves to a color React Native can display on iOS, Android, and react-native-web, whether the base is a literal color, another color function, or a resolved theme value. (native-relative-color-completion.md)

• React Native: CSS scroll-driven animations are supported. animation-timeline: scroll() binds any @keyframes animation's progress to the scroll position of the nearest styled ScrollView, enabling parallax, scroll progress bars, and reveal-on-scroll in plain CSS. Scrollers can declare named timelines with scroll-timeline: --name for descendants to reference, and animation-range limits an animation to a slice of the scroll distance (animation-range: entry 25% 75%, lengths and calc() included). Iteration counts and all four direction modes apply across the scroll range. The same declarations are supported on the web. (native-scroll-driven-animations.md)

• React Native: CSS scroll snap is supported on styled.ScrollView. Declare scroll-snap-type on the scroller and scroll-snap-align: start | center | end on its children, exactly like the web: the children become real snap positions (mixed sizes welcome), and scroll-snap-stop: always on a child keeps a fast fling from skipping past it. A settle guarantee makes mandatory literal on Android, where the platform engine can otherwise leave a caught scroller resting between snap points. (native-scroll-snap.md)

  Without aligned children, mandatory approximates with full-scrollport paging and a development warning; for manual control pass snapToInterval or snapToOffsets on the ScrollView and your props win. proximity applies fast deceleration only. On the web the browser handles all of these properties directly.

• React Native: styled scrollers (styled.ScrollView, styled.FlatList, and friends) nest like the web. A vertical scroller inside another vertical scrollable receives gestures on Android without passing nestedScrollEnabled yourself; iOS and the web behave this way too. Passing the prop explicitly still wins. ([native-scroller-ergonomics.md](https://github.com/st...

Patch Changes

• Fixed a rules-of-hooks violation that could crash components triggering an immediate re-render with unchanged style props. (hooks-cache-hit-debug-value.md)

Full Changelog: styled-components@7.0.0-prerelease-20260530064039...styled-components@7.0.0-prerelease-20260610071139

Patch Changes

• f692ec2: Fix a TypeScript error when wrapping a component whose props can't be statically read, such as Mantine v7's polymorphic-factory components (Button, Card, Menu.Item, and similar). These styled components no longer reject every prop, including children; arbitrary props are accepted again at the JSX call site and via .attrs(), while components with readable prop types stay fully type-checked.
• f692ec2: Keep TypeScript attribute autocomplete working while you type props on a polymorphic styled component. When a component renders a different element through as (for example as="video"), beginning to type a new prop name could make the whole suggestion list vanish; the rendered element's props now keep autocompleting as you go.

Full Changelog: [email protected]@6.4.3-prerelease-20260602021501

Patch Changes

• In React Native apps (both native and react-native-web), animating a multi-argument transform shorthand (translate(x, y), translate3d(x, y, z), or scale(x, y)) inside @keyframes or a transition no longer throws "Transform with key of translate must have an array as the value". These forms now animate correctly per axis. Single-axis forms and uniform scale(n) were already fine. (native-animated-translate-shorthand.md)

Full Changelog: styled-components@7.0.0-prerelease-20260526020504...styled-components@7.0.0-prerelease-20260530064039

Patch Changes

• On React Native (Expo and other Metro projects), importing from styled-components/native could pull React Native Web into your iOS and Android bundles, bloating them and breaking styling on device. The correct build is now selected automatically for each platform, so React Native Web stays out of native bundles and no custom Metro resolver workaround is needed. (native-metro-platform-resolution.md)

Full Changelog: styled-components@7.0.0-prerelease-20260524213421...styled-components@7.0.0-prerelease-20260526020504

Patch Changes

• Fix native Node.js ESM default imports so import styled from 'styled-components' exposes the styled factory directly. (fresh-node-default-import.md)

Full Changelog: styled-components@7.0.0-prerelease-20260519035351...styled-components@7.0.0-prerelease-20260524213421