react-native: 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.
About this issue
- Original URL
- State: open
- Created 2 years ago
- Comments: 16 (4 by maintainers)
I came across this merge elsewhere on Github: https://github.com/irvingchenn/react-native/pull/1/commits/89e98721bee4b3bb100502f37e5d8eb587e85aad
I implemented the same locally just as a test. It’s working great for font colors! Unfortunately, for border colors there must be more to it as those aren’t working. I’ll see if I can find out more.
I ended up implementing this: https://gist.github.com/canpoyrazoglu/e85a47701a7be291dbd05372e8e5f76f
Which covers everything except for borders, I believe(?). It was an iOS only app, so that’s as far I took things.
just to be clear: we can’t accept that change in core as:
We want to support the feature, but we have to come up with a different solution, @jamonholmgren.
Related: #41517.
@joshwinter, did you make any progress other than what you reported? We are about to devote some engineering time to implementing this (Infinite Red) and any direction would help. Thank you!
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 theinit(displayP3Red:green:blue:alpha:)API instead of the standard one. Consider that colors in the enum (likeUIColor.redColor) should already using these APIs internally.I won’t add an extra API which requires some parsing in this case.
@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.
Hi, @joshwinter. Thanks for reporting the issue. Is this still relevant?
I think that @tj-mc is on the right path. It could be a color space issue: the app you are trying to copy from may use the Display P3-wide gamut space to render its UIColors, while we are still using a plain RGB approach.
Thanks for your reply. This is happening on a real device. I have an iPhone 7. I’ve tried HSL and RGB/RGBA also with the same results.