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

Aberta
  • Algo errado?
#343 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 12 dias

@emmanuelchucks já está trabalhando nisso.

Desde 24/5/2026.

  • #344 de @emmanuelchucks — aberto

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
25/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
react-native, typescript
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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>>
Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
17d 22h
PRs com merge (30d)
3

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.