Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#455 5 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

@marklawlor y travaille déjà.

Depuis le 15/7/2026.

Évaluation

Cette issue n'a pas encore été évaluée.

Description

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.

Langage dominant
TypeScript
Étoiles
166
Forks
45
Merge moyen
13 j 14 h
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nativewind/react-native-css

Toutes les issues de nativewind/react-native-css

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.