Skip to content

Commit

Permalink
Fix RTL examples in dark mode (#48719)
Browse files Browse the repository at this point in the history 
Summary:
RTL examples are not visible in dark mode.

## Changelog:

[INTERNAL] - Fix RTL examples in dark mode

Pull Request resolved: #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
  • Loading branch information
@mateoguzmana @facebook-github-bot
mateoguzmana authored and facebook-github-bot committed Jan 16, 2025
1 parent c720000 commit 9f1236e
Showing 1 changed file with 65 additions and 64 deletions.
129 changes: 65 additions & 64 deletions packages/rn-tester/js/examples/RTL/RTLExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@

'use strict';

const React = require('react');
const {
import RNTexterText from '../../components/RNTesterText';
import React from 'react';
import {
Alert,
Animated,
Button,
Expand All @@ -25,7 +26,7 @@ const {
TextInput,
TouchableWithoutFeedback,
View,
} = require('react-native');
} from 'react-native';

type RTLToggleState = {isRTL: boolean, ...};

Expand All @@ -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}>
Expand All @@ -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>
);
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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={{
Expand All @@ -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={{
Expand All @@ -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={{
Expand All @@ -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={{
Expand All @@ -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={{
Expand Down

0 comments on commit 9f1236e

Please sign in to comment.