Fix rn-tester Animated example label color in dark mode (facebook#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: facebook#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
cortinico · Apr 17, 2024 · 297ae37 · 297ae37
1 parent e079953
commit 297ae37
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}