fix: stop reading key from element props on React 19

src/Hyperlink.tsx

@@ -11,6 +11,17 @@ const linkify = require('linkify-it')();
 
 const { OS } = Platform;
 
+/**
+ * Copies `props` without React's special `ref` prop. `key` (and `ref` on React
+ * 18) is a non-enumerable warning getter that a spread skips but destructuring
+ * would read, and element props are frozen, so they cannot be deleted in place.
+ */
+const propsWithoutRef = <T extends object>(props: T): T => {
+	const rest: T & { ref?: unknown } = { ...props };
+	delete rest.ref;
+	return rest;
+};
+
 class Hyperlink extends Component<HyperlinkProps, HyperlinkState> {
 	public static defaultProps: Partial<HyperlinkProps> = {
 		linkify,
@@ -32,9 +43,7 @@ class Hyperlink extends Component<HyperlinkProps, HyperlinkState> {
 	}
 
 	render() {
-		// Avoid spreading React special props such as `key` or `ref`
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { key: _key, ref: _ref, ...viewProps } = this.props as any;
+		const viewProps: any = propsWithoutRef(this.props);
 
 		// If no link handlers or styles, just render children as-is
 		if (
@@ -96,8 +105,7 @@ class Hyperlink extends Component<HyperlinkProps, HyperlinkState> {
 		let elements: Array<string | React.ReactElement> = [];
 		let _lastIndex = 0;
 
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { ref: _ref, key: _key, ...componentProps } = component.props || {};
+		const componentProps = propsWithoutRef(component.props || {});
 
 		try {
 			this.state.linkifyIt
@@ -159,8 +167,7 @@ class Hyperlink extends Component<HyperlinkProps, HyperlinkState> {
 		let { props: { children } = { children: undefined } } = component || {};
 		if (!children) return component;
 
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { ref: _ref, key: _key, ...componentProps } = component.props || {};
+		const componentProps = propsWithoutRef(component.props || {});
 
 		return React.cloneElement(
 			component,
@@ -213,10 +220,7 @@ export default class extends Component<HyperlinkProps> {
 
 	render() {
 		const onPress = this.props.onPress ?? this.handleLink;
-		// Do not forward `key`/`ref` to the inner `Hyperlink` to avoid
-		// React warning about spreading a props object that contains `key`.
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { key: _key, ref: _ref, ...rest } = this.props as any;
+		const rest: any = propsWithoutRef(this.props);
 		return this.props.linkDefault ? (
 			<Hyperlink
 				{...rest}

src/__tests__/special-props.test.tsx

@@ -0,0 +1,91 @@
+import type { ElementType, ReactNode } from 'react';
+import { render } from '@testing-library/react-native';
+import { Text, View } from 'react-native';
+import Hyperlink from '../index';
+import type { ReactElementWithType } from '../types';
+
+// React defines `key` on a development element's props as a non-enumerable
+// warning getter and freezes those props, so `key` must not be read and neither
+// `key` nor `ref` can be deleted in place.
+describe('React special props', () => {
+	let errorSpy: jest.SpyInstance;
+
+	beforeEach(() => {
+		errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		errorSpy.mockRestore();
+	});
+
+	const keyWarnings = () =>
+		errorSpy.mock.calls.filter(call =>
+			String(call[0]).includes('`key` is not a prop'),
+		);
+
+	// React logs that warning only once per process, so each case builds its
+	// keyed element with a freshly required React to stay independent.
+	const createKeyedElement = (
+		type: ElementType,
+		props: Record<string, unknown>,
+		...children: ReactNode[]
+	): ReactElementWithType => {
+		let element: ReactElementWithType | undefined;
+		jest.isolateModules(() => {
+			const { createElement } = require('react');
+			element = createElement(type, props, ...children);
+		});
+		return element as ReactElementWithType;
+	};
+
+	it('should not read `key` when linkifying a keyed Text', () => {
+		render(
+			<Hyperlink linkStyle={{ color: 'blue' }}>
+				{createKeyedElement(Text, { key: 'a' }, 'see https://example.com')}
+			</Hyperlink>,
+		);
+
+		expect(keyWarnings()).toHaveLength(0);
+	});
+
+	it('should not read `key` when parsing a keyed non-Text child', () => {
+		render(
+			<Hyperlink linkStyle={{ color: 'blue' }}>
+				{createKeyedElement(
+					View,
+					{ key: 'b' },
+					<Text>see https://example.com</Text>,
+				)}
+			</Hyperlink>,
+		);
+
+		expect(keyWarnings()).toHaveLength(0);
+	});
+
+	it('should not read `key` when the Hyperlink itself has a key', () => {
+		render(
+			createKeyedElement(
+				Hyperlink,
+				{ key: 'c', linkStyle: { color: 'blue' } },
+				<Text>see https://example.com</Text>,
+			),
+		);
+
+		expect(keyWarnings()).toHaveLength(0);
+	});
+
+	it('should not mutate the frozen props of the elements it processes', () => {
+		const child = createKeyedElement(
+			Text,
+			{ key: 'd', testID: 'child' },
+			'see https://example.com',
+		);
+		expect(Object.isFrozen(child.props)).toBe(true);
+
+		expect(() =>
+			render(<Hyperlink linkStyle={{ color: 'blue' }}>{child}</Hyperlink>),
+		).not.toThrow();
+
+		expect(child.props.testID).toBe('child');
+	});
+});