diff --git a/Libraries/StyleSheet/__tests__/processColorArray-test.js b/Libraries/StyleSheet/__tests__/processColorArray-test.js index 1be389cdb92..3ccc582a116 100644 --- a/Libraries/StyleSheet/__tests__/processColorArray-test.js +++ b/Libraries/StyleSheet/__tests__/processColorArray-test.js @@ -22,7 +22,7 @@ const PlatformColorAndroid = require('../PlatformColorValueTypes.android') const platformSpecific = OS === 'android' - ? unsigned => unsigned | 0 //eslint-disable-line no-bitwise + ? unsigned => unsigned | 0 // eslint-disable-line no-bitwise : x => x; describe('processColorArray', () => { @@ -63,6 +63,30 @@ describe('processColorArray', () => { const colorFromNoArray = processColorArray(null); expect(colorFromNoArray).toEqual(null); }); + + it('converts invalid colors to transparent', () => { + const spy = jest.spyOn(console, 'error').mockReturnValue(undefined); + + const colors = ['red', '???', null, undefined, false]; + const colorFromStringArray = processColorArray(colors); + const expectedIntArray = [ + 0xffff0000, + 0x00000000, + 0x00000000, + 0x00000000, + 0x00000000, + ].map(platformSpecific); + expect(colorFromStringArray).toEqual(expectedIntArray); + + for (const color of colors.slice(1)) { + expect(spy).toHaveBeenCalledWith( + 'Invalid value in color array:', + color, + ); + } + + spy.mockRestore(); + }); }); describe('iOS', () => { diff --git a/Libraries/StyleSheet/processColorArray.js b/Libraries/StyleSheet/processColorArray.js index 0cbbdcd745b..1d13d876c11 100644 --- a/Libraries/StyleSheet/processColorArray.js +++ b/Libraries/StyleSheet/processColorArray.js @@ -10,15 +10,25 @@ 'use strict'; -const processColor = require('./processColor'); - import type {ColorValue} from './StyleSheet'; -import type {ProcessedColorValue} from './processColor'; +import processColor, {type ProcessedColorValue} from './processColor'; + +const TRANSPARENT = 0; // rgba(0, 0, 0, 0) function processColorArray( - colors: ?Array, -): ?Array { - return colors == null ? null : colors.map(processColor); + colors: ?$ReadOnlyArray, +): ?$ReadOnlyArray { + return colors == null ? null : colors.map(processColorElement); +} + +function processColorElement(color: ColorValue): ProcessedColorValue { + const value = processColor(color); + // For invalid colors, fallback to transparent. + if (value == null) { + console.error('Invalid value in color array:', color); + return TRANSPARENT; + } + return value; } module.exports = processColorArray;