From 649af286c5d3d4f8b7d86b92f2fdbb486504cc2d Mon Sep 17 00:00:00 2001
From: Andrew Datsenko <asd@meta.com>
Date: Mon, 6 Oct 2025 09:19:11 -0700
Subject: [PATCH] Add Platform Color example (#53908)

Summary:

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
---
 .../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 9bc01fcd3af2..6cb4a94567d2 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>;