diff --git a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js index 8e6b10479de7..5d517291f9d7 100644 --- a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js +++ b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js @@ -12,14 +12,59 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import RNTesterText from '../../components/RNTesterText'; import * as React from 'react'; -import {StyleSheet, View} from 'react-native'; +import {processColor, StyleSheet, View} from 'react-native'; + +// Reproducer for https://github.com/facebook/react-native/issues/58495 +// On main, functional color strings with surrounding junk still normalize +// (same as a valid rgb()), so processColor returns a non-null value and the +// swatch paints. Expected: junk inputs should be null / no fill. +const CASES: $ReadOnlyArray<{label: string, color: string, expectNull: boolean}> = + [ + {label: 'valid rgb', color: 'rgb(1, 2, 3)', expectNull: false}, + {label: 'junk around rgb', color: 'xxrgb(1, 2, 3)yy', expectNull: true}, + {label: 'rgb with suffix', color: 'rgb(1, 2, 3)yy', expectNull: true}, + { + label: 'rgba with suffix', + color: 'rgba(1,2,3,0.5)extra', + expectNull: true, + }, + {label: 'hex rejects spaces', color: ' #fff ', expectNull: true}, + ]; function Playground() { return ( + + Issue #58495 — normalize-color partial match + - Edit "RNTesterPlayground.js" to change this file + Junk functional strings should process to null (like spaced hex). On + main they currently resolve and paint. + {CASES.map(testCase => { + const processed = processColor(testCase.color); + const isNull = processed == null; + const unexpected = isNull !== testCase.expectNull; + return ( + + + + + {testCase.label}: {JSON.stringify(testCase.color)} + + + processColor → {processed == null ? 'null' : String(processed)} + {unexpected ? ' ← unexpected on main' : ''} + + + + ); + })} ); } @@ -27,6 +72,24 @@ function Playground() { const styles = StyleSheet.create({ container: { padding: 10, + gap: 12, + }, + title: { + fontWeight: '700', + }, + row: { + flexDirection: 'row', + alignItems: 'center', + gap: 10, + }, + swatch: { + width: 36, + height: 36, + borderWidth: 1, + borderColor: '#999', + }, + meta: { + flex: 1, }, });