Add Support for Wide Gamut (DisplayP3) Colors to React Native

packages/normalize-color/__tests__/normalizeColor-test.js

@@ -150,6 +150,37 @@ it('handles number colors properly', () => {
   expect(normalizeColor(0x01234567)).toBe(0x01234567);
 });
 
+it('handles color function properly', () => {
+  expect(normalizeColor('color(display-p3 1 0 0)')).toEqual({
+    space: 'display-p3',
+    r: 1,
+    g: 0,
+    b: 0,
+    a: 1,
+  });
+  expect(normalizeColor('color(display-p3 1 0 0 / 0.5)')).toEqual({
+    space: 'display-p3',
+    r: 1,
+    g: 0,
+    b: 0,
+    a: 0.5,
+  });
+  expect(normalizeColor('color(srgb 1 0 0)')).toEqual({
+    space: 'srgb',
+    r: 1,
+    g: 0,
+    b: 0,
+    a: 1,
+  });
+  expect(normalizeColor('color(srgb 1 0 0 / 0.5)')).toEqual({
+    space: 'srgb',
+    r: 1,
+    g: 0,
+    b: 0,
+    a: 0.5,
+  });
+});
+
 it('returns the same color when it is already normalized', () => {
   const normalizedColor = normalizeColor('red') || 0;
   expect(normalizeColor(normalizedColor)).toBe(normalizedColor);

packages/normalize-color/index.js

@@ -155,6 +155,24 @@ function normalizeColor(color) {
     );
   }
 
+  if ((match = matchers.color.exec(color))) {
+    return match[2]
+      ? {
+          space: match[2],
+          r: parseFloat(match[3]),
+          g: parseFloat(match[4]),
+          b: parseFloat(match[5]),
+          a: 1,
+        }
+      : {
+          space: match[6],
+          r: parseFloat(match[7]),
+          g: parseFloat(match[8]),
+          b: parseFloat(match[9]),
+          a: parseFloat(match[10]),
+        };
+  }
+
   return null;
 }
 
@@ -209,6 +227,7 @@ function hwbToRgb(h, w, b) {
   );
 }
 
+const COLOR_SPACE = 'display-p3|srgb';
 const NUMBER = '[-+]?\\d*\\.?\\d+';
 const PERCENTAGE = NUMBER + '%';
 
@@ -235,6 +254,13 @@ let cachedMatchers;
 function getMatchers() {
   if (cachedMatchers === undefined) {
     cachedMatchers = {
+      color: new RegExp(
+        'color(' +
+          call(COLOR_SPACE, NUMBER, NUMBER, NUMBER) +
+          '|' +
+          callWithSlashSeparator(COLOR_SPACE, NUMBER, NUMBER, NUMBER, NUMBER) +
+          ')',
+      ),
       rgb: new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER)),
       rgba: new RegExp(
         'rgba(' +

packages/normalize-color/index.js.flow

@@ -7,4 +7,18 @@
  * @flow strict
  */
 
-declare module.exports: (color: ?(string | number)) => null | number;
+enum ColorSpace {
+  SRGB = 'srgb',
+  DisplayP3 = 'display-p3',
+}
+
+export type RgbaValue = {
+  +space?: ColorSpace,
+  +r: number,
+  +g: number,
+  +b: number,
+  +a: number,
+  ...
+};
+
+declare module.exports: (color: ?(string | number)) => null | number | RgbaValue;

packages/react-native/Libraries/Animated/nodes/AnimatedColor.js

@@ -109,6 +109,7 @@ function isRgbaAnimatedValue(value: any): boolean {
 }
 
 export default class AnimatedColor extends AnimatedWithChildren {
+  space: ?string;
   r: AnimatedValue;
   g: AnimatedValue;
   b: AnimatedValue;
@@ -142,6 +143,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
         this.nativeColor = (processedColor: NativeColorValue);
       }
 
+      this.space = initColor.space;
       this.r = new AnimatedValue(initColor.r);
       this.g = new AnimatedValue(initColor.g);
       this.b = new AnimatedValue(initColor.b);
@@ -266,6 +268,10 @@ export default class AnimatedColor extends AnimatedWithChildren {
   __getValue(): ColorValue {
     if (this.nativeColor != null) {
       return this.nativeColor;
+    } else if (this.space) {
+      return `color(${
+        this.space
+      } ${this.r.__getValue()} ${this.g.__getValue()} ${this.b.__getValue()} / ${this.a.__getValue()})`;
     } else {
       return `rgba(${this.r.__getValue()}, ${this.g.__getValue()}, ${this.b.__getValue()}, ${this.a.__getValue()})`;
     }
@@ -310,6 +316,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   __getNativeConfig(): {...} {
     return {
       type: 'color',
+      space: this.space,
       r: this.r.__getNativeTag(),
       g: this.g.__getNativeTag(),
       b: this.b.__getNativeTag(),

packages/react-native/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -157,7 +157,9 @@ function mapStringToNumericComponents(
   | {isColor: false, components: $ReadOnlyArray<number | string>} {
   let normalizedColor = normalizeColor(input);
   invariant(
-    normalizedColor == null || typeof normalizedColor !== 'object',
+    normalizedColor == null ||
+      typeof normalizedColor !== 'object' ||
+      normalizedColor.hasOwnProperty('space'),
     'PlatformColors are not supported',
   );
 
@@ -395,6 +397,13 @@ export default class AnimatedInterpolation<
         if (typeof processedColor === 'number') {
           outputType = 'color';
           return processedColor;
+        } else if (processedColor?.hasOwnProperty('space')) {
+          const {r, g, b, a} = processedColor;
+          const reprocessedColor = processColor(
+            `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`,
+          );
+          outputType = 'color';
+          return reprocessedColor;
         } else {
           return NativeAnimatedHelper.transformDataType(value);
         }

packages/react-native/Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.h

@@ -9,6 +9,7 @@
 
 @interface RCTColorAnimatedNode : RCTAnimatedNode
 
-@property (nonatomic, assign) int32_t color;
+// @property (nonatomic, strong) UIColor *color;
+@property (nonatomic, strong) NSDictionary<NSString *, id> *color;
 
 @end

packages/react-native/Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.mm

@@ -9,19 +9,30 @@
 #import <React/RCTValueAnimatedNode.h>
 
 #import <React/RCTAnimationUtils.h>
+#import <React/RCTConvert.h>
 
 @implementation RCTColorAnimatedNode
 
 - (void)performUpdate
 {
   [super performUpdate];
 
+  CGFloat divisor = self.config[@"space"] ? 1.0 : 255.0;
+  RCTColorSpace space = [RCTConvert colorSpaceFromString:self.config[@"space"]];
   RCTValueAnimatedNode *rNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"r"]];
   RCTValueAnimatedNode *gNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"g"]];
   RCTValueAnimatedNode *bNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"b"]];
   RCTValueAnimatedNode *aNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"a"]];
-
-  _color = RCTColorFromComponents(rNode.value, gNode.value, bNode.value, aNode.value);
+
+// TODO: why can't we just use UIColor here?
+//  _color = [RCTConvert createColorFrom:rNode.value green:gNode.value blue:bNode.value alpha:aNode.value andColorSpace:space];
+  _color = @{
+    @"space": space == RCTColorSpaceDisplayP3 ? @"display-p3" : @"srgb",
+    @"r": @(rNode.value / divisor),
+    @"g": @(gNode.value / divisor),
+    @"b": @(bNode.value / divisor),
+    @"a": @(aNode.value),
+  };
 
   // TODO (T111179606): Support platform colors for color animations
 }

packages/react-native/Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.mm

@@ -150,7 +150,7 @@ - (void)performUpdate
   CGFloat inputValue = _parentNode.value;
   switch (_outputType) {
     case RCTInterpolationOutputColor:
-      _outputvalue = @(RCTInterpolateColorInRange(inputValue, _inputRange, _outputRange));
+      _outputvalue = RCTInterpolateColorInRange(inputValue, _inputRange, _outputRange);
       break;
     case RCTInterpolationOutputString:
       _outputvalue = RCTInterpolateString(

packages/react-native/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.mm

@@ -130,7 +130,7 @@ - (void)performUpdate
     } else if ([parentNode isKindOfClass:[RCTColorAnimatedNode class]]) {
       RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)parentNode;
       NSString *property = [self propertyNameForParentTag:parentTag];
-      _propsDictionary[property] = @(colorAnimatedNode.color);
+      _propsDictionary[property] = colorAnimatedNode.color;
     } else if ([parentNode isKindOfClass:[RCTObjectAnimatedNode class]]) {
       RCTObjectAnimatedNode *objectAnimatedNode = (RCTObjectAnimatedNode *)parentNode;
       NSString *property = [self propertyNameForParentTag:parentTag];

packages/react-native/Libraries/NativeAnimation/Nodes/RCTStyleAnimatedNode.mm

@@ -50,7 +50,7 @@ - (void)performUpdate
         [_propsDictionary addEntriesFromDictionary:transformAnimatedNode.propsDictionary];
       } else if ([node isKindOfClass:[RCTColorAnimatedNode class]]) {
         RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)node;
-        _propsDictionary[property] = @(colorAnimatedNode.color);
+        _propsDictionary[property] = colorAnimatedNode.color;
       } else if ([node isKindOfClass:[RCTObjectAnimatedNode class]]) {
         RCTObjectAnimatedNode *objectAnimatedNode = (RCTObjectAnimatedNode *)node;
         _propsDictionary[property] = objectAnimatedNode.value;

packages/react-native/Libraries/NativeAnimation/RCTAnimationUtils.h

@@ -32,7 +32,8 @@ RCT_EXTERN CGFloat RCTInterpolateValueInRange(
     NSString *extrapolateLeft,
     NSString *extrapolateRight);
 
-RCT_EXTERN uint32_t
+// RCT_EXTERN UIColor*
+RCT_EXTERN NSDictionary<NSString *, id>*
 RCTInterpolateColorInRange(CGFloat value, NSArray<NSNumber *> *inputRange, NSArray<UIColor *> *outputRange);
 
 // Represents a color as a int32_t. RGB components are assumed to be in [0-255] range and alpha in [0-1] range

packages/react-native/Libraries/NativeAnimation/RCTAnimationUtils.mm

@@ -84,7 +84,8 @@ CGFloat RCTInterpolateValueInRange(
   return RCTInterpolateValue(value, inputMin, inputMax, outputMin, outputMax, extrapolateLeft, extrapolateRight);
 }
 
-uint32_t RCTInterpolateColorInRange(CGFloat value, NSArray<NSNumber *> *inputRange, NSArray<UIColor *> *outputRange)
+//UIColor* RCTInterpolateColorInRange(CGFloat value, NSArray<NSNumber *> *inputRange, NSArray<UIColor *> *outputRange)
+NSDictionary<NSString *, id>* RCTInterpolateColorInRange(CGFloat value, NSArray<NSNumber *> *inputRange, NSArray<UIColor *> *outputRange)
 {
   NSUInteger rangeIndex = RCTFindIndexOfNearestValue(value, inputRange);
   CGFloat inputMin = inputRange[rangeIndex].doubleValue;
@@ -94,12 +95,20 @@ uint32_t RCTInterpolateColorInRange(CGFloat value, NSArray<NSNumber *> *inputRan
   [outputRange[rangeIndex] getRed:&redMin green:&greenMin blue:&blueMin alpha:&alphaMin];
   CGFloat redMax, greenMax, blueMax, alphaMax;
   [outputRange[rangeIndex + 1] getRed:&redMax green:&greenMax blue:&blueMax alpha:&alphaMax];
-
-  return RCTColorFromComponents(
-      0xFF * (redMin + (value - inputMin) * (redMax - redMin) / (inputMax - inputMin)),
-      0xFF * (greenMin + (value - inputMin) * (greenMax - greenMin) / (inputMax - inputMin)),
-      0xFF * (blueMin + (value - inputMin) * (blueMax - blueMin) / (inputMax - inputMin)),
-      alphaMin + (value - inputMin) * (alphaMax - alphaMin) / (inputMax - inputMin));
+
+  CGFloat r = redMin + (value - inputMin) * (redMax - redMin) / (inputMax - inputMin);
+  CGFloat g = greenMin + (value - inputMin) * (greenMax - greenMin) / (inputMax - inputMin);
+  CGFloat b = blueMin + (value - inputMin) * (blueMax - blueMin) / (inputMax - inputMin);
+  CGFloat a = alphaMin + (value - inputMin) * (alphaMax - alphaMin) / (inputMax - inputMin);
+
+//  return [UIColor colorWithRed:r green:g blue:b alpha:a];
+  return @{
+    @"space": @"srgb",
+    @"r":@(r),
+    @"g":@(g),
+    @"b":@(b),
+    @"a":@(a),
+  };
 }
 
 uint32_t RCTColorFromComponents(CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)

packages/react-native/Libraries/StyleSheet/__tests__/processColor-test.js

@@ -51,6 +51,24 @@ describe('processColor', () => {
     });
   });
 
+  describe('color() strings', () => {
+    it('should convert color(s r g b)', () => {
+      const colorFromString = processColor('color(srgb 1 0 0)');
+      expect(colorFromString).toEqual({space: 'srgb', r: 1, g: 0, b: 0, a: 1});
+    });
+
+    it('should convert color(s r g b / a)', () => {
+      const colorFromString = processColor('color(display-p3 1 0 0 / 0.5)');
+      expect(colorFromString).toEqual({
+        space: 'display-p3',
+        r: 1,
+        g: 0,
+        b: 0,
+        a: 0.5,
+      });
+    });
+  });
+
   describe('RGB strings', () => {
     it('should convert rgb(x, y, z)', () => {
       const colorFromString = processColor('rgb(10, 20, 30)');

packages/react-native/Libraries/StyleSheet/__tests__/processColorArray-test.js

@@ -34,6 +34,19 @@ describe('processColorArray', () => {
       expect(colorFromStringArray).toEqual(expectedIntArray);
     });
 
+    it('should convert array of color type color(display-p3 x y z)', () => {
+      const colorFromDisplayP3Array = processColorArray([
+        'color(display-p3 0.1 0.2 0.3)',
+        'color(display-p3 0.2 0.3 0.4)',
+        'color(display-p3 0.3 0.4 0.5)',
+      ]);
+      expect(colorFromDisplayP3Array).toEqual([
+        {space: 'display-p3', r: 0.1, g: 0.2, b: 0.3, a: 1},
+        {space: 'display-p3', r: 0.2, g: 0.3, b: 0.4, a: 1},
+        {space: 'display-p3', r: 0.3, g: 0.4, b: 0.5, a: 1},
+      ]);
+    });
+
     it('should convert array of color type rgb(x, y, z)', () => {
       const colorFromRGBArray = processColorArray([
         'rgb(10, 20, 30)',

packages/react-native/React/Base/RCTConvert.h

@@ -17,6 +17,16 @@
 #import <React/RCTTextDecorationLineType.h>
 #import <yoga/Yoga.h>
 
+typedef NS_ENUM(NSInteger, RCTColorSpace) {
+  RCTColorSpaceSRGB,
+  RCTColorSpaceDisplayP3,
+};
+
+// Change the default color space
+RCTColorSpace RCTGetDefaultColorSpace(void);
+RCT_EXTERN void RCTSetDefaultColorSpace(RCTColorSpace colorSpace);
+
+
 /**
  * This class provides a collection of conversion functions for mapping
  * JSON objects to native types and classes. These are useful when writing
@@ -91,6 +101,13 @@ typedef NSURL RCTFileURL;
 
 + (CGAffineTransform)CGAffineTransform:(id)json;
 
++ (UIColor *)createColorFrom:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha;
++ (UIColor *)createColorFrom:(CGFloat)red
+                       green:(CGFloat)green
+                        blue:(CGFloat)blue
+                       alpha:(CGFloat)alpha
+               andColorSpace:(RCTColorSpace)colorSpace;
++ (RCTColorSpace)colorSpaceFromString:(NSString *)colorSpace;
 + (UIColor *)UIColor:(id)json;
 + (CGColorRef)CGColor:(id)json CF_RETURNS_NOT_RETAINED;