From 297ae373677769cc499641f8a4aaa7ae2ae403b4 Mon Sep 17 00:00:00 2001
From: zhongwuzw <zhongwuzw@qq.com>
Date: Wed, 17 Apr 2024 08:21:38 -0700
Subject: [PATCH] Fix rn-tester Animated example label color in dark mode
 (#44127)

Summary:
Fix rn-tester Animated example label color in dark mode

## Changelog:

[INTERNAL] [FIXED] - Fix rn-tester Animated example label color in dark mode

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

Test Plan:
Animated examples render incorrectly in dark mode. So let's fix them. :)

![image](https://github.com/facebook/react-native/assets/5061845/ad882ee2-d156-4b24-8ddb-0ec27dc27cba)

Reviewed By: fabriziocucci

Differential Revision: D56234954

Pulled By: javache

fbshipit-source-id: 5fd8604077ced9aa3acd23a7dc9ebd8476a7330b
---
 packages/rn-tester/js/components/RNTOption.js      |  7 ++-----
 packages/rn-tester/js/components/RNTTestDetails.js |  8 ++++++--
 .../Animated/ComposeAnimationsWithEasingExample.js |  6 +++++-
 .../js/examples/Animated/ComposingExample.js       |  8 ++++++--
 .../Animated/ContinuousInteractionsExample.js      | 14 +++++++++++++-
 .../js/examples/Animated/EasingExample.js          |  7 ++++++-
 .../js/examples/Animated/TransformStylesExample.js |  8 ++++++--
 .../examples/Animated/utils/ToggleNativeDriver.js  |  4 +++-
 8 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/rn-tester/js/components/RNTOption.js b/packages/rn-tester/js/components/RNTOption.js
index 7d3d534277b248..0d92178524cc30 100644
--- a/packages/rn-tester/js/components/RNTOption.js
+++ b/packages/rn-tester/js/components/RNTOption.js
@@ -49,6 +49,7 @@ export default function RNTOption(props: Props): React.Node {
       testID={props.testID}>
       <View
         style={[
+          {borderColor: theme.BorderColor},
           styles.container,
           props.selected === true ? styles.selected : null,
           pressed && props.selected !== true ? styles.pressed : null,
@@ -60,7 +61,7 @@ export default function RNTOption(props: Props): React.Node {
             : null,
           props.style,
         ]}>
-        <Text style={styles.label}>{props.label}</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>{props.label}</Text>
       </View>
     </Pressable>
   );
@@ -70,16 +71,12 @@ const styles = StyleSheet.create({
   pressed: {
     backgroundColor: 'rgba(100,215,255,.3)',
   },
-  label: {
-    color: 'black',
-  },
   selected: {
     backgroundColor: 'rgba(100,215,255,.3)',
     borderColor: 'rgba(100,215,255,.3)',
   },
   disabled: {borderWidth: 0},
   container: {
-    borderColor: 'rgba(0,0,0, 0.1)',
     borderWidth: 1,
     borderRadius: 16,
     padding: 6,
diff --git a/packages/rn-tester/js/components/RNTTestDetails.js b/packages/rn-tester/js/components/RNTTestDetails.js
index 1b5d61e9bcb208..7ca2bf52069fb7 100644
--- a/packages/rn-tester/js/components/RNTTestDetails.js
+++ b/packages/rn-tester/js/components/RNTTestDetails.js
@@ -39,8 +39,12 @@ function RNTTestDetails({
       )}
       {expect == null ? null : (
         <View style={styles.section}>
-          <Text style={styles.heading}>Expectation</Text>
-          <Text style={styles.paragraph}>{expect}</Text>
+          <Text style={[styles.heading, {color: theme.LabelColor}]}>
+            Expectation
+          </Text>
+          <Text style={[styles.paragraph, {color: theme.LabelColor}]}>
+            {expect}
+          </Text>
         </View>
       )}
     </>
diff --git a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
index 35e7ba7dd0a350..413e0a450598eb 100644
--- a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
+++ b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
 
@@ -29,11 +30,14 @@ const styles = StyleSheet.create({
 
 function CompositeAnimationsWithEasingExample(): React.Node {
   const anims = [1, 2, 3].map(() => new Animated.Value(0));
+  const theme = React.useContext(RNTesterThemeContext);
 
   return (
     <View>
       <RNTConfigurationBlock>
-        <Text>Note you cannot `useNativeDriver` for layout properties.</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>
+          Note you cannot `useNativeDriver` for layout properties.
+        </Text>
       </RNTConfigurationBlock>
       <RNTesterButton
         onPress={() => {
diff --git a/packages/rn-tester/js/examples/Animated/ComposingExample.js b/packages/rn-tester/js/examples/Animated/ComposingExample.js
index 8e90e4a29ff0c8..3a9080e3439e32 100644
--- a/packages/rn-tester/js/examples/Animated/ComposingExample.js
+++ b/packages/rn-tester/js/examples/Animated/ComposingExample.js
@@ -14,6 +14,7 @@ import type AnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedVa
 
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import ToggleNativeDriver from './utils/ToggleNativeDriver';
 import * as React from 'react';
 import {
@@ -152,11 +153,14 @@ function ComposingExampleItem({
   const animation = React.useRef(
     compositeAnimation(xTranslations.current, useNativeDriver),
   );
+  const theme = React.useContext(RNTesterThemeContext);
 
   return (
     <View style={styles.itemContainer}>
-      <Text style={styles.itemTitle}>{title}</Text>
-      <Text>{description}</Text>
+      <Text style={[styles.itemTitle, {color: theme.SecondaryLabelColor}]}>
+        {title}
+      </Text>
+      <Text style={{color: theme.SecondaryLabelColor}}>{description}</Text>
       <View style={styles.boxesContainer}>
         {boxIndexes.map(boxIndex => {
           const translateX = xTranslations.current[boxIndex].interpolate({
diff --git a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js
index 6514bf8af5f0d5..e176011dca51a2 100644
--- a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js
+++ b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js
@@ -10,14 +10,26 @@
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {Text} from 'react-native';
 
+function AnimatedContinuousInteractionsExample(): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
+  return (
+    <Text style={{color: theme.SecondaryLabelColor}}>
+      Checkout the Gratuitous Animation App!
+    </Text>
+  );
+}
+
 export default ({
   title: 'Continuous Interactions',
   name: 'continuousInteractions',
   description: ('Gesture events, chaining, 2D ' +
     'values, interrupting and transitioning ' +
     'animations, etc.': string),
-  render: (): React.Node => <Text>Checkout the Gratuitous Animation App!</Text>,
+  render(): React.Element<typeof AnimatedContinuousInteractionsExample> {
+    return <AnimatedContinuousInteractionsExample />;
+  },
 }: RNTesterModuleExample);
diff --git a/packages/rn-tester/js/examples/Animated/EasingExample.js b/packages/rn-tester/js/examples/Animated/EasingExample.js
index 3a7995ca33f8e5..c4dd4a262065d8 100644
--- a/packages/rn-tester/js/examples/Animated/EasingExample.js
+++ b/packages/rn-tester/js/examples/Animated/EasingExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import ToggleNativeDriver from './utils/ToggleNativeDriver';
 import * as React from 'react';
 import {
@@ -103,10 +104,14 @@ function EasingItem({
     },
   ];
 
+  const theme = React.useContext(RNTesterThemeContext);
+
   return (
     <View style={styles.itemContainer}>
       <View style={styles.itemMeta}>
-        <Text style={styles.itemTitle}>{item.title}</Text>
+        <Text style={[styles.itemTitle, {color: theme.SecondaryLabelColor}]}>
+          {item.title}
+        </Text>
         <RNTesterButton
           onPress={() => {
             opacityAndScale.current.setValue(0);
diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
index f7db70b56d7e44..c107995c3b3697 100644
--- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
+++ b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
@@ -98,7 +98,9 @@ function AnimatedTransformStyleExample(): React.Node {
             borderBottomColor: theme.SeparatorColor,
           })}
         />
-        <Text style={styles.optionsTitle}>Selected Styles</Text>
+        <Text style={[styles.optionsTitle, {color: theme.SecondaryLabelColor}]}>
+          Selected Styles
+        </Text>
         <View style={styles.options}>
           {Object.keys(properties).map(property => {
             return (
@@ -125,7 +127,9 @@ function AnimatedTransformStyleExample(): React.Node {
         )}
       />
       <View style={styles.section}>
-        <Text>{'Should not crash when transform style key is undefined'}</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>
+          {'Should not crash when transform style key is undefined'}
+        </Text>
         <Animated.View style={[styles.animatedView, {transform: undefined}]} />
       </View>
     </View>
diff --git a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
index 2ec06cbf039356..e3d482cb45b9a9 100644
--- a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
+++ b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import {RNTesterThemeContext} from '../../../components/RNTesterTheme';
 import * as React from 'react';
 import {StyleSheet, Switch, Text, View} from 'react-native';
 
@@ -27,9 +28,10 @@ export default function ToggleNativeDriver({
   onValueChange,
   style,
 }: Props): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
   return (
     <View style={StyleSheet.compose(styles.row, style)}>
-      <Text>Use Native Driver</Text>
+      <Text style={{color: theme.SecondaryLabelColor}}>Use Native Driver</Text>
       <Switch
         testID="toggle-use-native-driver"
         onValueChange={onValueChange}