Full Color Palette Not Available

Description

I’m trying to render a color that I like from another app. When I try that color for text or as a border to a View, React Native isn’t rendering the same color.

The color I’d like is: #fe1384 The color it’s actually rendering is: #e93883

It’s not my Mac or the eyedropper in Photoshop that’s the issue. With the same iPhone and viewing the color on the other app, then on my app - it’s visibly not as bright and not the same color to the naked eye. (I’ve taken several screenshots of each app and compared them with Photoshop).

I tried various workarounds such as using a black or white background (which an identical shape) with no luck.

Version

0.67.4

Output of npx react-native info

info Fetching system and libraries information… System: OS: macOS 12.0.1 CPU: (16) x64 Intel® Core™ i9-9980HK CPU @ 2.40GHz Memory: 26.66 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.5.4 - /usr/local/bin/npm Watchman: 2022.02.14.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3 System Images: android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.7199119 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 1.8.0_282 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.4 => 0.67.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Use style around a View like: width: 100, height: 100, borderWidth: 5, borderColor: ‘#fe1384’

Then take a screenshot and view it using Photoshop or another graphics package. The color will be a dulled version of #fe1384. In my case it’s rendering as #e93883, which is quite a bit a different color.

Snack, code example, screenshot, or link to a repository

I took a screenshot inside Photoshop, which demonstrates it the best. The left is the color I’d like to achieve, it really pops off the screen. The right is the React Native rendering of the same color.

https://pasteboard.co/sRWW35IgfTxa.png

[cipolleschi]

Hi, @tj-mc, sorry for the late reply.

To be honest, I think that the displayP3 APIs already falls back to the standard RGB for those devices where it is not supported. The API is around since iOS 10 and React Native supports now iOS 12.4. I think that the best way to leverage this is to make sure that every time the framework initialize a UIColor, it uses the init(displayP3Red:green:blue:alpha:) API instead of the standard one. Consider that colors in the enum (like UIColor.redColor) should already using these APIs internally.

I won’t add an extra API which requires some parsing in this case.

[joshwinter]

@cipolleschi Thank you very much for looking into this for me/anyone else seeing this. I didn’t know about this about retina + the native feature with displayP3. This explains it then. I’ll close this ticket. Perhaps one day RN can support this - a full palette feels pretty valuable.