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 摘要。