fix(Android, iOS): Fix AnsiHighlight Style in RTL Layout (#47230)

Summary: This pull request fixes a style bug in the AnsiHighlight component when the application is in Right-To-Left (RTL) mode. The adjustments ensure that text highlighting is visually consistent and functions properly across all layout modes. ### Before | Android RTL | iOS RTL | Android LTR | iOS LTR | |----------|----------|----------|----------| | ![Before-RTL-Android](https://github.com/user-attachments/assets/059e30e7-f6da-4a07-9c91-08d952c6a4b6) | ![Before-RTL-iOS](https://github.com/user-attachments/assets/a325c838-1510-4415-bd1f-c419ce75e7e2) | ![Before-LTR-Android](https://github.com/user-attachments/assets/26494fb1-71dd-4fae-a75c-381eead211de) | ![Before-LTR-iOS](https://github.com/user-attachments/assets/72bba2d8-f70f-4e16-b771-4af995370d26) | ### After | Android RTL | iOS RTL | Android LTR | iOS LTR | |----------|----------|----------|----------| | ![After-RTL-Android](https://github.com/user-attachments/assets/d2f674c2-7aec-454f-903a-33fcd3e93240) | ![After-RTL-iOS](https://github.com/user-attachments/assets/e3735e79-7323-48e8-8213-f0871bec0ca5) | ![After-LTR-Android](https://github.com/user-attachments/assets/18c80754-8743-4282-8f95-1e9772d51a36) | ![After-LTR-iOS](https://github.com/user-attachments/assets/068f4bd8-df4e-420b-8949-c20dff9c2bc8) | ## Changelog: [GENERAL] [Fixed] - AnsiHighlight style in RTL layout <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #47230 Test Plan: To test the changes, open LogBox while the app is in RTL mode. The modifications ensure that any error messages display correctly. I have verified that the changes function properly in both LTR and RTL modes, and all existing functionality remains unaffected. This is an example component to throw an error to show LogBox. ```tsx import React from 'react'; import {Alert, Button, I18nManager, StyleSheet, Text, View} from 'react-native'; function SampleError() { return ( <View> <Button title="Change to RTL" onPress={() => { I18nManager.allowRTL(true); I18nManager.forceRTL(true); Alert.alert('Restart app to apply changes'); }} /> <Button title="Change to LTR" onPress={() => { I18nManager.allowRTL(false); I18nManager.forceRTL(false); Alert.alert('Restart app to apply changes'); }} /> <Text style={styles.text}> isRTL: {I18nManager.isRTL ? 'true' : 'false'} </Text> <Button title="Show Error" onPress={() => { console.error('sample خطا'); }} /> </View> ); } const styles = StyleSheet.create({ text: { fontSize: 24, textAlign: 'center', paddingVertical: 20, }, }); export default SampleError; ``` Reviewed By: sammy-SC Differential Revision: D65145991 Pulled By: NickGerleman fbshipit-source-id: cbca106813e587ed223be48b75ee5279072c2da0
facebook · Oct 31, 2024 · 9a3958a · 9a3958a
1 parent 4d90f84
commit 9a3958a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js b/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js
@@ -37,6 +37,8 @@ const COLORS = {
   'ansi-bright-white': 'rgb(247, 247, 247)',
 };
 
+const LRM = '\u200E'; // Left-to-Right Mark
+
 export default function Ansi({
   text,
   style,
@@ -80,32 +82,39 @@ export default function Ansi({
   };
 
   return (
-    <View>
+    <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          {items.map((bundle, key) => {
-            const textStyle =
-              bundle.fg && COLORS[bundle.fg]
-                ? {
-                    backgroundColor: bundle.bg && COLORS[bundle.bg],
-                    color: bundle.fg && COLORS[bundle.fg],
-                  }
-                : {
-                    backgroundColor: bundle.bg && COLORS[bundle.bg],
-                  };
-            return (
-              <Text style={[style, textStyle]} key={key}>
-                {getText(bundle.content, key)}
-              </Text>
-            );
-          })}
+          <Text>
+            {LRM}
+            {items.map((bundle, key) => {
+              const textStyle =
+                bundle.fg && COLORS[bundle.fg]
+                  ? {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                      color: bundle.fg && COLORS[bundle.fg],
+                    }
+                  : {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                    };
+              return (
+                <Text style={[style, textStyle]} key={key}>
+                  {getText(bundle.content, key)}
+                </Text>
+              );
+            })}
+          </Text>
         </View>
       ))}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    minWidth: '100%',
+    direction: 'ltr',
+  },
   line: {
     flexDirection: 'row',
   },

diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js
@@ -59,7 +59,9 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
     <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
-          <ScrollView horizontal>
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.contentContainer}>
             <AnsiHighlight style={styles.content} text={codeFrame.content} />
           </ScrollView>
         </View>
@@ -138,6 +140,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,

diff --git a/...-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap b/...-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap
@@ -26,6 +26,11 @@ exports[`LogBoxInspectorCodeFrame should render a code frame 1`] = `
       }
     >
       <ScrollView
+        contentContainerStyle={
+          Object {
+            "minWidth": "100%",
+          }
+        }
         horizontal={true}
       >
         <Ansi
@@ -108,6 +113,11 @@ exports[`LogBoxInspectorCodeFrame should render a code frame without a location
       }
     >
       <ScrollView
+        contentContainerStyle={
+          Object {
+            "minWidth": "100%",
+          }
+        }
         horizontal={true}
       >
         <Ansi