Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

`styled()` crashes with `Maximum call stack size exceeded` when wrapping `react-native-svg` primitives

Aperta
  • Qualcosa non va?
#455 5 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

@marklawlor ci sta già lavorando.

Dal 15/7/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

needs reproduction v5 stability

Describe the bug

In [email protected], the documented v5 third-party-component recipe for react-native-svg throws on first render:

RangeError: Maximum call stack size exceeded (native stack depth)

The same crash also fires when calling useUnstableNativeVariable() from a component rendered inside an SVG tree — so the bug appears to live in the shared observable/effect layer that both APIs route through (useNativeCss → varResolver → reactivity graph), not in styled() itself.

Plain <Svg color={someStaticHex} /> with the color resolved outside of any NativeWind runtime hook renders correctly. Only the NativeWind runtime path crashes.

Versions:

  • nativewind: 5.0.0-preview.4
  • react-native-css: 3.0.7
  • react-native-svg: 15.15.4
  • react-native: 0.85.3
  • react: 19.2.3
  • expo: 56.0.11 (SDK 56)
  • tailwindcss: 4.2.0 (Tailwind v4, @theme {} block)
  • Platform: iOS simulator, Hermes

Reproduction

npx rn-new@latest --nativewind then drop in:

import { styled } from 'nativewind';
import Svg, { Path } from 'react-native-svg';

const StyledSvg  = styled(Svg);
const StyledPath = styled(Path);

export default function App() {
  return (
    <StyledSvg width={24} height={24} viewBox="0 0 24 24" className="text-red-500">
      <StyledPath d="M2 12h20" stroke="currentColor" strokeWidth={2} />
    </StyledSvg>
  );
}

The documented nativeStyleMapping recipe reproduces the same crash:

const StyledSvg = styled(Svg, {
  className: { target: 'style', nativeStyleMapping: { color: 'color' } },
});

Expected behavior

styled(Svg, { className: { target: 'style', nativeStyleMapping: { color: 'color' } } }) should resolve text-… classes to a color value and lift it onto the <Svg color={…}> prop, so stroke="currentColor" on descendants follows the Tailwind text color. This is the v4 cssInterop recipe that the v5 third-party-components guide still points to.

Additional context

Two suspect spots in [email protected] that fit the symptom (not confirmed by runtime instrumentation):

  1. useNativeCss runs setState during render if testGuards flips. react-native-svg's Svg/Shape class components rebuild prop derivations on every render (extractedProps, SvgTouchableMixin, setNativeProps), so an identity-based guard may flip on every iteration and recurse synchronously.
  2. varResolver's variableHistory only blocks repeating the same variable name — it doesn't catch cycles across different names. Tailwind v4 OKLCH palette colors compile to nested var() chains, which may be enough to trigger that.

Workaround in use: resolve the color from className ourselves via useColorScheme() + a static token map mirrored from our @theme {} block, then pass it as <Svg color={…} />. Inner Path/Circle stay as plain react-native-svg primitives with stroke="currentColor". Works, but duplicates values from CSS and can't read live runtime variables.

What I tried that did not help:

  • Every nativeStyleMapping shape on styled(Svg, …).
  • Wrapping only the outer <Svg> and leaving inner primitives untouched.
  • Calling useUnstableNativeVariable('color-foreground-tertiary') before any SVG primitive renders — still crashes.

Related: #242 — [V5] - styled doesn't work as it worked in V4 — same symptom shape, marked Done in roadmap but not yet in a published preview.

Lingua principale
TypeScript
Stelle
166
Fork
45
Merge medio
13g 14h
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di nativewind/react-native-css

Tutte le issue di nativewind/react-native-css

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.