Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

TypeScript hangs when styled() wraps components with complex ref props

Offen
  • Stimmt etwas nicht?
#343 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

@emmanuelchucks arbeitet bereits daran.

Seit 24.5.2026.

  • #344 von @emmanuelchucks — offen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
25/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Veraltet
Tech-Stack
react-native, typescript
Bereich
frontend

Rechercherichtung

Start from the StyledConfiguration type, which applies DotNotation to ComponentProps<C>, and check how the recursion reaches the ref prop. Run npm run typecheck in the linked repro repository to confirm the hang. Pull request #344 already proposes using PropsWithoutRef for style-target inference, so review it first. Done means the repro typechecks quickly while ref stays on the styled component's props.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

auto-triaged bug confirmed deferred (post-5.0)
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

styled() can cause TypeScript to hang when wrapping components whose props include complex ref types, such as react-strict-dom elements.

Minimal example:

import { html } from "react-strict-dom";
import { styled } from "react-native-css";

export const StyledDiv = styled(html.div, { className: "style" });

export const element = <StyledDiv className="p-4" />;
What I found

The issue appears to come from StyledConfiguration computing dot-notation style targets from:

DotNotation<ComponentProps<C>>

For html.div, ComponentProps<C> includes:

ref?: React.Ref<HTMLDivElement>

DotNotation then recursively walks into the ref type, then into HTMLDivElement, which expands into a large recursive DOM type graph.

I verified locally that:

  • ComponentProps<typeof html.div> typechecks quickly.
  • DotNotation<Pick<Props, "style">> typechecks quickly.
  • DotNotation<Pick<Props, "ref">> hangs.
  • styled(html.div, { className: "style" }) hangs before the fix.
Library version

3.0.7

Environment info
Node: 24.13.0
TypeScript: 5.9.2
react-native-css: 3.0.7
react-strict-dom: 0.0.55
react: 19.1.0
react-native: 0.81.4
Steps to reproduce
  1. Clone the repro repository.
  2. Install dependencies.
  3. Run npm run typecheck.
Reproducible example repository

https://github.com/emmanuelchucks/react-native-css-styled-rsd-ref-repro

Possible fix

Using PropsWithoutRef<ComponentProps<C>> for style-mapping target inference avoids walking ref, while still preserving ref on the returned styled component props.

Conceptually:

DotNotation<PropsWithoutRef<ComponentProps<C>>>

instead of:

DotNotation<ComponentProps<C>>
Vorherrschende Sprache
TypeScript
Sterne
166
Forks
45
Ø Merge
13 T. 14 Std.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus nativewind/react-native-css

Alle Issues in nativewind/react-native-css

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.