Fix RTL examples in dark mode (#48719)

Summary:
RTL examples are not visible in dark mode.

## Changelog:

[INTERNAL] - Fix RTL examples in dark mode

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

Test Plan:
<details>
<summary>Before and after screenshots</summary>

| Before                                                                                     | After                                                                                     |
|--------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|
| ![Screenshot_1737000292](https://github.com/user-attachments/assets/4f36c5d3-ea51-4e9a-a962-b6cafbeb82da) | ![Screenshot_1737000381](https://github.com/user-attachments/assets/42f87100-6452-465b-b1de-e5dd26542459) |
</details>

Reviewed By: Abbondanzo

Differential Revision: D68265351

Pulled By: rshest

fbshipit-source-id: c4abcc3d11240c77248475ee34fbe4f5196e7834

packages/rn-tester/js/examples/RTL/RTLExample.js

@@ -10,8 +10,9 @@
 
 'use strict';
 
-const React = require('react');
-const {
+import RNTexterText from '../../components/RNTesterText';
+import React from 'react';
+import {
   Alert,
   Animated,
   Button,
@@ -25,7 +26,7 @@ const {
   TextInput,
   TouchableWithoutFeedback,
   View,
-} = require('react-native');
+} from 'react-native';
 
 type RTLToggleState = {isRTL: boolean, ...};
 
@@ -50,7 +51,7 @@ function ListItem(props: {imageSource: number}) {
       </View>
       <View style={styles.column2}>
         <View style={styles.textBox}>
-          <Text>Text Text Text</Text>
+          <RNTexterText>Text Text Text</RNTexterText>
         </View>
       </View>
       <View style={styles.column3}>
@@ -67,20 +68,20 @@ const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => {
     <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
       <View style={directionStyle(isRTL)}>
-        <Text style={props.style}>
+        <RNTexterText style={props.style}>
           Left-to-Right language without text alignment.
-        </Text>
-        <Text style={props.style}>
+        </RNTexterText>
+        <RNTexterText style={props.style}>
           {'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
             '\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
             '\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
             '\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
-        </Text>
-        <Text style={props.style}>
+        </RNTexterText>
+        <RNTexterText style={props.style}>
           {'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
             '\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
             '\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
-        </Text>
+        </RNTexterText>
       </View>
     </View>
   );
@@ -91,7 +92,7 @@ const TextInputExample = withRTLState(({isRTL, setRTL, ...props}) => {
     <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
       <View style={directionStyle(isRTL)}>
-        <Text style={props.style}>LRT or RTL TextInput.</Text>
+        <RNTexterText style={props.style}>LRT or RTL TextInput.</RNTexterText>
         <TextInput style={props.style} />
       </View>
     </View>
@@ -108,18 +109,18 @@ const IconsExample = withRTLState(({isRTL, setRTL}) => {
             source={require('../../assets/like.png')}
             style={styles.image}
           />
-          <Text style={styles.fontSizeExtraSmall}>
+          <RNTexterText style={styles.fontSizeExtraSmall}>
             Without directional meaning
-          </Text>
+          </RNTexterText>
         </View>
         <View style={styles.rightAlignStyle}>
           <Image
             source={require('../../assets/poke.png')}
             style={[styles.image, styles.withRTLStyle]}
           />
-          <Text style={styles.fontSizeExtraSmall}>
+          <RNTexterText style={styles.fontSizeExtraSmall}>
             With directional meaning
-          </Text>
+          </RNTexterText>
         </View>
       </View>
     </View>
@@ -215,7 +216,7 @@ class RTLToggleExample extends React.Component<any, RTLToggleState> {
           </Text>
         </View>
         <View style={styles.flexDirectionRow}>
-          <Text style={styles.switchRowTextView}>forceRTL</Text>
+          <RNTexterText style={styles.switchRowTextView}>forceRTL</RNTexterText>
           <View style={styles.switchRowSwitchView}>
             <Switch
               onValueChange={this._onDirectionChange}
@@ -315,12 +316,12 @@ const PaddingExample = withRTLState(({isRTL, setRTL}) => {
 
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>paddingStart: 50,</Text>
-      <Text>paddingEnd: 10</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>paddingStart: 50,</RNTexterText>
+      <RNTexterText>paddingEnd: 10</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
-      <Text>The {color} is padding.</Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
+      <RNTexterText>The {color} is padding.</RNTexterText>
       <View
         style={{
           backgroundColor: color,
@@ -349,12 +350,12 @@ const PaddingExample = withRTLState(({isRTL, setRTL}) => {
 const MarginExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>marginStart: 50,</Text>
-      <Text>marginEnd: 10</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>marginStart: 50,</RNTexterText>
+      <RNTexterText>marginEnd: 10</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
-      <Text>The green is margin.</Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
+      <RNTexterText>The green is margin.</RNTexterText>
       <View
         style={{
           backgroundColor: 'green',
@@ -383,11 +384,11 @@ const MarginExample = withRTLState(({isRTL, setRTL}) => {
 const PositionExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>start: 50</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>start: 50</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
-      <Text>The orange is position.</Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
+      <RNTexterText>The orange is position.</RNTexterText>
       <View
         style={{
           backgroundColor: 'orange',
@@ -405,11 +406,11 @@ const PositionExample = withRTLState(({isRTL, setRTL}) => {
         </View>
       </View>
       <Text />
-      <Text style={styles.bold}>Styles</Text>
-      <Text>end: 50</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>end: 50</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
-      <Text>The orange is position.</Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
+      <RNTexterText>The orange is position.</RNTexterText>
       <View
         style={{
           backgroundColor: 'orange',
@@ -433,11 +434,11 @@ const PositionExample = withRTLState(({isRTL, setRTL}) => {
 const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>borderStartWidth: 10,</Text>
-      <Text>borderEndWidth: 50</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>borderStartWidth: 10,</RNTexterText>
+      <RNTexterText>borderEndWidth: 50</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
       <View style={directionStyle(isRTL)}>
         <View
           style={{
@@ -456,11 +457,11 @@ const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
 const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>borderStartColor: 'red',</Text>
-      <Text>borderEndColor: 'green',</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>borderStartColor: 'red',</RNTexterText>
+      <RNTexterText>borderEndColor: 'green',</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
       <View style={directionStyle(isRTL)}>
         <View
           style={{
@@ -482,13 +483,13 @@ const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
 const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>borderTopStartRadius: 10,</Text>
-      <Text>borderTopEndRadius: 20,</Text>
-      <Text>borderBottomStartRadius: 30,</Text>
-      <Text>borderBottomEndRadius: 40</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>borderTopStartRadius: 10,</RNTexterText>
+      <RNTexterText>borderTopEndRadius: 20,</RNTexterText>
+      <RNTexterText>borderBottomStartRadius: 30,</RNTexterText>
+      <RNTexterText>borderBottomEndRadius: 40</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
       <View style={directionStyle(isRTL)}>
         <View
           style={{
@@ -511,13 +512,13 @@ const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
 const LogicalBorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>borderStartStartRadius: 10,</Text>
-      <Text>borderStartEndRadius: 20,</Text>
-      <Text>borderEndStartRadius: 30,</Text>
-      <Text>borderEndEndRadius: 40</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>borderStartStartRadius: 10,</RNTexterText>
+      <RNTexterText>borderStartEndRadius: 20,</RNTexterText>
+      <RNTexterText>borderEndStartRadius: 30,</RNTexterText>
+      <RNTexterText>borderEndEndRadius: 40</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
       <View style={directionStyle(isRTL)}>
         <View
           style={{
@@ -540,17 +541,17 @@ const LogicalBorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
 const BorderExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
-      <Text style={styles.bold}>Styles</Text>
-      <Text>borderStartColor: 'red',</Text>
-      <Text>borderEndColor: 'green',</Text>
-      <Text>borderStartWidth: 10,</Text>
-      <Text>borderEndWidth: 50,</Text>
-      <Text>borderTopStartRadius: 10,</Text>
-      <Text>borderTopEndRadius: 20,</Text>
-      <Text>borderBottomStartRadius: 30,</Text>
-      <Text>borderBottomEndRadius: 40</Text>
+      <RNTexterText style={styles.bold}>Styles</RNTexterText>
+      <RNTexterText>borderStartColor: 'red',</RNTexterText>
+      <RNTexterText>borderEndColor: 'green',</RNTexterText>
+      <RNTexterText>borderStartWidth: 10,</RNTexterText>
+      <RNTexterText>borderEndWidth: 50,</RNTexterText>
+      <RNTexterText>borderTopStartRadius: 10,</RNTexterText>
+      <RNTexterText>borderTopEndRadius: 20,</RNTexterText>
+      <RNTexterText>borderBottomStartRadius: 30,</RNTexterText>
+      <RNTexterText>borderBottomEndRadius: 40</RNTexterText>
       <Text />
-      <Text style={styles.bold}>Demo: </Text>
+      <RNTexterText style={styles.bold}>Demo: </RNTexterText>
       <View style={directionStyle(isRTL)}>
         <View
           style={{