Repository: react-native
Issue: P3 Color Space Issue
Labels: p: Infinite Red,Needs: Triage :mag:,Needs: Repro,Newer Patch Available,Never gets stale

### 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: 
  ```bash
  git clone git@github.com:yulolimum/tmp-p3-color-space-repro.git
  ```
  
2. Install deps:
  ```bash
  yarn
  ```
  - This should install node modules, gems, and pods for you.
  
3. Start metro server:
  ```bash
  yarn start
  ```
  
4. Connect your physical iOS device and build the app (you may need to setup code-signing).
  ```bash
  yarn ios --device
  ```
  - Take some screenshots.
  
5. Connect your physical Android device and build the app
  ```bash
  (cd android && ./gradlew clean)
  yarn android
  ```
  - Take some screenshots.
  - Review logs via logcat:
  ```bash
  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.
  ```bash
  (cd android && ./gradlew clean)
  yarn android --main-activity DemoActivity
  ```
  - Take some screenshots.
  - Review logs via logcat:
  ```bash
  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:
```bash
git clone -v wide-gamut git@github.com:yulolimum/tmp-p3-color-space-repro.git
```

2. Start metro server:
  ```bash
  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](https://superhighfives.com/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