P3 Color Space Issue

[mazenchami]

Description

React-Native on iOS and Android don't have P3 Color Space compatibility.

NOTE: This was tested with new & old arch.

React Native Version

0.72.6

Output of npx react-native info

System:
OS: macOS 14.1.1
CPU: (10) arm64 Apple M1 Max
Memory: 3.11 GB / 64.00 GB
Shell:
  version: "5.9"
  path: /bin/zsh
Binaries:
Node:
  version: 18.18.2
  path: ~/.asdf/installs/nodejs/18.18.2/bin/node
Yarn:
  version: 1.22.19
  path: ~/.asdf/shims/yarn
npm:
  version: 9.8.1
  path: ~/.asdf/plugins/nodejs/shims/npm
Watchman: Not Found
Managers:
CocoaPods:
  version: 1.12.1
  path: /Users/yulolimum/.asdf/shims/pod
SDKs:
iOS SDK:
  Platforms:
    - DriverKit 23.0
    - iOS 17.0
    - macOS 14.0
    - tvOS 17.0
    - watchOS 10.0
Android SDK:
  API Levels:
    - "28"
    - "29"
    - "30"
    - "31"
    - "32"
    - "33"
  Build Tools:
    - 29.0.2
    - 30.0.2
    - 30.0.3
    - 31.0.0
    - 32.0.0
    - 32.1.0
    - 33.0.0
  System Images:
    - android-25 | Intel x86_64 Atom
    - android-25 | Google APIs ARM EABI v7a
    - android-28 | ARM 64 v8a
    - android-29 | ARM 64 v8a
    - android-29 | Google Play ARM 64 v8a
    - android-30 | Google APIs ARM 64 v8a
    - android-31 | Android TV ARM 64 v8a
    - android-32 | Desktop ARM 64 v8a
    - android-32 | Google APIs ARM 64 v8a
    - android-33 | Google Play ARM 64 v8a
    - android-34 | Google APIs ARM 64 v8a
    - android-34 | Google Play ARM 64 v8a
  Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8139111
Xcode:
  version: 15.0.1/15A507
  path: /usr/bin/xcodebuild
Languages:
Java:
  version: 15.0.6
  path: /Users/yulolimum/.asdf/shims/javac
Ruby:
  version: 3.2.2
  path: /Users/yulolimum/.asdf/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
  installed: 18.2.0
  wanted: 18.2.0
react-native:
  installed: 0.72.6
  wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Steps to Reproduce

Verify Device

Before we build the repro app, let's verify that your device is wide-gamut capable.

iOS:

• Have a relatively recent iOS device.
• Go to Safari and type in https://www.wide-gamut.com/
• The "DCI P3" checkbox should be checked.
• Click on the "Test" menu item.
• The red box image should have a visible "W".

Android:

• Not every new Android device support wide gamut, you'll have better luck with pixels and higher-end samsungs.
• Open chrome and go to chrome://flags.
• Search for "Force color profile".
• Select "Display P3".
• Restart Chrome and type in https://www.wide-gamut.com/
• The "DCI P3" checkbox should be checked.
• Click on the "Test" menu item.
• The red box image should have a visible "W".

---

Run Baseline App W/O Wide Gamut

1. Clone repo:

git clone [email protected]:yulolimum/tmp-p3-color-space-repro.git

2. Install deps:

yarn

• This should install node modules, gems, and pods for you.

3. Start metro server:

yarn start

4. Connect your physical iOS device and build the app (you may need to setup code-signing).

yarn ios --device

• Take some screenshots.

5. Connect your physical Android device and build the app

(cd android && ./gradlew clean)
yarn android

• Take some screenshots.
• Review logs via logcat:

adb logcat | grep "MainColorGamutCheck"

6. On Android, launch an alternative activity (DemoActivity) which loads in the wide-gamut image directly in the xml by-passing react-native.

(cd android && ./gradlew clean)
yarn android --main-activity DemoActivity

• Take some screenshots.
• Review logs via logcat:

adb logcat | grep "DemoColorGamutCheck"

7. Quick on-device observations:

• ✅ On iOS, the wide-gamut image should have a visible Android.
• ❌ On iOS, the red/green/blue view colors should look visibly dull compared to the wide-gamut image.
• ❌ On Android main-activity, the wide-gamut image should not render properly and colors should be a bit muted.
• ❌ On Android demo-activity, the wide-gamut image's Android logo should not be visible.

---

Run App W/ Method Swizzling (iOS) and Wide Gamut Color Mode (Android)

1. Clone/checkout the wide-gamut branch:

git clone -v wide-gamut [email protected]:yulolimum/tmp-p3-color-space-repro.git

2. Start metro server:

yarn start

3. Repeat steps from previous section.

4. Quick on-device observations:

• ✅ On iOS, the method overrides seem to take effect.
• ✅ On Android both activities, the logcat logs show wide-gamut support.
• ❌ On Android main-activity, no visible change.
• ✅ On Android demo-activity, wide-gamut is observed.

---

Compare Screenshots

1. Transfer the screenshots to your computer.

   • Be mindful of how you transfer photos - some methods will compress and/or strip metadata.
   • Airdrop on iOS and adb pull on Android has been most reliable.

2. Download and use the Pika app to compare the colors from the screenshots (baseline screenshots vs wide-gamut screenshots). Note: you will need a P3 capable display to perform this action.

Snack, screenshot, or link to a repository

Repo: https://github.com/yulolimum/tmp-p3-color-space-repro
Issue within repo: yulolimum/tmp-p3-color-space-repro#1

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.