diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js index c1d2bf4128b..7bb31363424 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js @@ -320,6 +320,18 @@ function testDropShadow() { ]); }); + it('should parse string drop-shadow with rgba color', () => { + expect(processFilter('drop-shadow(50 50 rgba(0, 0, 0, 1))')).toEqual([ + { + dropShadow: { + offsetX: 50, + offsetY: 50, + color: processColor('rgba(0, 0, 0, 1)'), + }, + }, + ]); + }); + it('should parse string with mixed case drop-shadow', () => { expect(processFilter('DroP-sHaDOw(50 50 purple)')).toEqual([ { diff --git a/packages/react-native/Libraries/StyleSheet/processFilter.js b/packages/react-native/Libraries/StyleSheet/processFilter.js index f865d238d61..6b2dc6f689f 100644 --- a/packages/react-native/Libraries/StyleSheet/processFilter.js +++ b/packages/react-native/Libraries/StyleSheet/processFilter.js @@ -44,8 +44,8 @@ export default function processFilter( } if (typeof filter === 'string') { - // matches on functions with args like "drop-shadow(1.5)" - const regex = /([\w-]+)\(([^)]+)\)/g; + // matches on functions with args and nested functions like "drop-shadow(10 10 10 rgba(0, 0, 0, 1))" + const regex = /([\w-]+)\(([^()]*|\([^()]*\)|[^()]*\([^()]*\)[^()]*)\)/g; let matches; while ((matches = regex.exec(filter))) { @@ -254,8 +254,8 @@ function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive { let lengthCount = 0; let keywordDetectedAfterLength = false; - // split on all whitespaces - for (const arg of rawDropShadow.split(/\s+/)) { + // split args by all whitespaces that are not in parenthesis + for (const arg of rawDropShadow.split(/\s+(?![^(]*\))/)) { const processedColor = processColor(arg); if (processedColor != null) { if (dropShadow.color != null) {