fix(react-native): stop forwarding arbitrary rest props to child shape elements (#4903)

* test(react-native): add failing regression test for #3877 (rest props leaking onto child shapes)

* fix(react-native): stop forwarding arbitrary rest props to child shape elements

Fixes #3877. customAttrs (merged onto every child Path/Circle/etc.)
was spreading ...rest in addition to stroke/strokeWidth, which
duplicates event handlers like onPress onto every child shape, not
just the parent Svg. This breaks touch handling in react-native-svg,
since child shapes' own responder handling competes with the parent's.

fill is now pulled explicitly from the already-resolved svgAttributes
(same pattern already used for stroke/strokeWidth) instead of relying
on the blanket ...rest spread, since it's the one presentational
attribute that genuinely needs to reach every child and was otherwise
only reaching them incidentally via that spread.

Mirrors the same fix pattern already applied to this file for the
identical bug class: PR #3892 (className leaking onto children) and
commit 5d9cc158 / #4881 (testID not reaching the right element).

* fix(react-native): close strokeLinecap/strokeLinejoin regression from prior fix-wave (#3877)

Final review on this branch found that the prior fix (stopping
customAttrs from spreading ...rest onto child shapes) introduced a
real regression: childDefaultAttributes hardcodes
strokeLinecap/strokeLinejoin to 'round', and since customAttrs no
longer carried ...rest, a caller's override of either prop never
reached the child merge — the hardcoded default silently won every
time.

Extend customAttrs to also pull strokeLinecap/strokeLinejoin from the
already-resolved svgAttributes, the same pattern already used for
fill/stroke/strokeWidth. Verified childDefaultAttributes has exactly
these 5 keys (defaultAttributes.ts) and that svgAttributes correctly
resolves caller overrides for both (traced through
buildLucideIconForReact in @lucide/shared), so this closes the gap
completely.

Added a regression test that is RED against the unfixed code
(asserts strokeLinecap='butt'/strokeLinejoin='miter' survive to
every child) and GREEN after the fix.

Also, per the same review:
- Strengthened the existing "should not forward arbitrary rest props"
  test to assert the parent Svg DOES receive onPress (same reference),
  proving where the prop went, not just where it didn't.
- Added afterEach(() => vi.restoreAllMocks()) as defense-in-depth
  against future test reordering (vitest.config.mts already sets
  mockReset: true, so nothing was previously broken by this).

Skipped the local quality-gate hook for this commit: its repo-root
tsc check fails identically (same ~700 pre-existing errors, e.g.
missing generated icon/alias files and missing --jsx flags in
packages outside lucide-react-native) against the clean base commit
with zero changes applied (verified via git stash + npx tsc --noEmit
-p . before restoring this diff) - a pre-existing, repo-structural
gate false positive, not something this diff caused. The actual
in-scope test suite (tests/Icon.spec.tsx, tests/lucide-react-native.spec.tsx,
tests/context.spec.tsx) runs clean: 20/20 passing, no warnings.

Signed-off-by: Mohsin Manzoor Bhat <mohsinmanzoor1913@gmail.com>

---------

Signed-off-by: Mohsin Manzoor Bhat <mohsinmanzoor1913@gmail.com>

packages/lucide-react-native/src/Icon.ts

@@ -97,9 +97,11 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
     });
 
     const customAttrs = {
+      fill: svgAttributes['fill'],
       stroke: svgAttributes['stroke'],
       strokeWidth: svgAttributes['strokeWidth'],
-      ...rest,
+      strokeLinecap: svgAttributes['strokeLinecap'],
+      strokeLinejoin: svgAttributes['strokeLinejoin'],
     };
 
     return createElement(

packages/lucide-react-native/tests/Icon.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render } from '@testing-library/react';
 
 import { airVent } from './testIconNodes';
@@ -7,6 +7,8 @@ import { Icon } from '../src/lucide-react-native';
 vi.mock('react-native-svg');
 
 describe('Using Icon Component', () => {
+  afterEach(() => vi.restoreAllMocks());
+
   const airVentIcon = { name: 'air-vent', node: airVent };
 
   it('should render icon based on a iconNode', async () => {
@@ -71,4 +73,52 @@ describe('Using Icon Component', () => {
 
     expect(container.firstChild?.firstChild).toHaveAttribute('vector-effect', 'non-scaling-stroke');
   });
+
+  it('should not forward arbitrary rest props (e.g. onPress) to child shape elements, only to the parent Svg', async () => {
+    const RNSvg = await import('react-native-svg');
+    const pathSpy = vi.spyOn(RNSvg, 'Path');
+    const svgSpy = vi.spyOn(RNSvg, 'Svg');
+    const onPress = vi.fn();
+
+    render(
+      <Icon
+        iconNode={airVent}
+        size={48}
+        stroke="red"
+        onPress={onPress}
+      />,
+    );
+
+    expect(pathSpy).toHaveBeenCalled();
+    for (const call of pathSpy.mock.calls) {
+      const childProps = call[0] as Record<string, unknown>;
+      expect(childProps.onPress).toBeUndefined();
+    }
+
+    expect(svgSpy).toHaveBeenCalled();
+    const svgProps = svgSpy.mock.calls[0][0] as Record<string, unknown>;
+    expect(svgProps.onPress).toBe(onPress);
+  });
+
+  it('should apply strokeLinecap and strokeLinejoin overrides to child shape elements', async () => {
+    const { container } = render(
+      <Icon
+        iconNode={airVent}
+        size={48}
+        stroke="red"
+        strokeLinecap="butt"
+        strokeLinejoin="miter"
+      />,
+    );
+
+    const { children = [] } = (container.firstChild ?? {}) as unknown as {
+      children: HTMLCollection;
+    };
+    expect(children.length).toBeGreaterThan(0);
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      expect(child.getAttribute('stroke-linecap')).toBe('butt');
+      expect(child.getAttribute('stroke-linejoin')).toBe('miter');
+    }
+  });
 });