Commit Graph
1 Commits
Author SHA1 Message Date
hexboy 9a3958a619 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: https://github.com/facebook/react-native/pull/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
2024-10-31 01:32:39 -07:00