Files
react-native/Libraries/StyleSheet/processColorArray.js
T
Tim Yung bb6cd56fae RN: Fallback for Invalid Colors in processColorArray
Summary:
If an invalid color is supplied to a native component that expects `Array<ColorValue>`, it is currently possible to produce an array that contains null or undefined elements. This is problematic because the native component may not know what to do with the null or undefined value.

This changes `processColorArray` to always return an array with valid color values. Any invalid color values will fallback to being transparent black, `0x00000000`.

Changelog:
[General][Fixed] - For native components that accept color arrays, invalid elements will now fallback to transparent with a console error.

Reviewed By: JoshuaGross

Differential Revision: D27542291

fbshipit-source-id: efa5d130644b3aee68d2b9fad6fdb61af11a2966
2021-04-02 15:07:54 -07:00

35 lines
904 B
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
'use strict';
import type {ColorValue} from './StyleSheet';
import processColor, {type ProcessedColorValue} from './processColor';
const TRANSPARENT = 0; // rgba(0, 0, 0, 0)
function processColorArray(
colors: ?$ReadOnlyArray<ColorValue>,
): ?$ReadOnlyArray<ProcessedColorValue> {
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;