Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

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

未關閉
  • 哪裡不對？
#455 5 則留言 0 個 reaction 已指派 1 人 在 GitHub 檢視

維護者通常 3 天內回覆

@marklawlor 已經在處理了。

開始於 2026年7月15日。

評估

這個 Issue 還沒有評估資料。

描述

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.

主要語言
TypeScript
星號
166
分支
45
平均合併
13 天 14 小時
30 天內合併 PR
1

環境準備

  • 沒有 Dockerfile 或 Docker Compose 檔案
  • 沒有 Pull Request 範本
  • 閱讀貢獻指南

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

nativewind/react-native-css 的其他 Issue

查看 nativewind/react-native-css 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。