P3 Color Space Issue

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 git@github.com: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 git@github.com: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: https://github.com/yulolimum/tmp-p3-color-space-repro/issues/1

Inizia dal repository tmp-p3-color-space-repro collegato e confronta la sua baseline con il wide-gamut branch. Esegui i passaggi per riprodurre il problema su iOS e Android, analizza il comportamento di MainActivity e DemoActivity e i controlli logcat citati, quindi confronta gli screenshot. Il lavoro è completo quando React Native esegue il rendering dell’immagine wide-gamut e dei colori in modo coerente sui dispositivi iOS e Android supportati.