From 9f1236eff2c234dcd59a1a9f89f82fb0dca10be7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Thu, 16 Jan 2025 06:53:09 -0800 Subject: [PATCH] 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:
Before and after screenshots | 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) |
Reviewed By: Abbondanzo Differential Revision: D68265351 Pulled By: rshest fbshipit-source-id: c4abcc3d11240c77248475ee34fbe4f5196e7834 --- .../rn-tester/js/examples/RTL/RTLExample.js | 129 +++++++++--------- 1 file changed, 65 insertions(+), 64 deletions(-) diff --git a/packages/rn-tester/js/examples/RTL/RTLExample.js b/packages/rn-tester/js/examples/RTL/RTLExample.js index 962cef224d7306..702b489989d96a 100644 --- a/packages/rn-tester/js/examples/RTL/RTLExample.js +++ b/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}) { - Text Text Text + Text Text Text @@ -67,20 +68,20 @@ const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => { - + Left-to-Right language without text alignment. - - + + {'\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'} - - + + {'\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'} - + ); @@ -91,7 +92,7 @@ const TextInputExample = withRTLState(({isRTL, setRTL, ...props}) => { - LRT or RTL TextInput. + LRT or RTL TextInput. @@ -108,18 +109,18 @@ const IconsExample = withRTLState(({isRTL, setRTL}) => { source={require('../../assets/like.png')} style={styles.image} /> - + Without directional meaning - + - + With directional meaning - + @@ -215,7 +216,7 @@ class RTLToggleExample extends React.Component { - forceRTL + forceRTL { return ( - Styles - paddingStart: 50, - paddingEnd: 10 + Styles + paddingStart: 50, + paddingEnd: 10 - Demo: - The {color} is padding. + Demo: + The {color} is padding. { const MarginExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - marginStart: 50, - marginEnd: 10 + Styles + marginStart: 50, + marginEnd: 10 - Demo: - The green is margin. + Demo: + The green is margin. { const PositionExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - start: 50 + Styles + start: 50 - Demo: - The orange is position. + Demo: + The orange is position. { - Styles - end: 50 + Styles + end: 50 - Demo: - The orange is position. + Demo: + The orange is position. { const BorderWidthExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - borderStartWidth: 10, - borderEndWidth: 50 + Styles + borderStartWidth: 10, + borderEndWidth: 50 - Demo: + Demo: { const BorderColorExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - borderStartColor: 'red', - borderEndColor: 'green', + Styles + borderStartColor: 'red', + borderEndColor: 'green', - Demo: + Demo: { const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - borderTopStartRadius: 10, - borderTopEndRadius: 20, - borderBottomStartRadius: 30, - borderBottomEndRadius: 40 + Styles + borderTopStartRadius: 10, + borderTopEndRadius: 20, + borderBottomStartRadius: 30, + borderBottomEndRadius: 40 - Demo: + Demo: { const LogicalBorderRadiiExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - borderStartStartRadius: 10, - borderStartEndRadius: 20, - borderEndStartRadius: 30, - borderEndEndRadius: 40 + Styles + borderStartStartRadius: 10, + borderStartEndRadius: 20, + borderEndStartRadius: 30, + borderEndEndRadius: 40 - Demo: + Demo: { const BorderExample = withRTLState(({isRTL, setRTL}) => { return ( - Styles - borderStartColor: 'red', - borderEndColor: 'green', - borderStartWidth: 10, - borderEndWidth: 50, - borderTopStartRadius: 10, - borderTopEndRadius: 20, - borderBottomStartRadius: 30, - borderBottomEndRadius: 40 + Styles + borderStartColor: 'red', + borderEndColor: 'green', + borderStartWidth: 10, + borderEndWidth: 50, + borderTopStartRadius: 10, + borderTopEndRadius: 20, + borderBottomStartRadius: 30, + borderBottomEndRadius: 40 - Demo: + Demo: