From 8ed0e1eba5227a87dfe140f53c44b02604f3e77a Mon Sep 17 00:00:00 2001
From: Andrew Datsenko <asd@meta.com>
Date: Mon, 6 Oct 2025 12:05:31 -0700
Subject: [PATCH] Add Platform Color example (#53908)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53908

Changelog: [Internal]
Add an example to show how Platform Color can react to changes in appearance.
This currently works on iOS for all colors, but for Android we need to "reset" desired tree with `key`.

Reviewed By: zeyap

Differential Revision: D82751014

fbshipit-source-id: 3e4b2b3ddff8c003ca835d6f26dbf9f7e82d413d
---
 .../PlatformColor/PlatformColorExample.js     | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
index 9bc01fcd3af..6cb4a94567d 100644
--- a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
+++ b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
@@ -14,11 +14,14 @@ import type {ColorValue} from 'react-native';
 import RNTesterText from '../../components/RNTesterText';
 import React from 'react';
 import {
+  Appearance,
+  Button,
   DynamicColorIOS,
   Platform,
   PlatformColor,
   StyleSheet,
   View,
+  useColorScheme,
 } from 'react-native';
 
 function PlatformColorsExample() {
@@ -315,6 +318,48 @@ function VariantColorsExample() {
   );
 }
 
+function ReactsToAppearanceChangesExample() {
+  const theme = useColorScheme();
+  const key = Platform.select({
+    android: theme ?? '',
+    default: undefined,
+  });
+
+  return (
+    // using a key here forces the component to unmount and remount
+    // which is necessary to trigger the appearance change
+    <View style={styles.column} key={key}>
+      <View style={styles.row}>
+        <RNTesterText style={styles.labelCell}>
+          {Platform.select({
+            ios: "DynamicColorIOS({light: 'red', dark: 'blue'})",
+            android: "PlatformColor('?attr/colorAccent')",
+            default: 'Unexpected Platform.OS: ' + Platform.OS,
+          })}
+        </RNTesterText>
+        <View
+          style={{
+            ...styles.colorCell,
+            backgroundColor:
+              Platform.OS === 'ios'
+                ? DynamicColorIOS({light: 'red', dark: 'blue'})
+                : Platform.OS === 'android'
+                  ? PlatformColor('?attr/colorAccent')
+                  : 'red',
+          }}
+        />
+      </View>
+      <View style={styles.separator} />
+      <Button
+        title="Change Appearance"
+        onPress={() => {
+          Appearance.setColorScheme(theme === 'dark' ? 'light' : 'dark');
+        }}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   column: {flex: 1, flexDirection: 'column'},
   row: {flex: 0.75, flexDirection: 'row'},
@@ -326,6 +371,7 @@ const styles = StyleSheet.create({
     }),
   },
   colorCell: {flex: 0.25, alignItems: 'stretch'},
+  separator: {height: 8},
 });
 
 exports.title = 'PlatformColor';
@@ -358,4 +404,10 @@ exports.examples = [
       return <VariantColorsExample />;
     },
   },
+  {
+    title: 'Reacts to Appearance Changes',
+    render(): React.MixedElement {
+      return <ReactsToAppearanceChangesExample />;
+    },
+  },
 ] as Array<RNTesterModuleExample>;