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

Bắt đầu với repository tmp-p3-color-space-repro được liên kết và so sánh baseline của repository này với wide-gamut branch. Chạy các bước tái hiện trên iOS và Android, kiểm tra hành vi của MainActivity và DemoActivity cùng các kiểm tra logcat được trích dẫn, rồi so sánh ảnh chụp màn hình. Công việc được xem là hoàn tất khi React Native render hình ảnh wide-gamut và màu sắc nhất quán trên các thiết bị iOS và Android được hỗ trợ.