chore: update rtl text align props

Author: bang9

packages/uikit-react-native-foundation/src/components/Text/index.tsx

@@ -5,16 +5,24 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import type { TypoName, UIKitTheme } from '../../types';
 import { isStartsWithRTL } from './isStartsWithRTL';
 
+export interface RTLTextAlignSupportProps {
+  /**
+   * If `I18nManager.isRTL` is `true` and this value is enabled, the text will be aligned according to RTL if it starts in an RTL language.
+   * In the case of the `Text` component, the alignment value is calculated based on `I18nManager.doLeftAndRightSwapInRTL`.
+   * For the `TextInput` component, the alignment value is calculated as a physical alignment, unaffected by `I18nManager.doLeftAndRightSwapInRTL`.
+   */
+  supportRTLAlign?: boolean;
+  /**
+   * If you want to enable `supportRTLAlign` but are using nested `Text` components that are not simple text under the `Text` component, pass the original text here.
+   */
+  originalText?: string;
+}
+
 type TypographyProps = Partial<Record<TypoName, boolean>>;
 export type TextProps = RNTextProps &
-  TypographyProps & {
-    color?: ((colors: UIKitTheme['colors']) => string) | string;
-  } & {
-    supportRTLAlign?: boolean;
-    originalText?: string;
-  };
+  TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string } & RTLTextAlignSupportProps;
 
-const Text = ({ children, color, style, supportRTLAlign, originalText, ...props }: TextProps) => {
+const Text = ({ children, color, style, supportRTLAlign = true, originalText, ...props }: TextProps) => {
   const { colors } = useUIKitTheme();
   const typoStyle = useTypographyFilter(props);
 
@@ -26,7 +34,10 @@ const Text = ({ children, color, style, supportRTLAlign, originalText, ...props
 
   const textAlign = (() => {
     if (I18nManager.isRTL && supportRTLAlign) {
-      if (originalText && isStartsWithRTL(originalText)) {
+      if (
+        (originalText && isStartsWithRTL(originalText)) ||
+        (typeof children === 'string' && isStartsWithRTL(children))
+      ) {
         return I18nManager.doLeftAndRightSwapInRTL ? 'left' : 'right';
       }
     }

packages/uikit-react-native-foundation/src/components/TextInput/index.tsx

@@ -4,13 +4,13 @@ import { I18nManager, TextInput as RNTextInput, StyleSheet, TextInputProps, Text
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import type { UIKitTheme } from '../../types';
+import { RTLTextAlignSupportProps } from '../Text';
 import { isStartsWithRTL } from '../Text/isStartsWithRTL';
 
 type Props = {
   variant?: keyof UIKitTheme['colors']['ui']['input'];
-  originalText?: string;
-  supportRTLAlign?: boolean;
-} & TextInputProps;
+} & TextInputProps &
+  RTLTextAlignSupportProps;
 const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
   { children, style, variant = 'default', editable = true, originalText, supportRTLAlign, ...props },
   ref,