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',
   );
 
@@ -392,7 +394,10 @@ export default class AnimatedInterpolation<
       // $FlowIgnoreMe[incompatible-cast]
       outputRange = ((outputRange: $ReadOnlyArray<string>).map(value => {
         const processedColor = processColor(value);
-        if (typeof processedColor === 'number') {
+        if (
+          typeof processedColor === 'number' ||
+          processedColor.hasOwnProperty('space')
+        ) {
           outputType = 'color';
           return processedColor;
         } else {

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

@@ -21,7 +21,9 @@ - (void)performUpdate
   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);
+  _color = self.config[@"space"] != nil
+    ? RCTColorFromComponents(rNode.value * 255, gNode.value * 255, bNode.value * 255, aNode.value) 
+    : RCTColorFromComponents(rNode.value, gNode.value, bNode.value, aNode.value);
 
   // TODO (T111179606): Support platform colors for color animations
 }

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;
 

packages/react-native/React/Base/RCTConvert.m → packages/react-native/React/Base/RCTConvert.mm

@@ -16,6 +16,8 @@
 #import "RCTParserUtils.h"
 #import "RCTUtils.h"
 
+#import <react/renderer/graphics/ColorComponents.h>
+
 @implementation RCTConvert
 
 RCT_CONVERTER(id, id, self)
@@ -439,7 +441,7 @@ + (UIKeyboardType)UIKeyboardType:(id)json RCT_DYNAMIC
     mapping = temporaryMapping;
   });
 
-  UIKeyboardType type = RCTConvertEnumValue("UIKeyboardType", mapping, @(UIKeyboardTypeDefault), json).integerValue;
+  UIKeyboardType type = (UIKeyboardType)RCTConvertEnumValue("UIKeyboardType", mapping, @(UIKeyboardTypeDefault), json).integerValue;
   return type;
 }
 
@@ -844,7 +846,7 @@ + (UIEdgeInsets)UIEdgeInsets:(id)json
     RCTAssert([UIColor respondsToSelector:selector], @"RCTUIColor does not respond to a semantic color selector.");
     Class klass = [UIColor class];
     IMP imp = [klass methodForSelector:selector];
-    id (*getSemanticColorObject)(id, SEL) = (void *)imp;
+    id (*getSemanticColorObject)(id, SEL) = (id (*)(id, SEL))imp;
     id colorObject = getSemanticColorObject(klass, selector);
     if ([colorObject isKindOfClass:[UIColor class]]) {
       color = colorObject;
@@ -878,6 +880,38 @@ + (UIEdgeInsets)UIEdgeInsets:(id)json
   return names;
 }
 
+static RCTColorSpace defaultColorSpace = (RCTColorSpace)facebook::react::defaultColorSpace;
+RCTColorSpace RCTGetDefaultColorSpace(void)
+{
+  return (RCTColorSpace)facebook::react::defaultColorSpace;
+}
+void RCTSetDefaultColorSpace(RCTColorSpace colorSpace)
+{
+  facebook::react::setDefaultColorSpace((facebook::react::ColorSpace)colorSpace);
+}
+
++ (UIColor *)createColorFrom:(CGFloat)r green:(CGFloat)g blue:(CGFloat)b alpha:(CGFloat)a
+{
+  RCTColorSpace space = RCTGetDefaultColorSpace();
+  return [self createColorFrom:r green:g blue:b alpha:a andColorSpace:space];
+}
++ (UIColor *)createColorFrom:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha andColorSpace:(RCTColorSpace)colorSpace
+{
+  if (colorSpace == RCTColorSpaceDisplayP3) {
+    return [UIColor colorWithDisplayP3Red:red green:green blue:blue alpha:alpha];
+  }
+  return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
+}
+
++ (RCTColorSpace)colorSpaceFromString:(NSString *)colorSpace {
+  if ([colorSpace isEqualToString:@"display-p3"]) {
+    return RCTColorSpaceDisplayP3;
+  } else if ([colorSpace isEqualToString:@"srgb"]) {
+    return RCTColorSpaceSRGB;
+  }
+  return RCTGetDefaultColorSpace();
+}
+
 + (UIColor *)UIColor:(id)json
 {
   if (!json) {
@@ -886,7 +920,7 @@ + (UIColor *)UIColor:(id)json
   if ([json isKindOfClass:[NSArray class]]) {
     NSArray *components = [self NSNumberArray:json];
     CGFloat alpha = components.count > 3 ? [self CGFloat:components[3]] : 1.0;
-    return [UIColor colorWithRed:[self CGFloat:components[0]]
+    return [self createColorFrom:[self CGFloat:components[0]]
                            green:[self CGFloat:components[1]]
                             blue:[self CGFloat:components[2]]
                            alpha:alpha];
@@ -896,11 +930,19 @@ + (UIColor *)UIColor:(id)json
     CGFloat r = ((argb >> 16) & 0xFF) / 255.0;
     CGFloat g = ((argb >> 8) & 0xFF) / 255.0;
     CGFloat b = (argb & 0xFF) / 255.0;
-    return [UIColor colorWithRed:r green:g blue:b alpha:a];
+    return [self createColorFrom:r green:g blue:b alpha:a];
   } else if ([json isKindOfClass:[NSDictionary class]]) {
     NSDictionary *dictionary = json;
     id value = nil;
-    if ((value = [dictionary objectForKey:@"semantic"])) {
+    NSString *rawColorSpace = [dictionary objectForKey: @"space"];
+    if ([@[@"display-p3", @"srgb"] containsObject:rawColorSpace]) {
+      CGFloat r = [[dictionary objectForKey:@"r"] floatValue];
+      CGFloat g = [[dictionary objectForKey:@"g"] floatValue];
+      CGFloat b = [[dictionary objectForKey:@"b"] floatValue];
+      CGFloat a = [[dictionary objectForKey:@"a"] floatValue];
+      RCTColorSpace colorSpace = [self colorSpaceFromString: rawColorSpace];
+      return [self createColorFrom:r green:g blue:b alpha:a andColorSpace:colorSpace];
+    } else if ((value = [dictionary objectForKey:@"semantic"])) {
       if ([value isKindOfClass:[NSString class]]) {
         NSString *semanticName = value;
         UIColor *color = [UIColor colorNamed:semanticName];

packages/react-native/React/Fabric/RCTConversions.h

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import <React/RCTConvert.h>
 #import <UIKit/UIKit.h>
 
 #import <react/renderer/components/view/AccessibilityPrimitives.h>
@@ -53,7 +54,11 @@ inline UIColor *_Nullable RCTUIColorFromSharedColor(const facebook::react::Share
   }
 
   auto components = facebook::react::colorComponentsFromColor(sharedColor);
-  return [UIColor colorWithRed:components.red green:components.green blue:components.blue alpha:components.alpha];
+  return [RCTConvert createColorFrom:components.red
+                               green:components.green
+                                blue:components.blue
+                               alpha:components.alpha
+                       andColorSpace:(RCTColorSpace)components.colorSpace];
 }
 
 inline CF_RETURNS_RETAINED CGColorRef _Nullable RCTCreateCGColorRefFromSharedColor(

packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h

@@ -47,6 +47,24 @@ inline void fromRawValue(
     colorComponents.blue = items.at(2);
     colorComponents.alpha = length == 4 ? items.at(3) : 1.0f;
   } else {
+    if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
+      auto items = (std::unordered_map<std::string, RawValue>)value;
+      if (items.find("space") != items.end()) {
+        colorComponents.red = (float)items.at("r");
+        colorComponents.green = (float)items.at("g");
+        colorComponents.blue = (float)items.at("b");
+        colorComponents.alpha = (float)items.at("a");
+        colorComponents.colorSpace = getDefaultColorSpace();
+        std::string space = (std::string)items.at("space");
+        if (space == "display-p3") {
+          colorComponents.colorSpace = ColorSpace::DisplayP3;
+        } else if (space == "srgb") {
+          colorComponents.colorSpace = ColorSpace::sRGB;
+        }
+        result = colorFromComponents(colorComponents);
+        return;
+      }
+    }
     result = parsePlatformColor(context, value);
     return;
   }