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

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>;