fix(#203): RTL issues

2026-01-09 13:38:01 -05:00 · 2023-01-20 15:46:07 +08:00
parent 226ad91a45
commit 26de1b4cb0
13 changed files with 52 additions and 30 deletions
--- a/components/EditableListItem.tsx
+++ b/components/EditableListItem.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dimensions } from 'react-native';
+import { Dimensions, I18nManager } from 'react-native';
 import { ListItem, Overlay, Input } from 'react-native-elements';
 import { Text, Column, Row, Button } from './ui';
 import { Theme } from './ui/styleUtils';
@@ -24,7 +24,14 @@ export const EditableListItem: React.FC<EditableListItemProps> = (props) => {
        onBackdropPress={dismiss}>
        <Column width={Dimensions.get('screen').width * 0.8}>
          <Text>{t('editLabel', { label: props.label })}</Text>
-          <Input autoFocus value={newValue} onChangeText={setNewValue} />
+          <Input
+            autoFocus
+            value={newValue}
+            onChangeText={setNewValue}
+            inputStyle={{
+              textAlign: I18nManager.isRTL ? 'right' : 'left',
+            }}
+          />
          <Row>
            <Button fill type="clear" title={t('cancel')} onPress={dismiss} />
            <Button fill title={t('save')} onPress={edit} />
--- a/components/SingleVcItem.tsx
+++ b/components/SingleVcItem.tsx
@@ -75,7 +75,7 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
  }
  return (
    <Column>
-      <Text color={Theme.Colors.DetailsLabel} size="smaller" align="left">
+      <Text color={Theme.Colors.DetailsLabel} size="smaller">
        {arg1}
      </Text>
      <Text
--- a/components/VcDetails.tsx
+++ b/components/VcDetails.tsx
@@ -43,8 +43,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
            <Text
              weight="bold"
              size="smaller"
-              color={Theme.Colors.DetailsLabel}
-              align="left">
+              color={Theme.Colors.DetailsLabel}>
              {t('idType')}
            </Text>
            <Text weight="bold" size="smaller" color={Theme.Colors.Details}>
@@ -69,14 +68,12 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
              <Text
                weight="bold"
                size="smaller"
-                align="left"
                color={Theme.Colors.DetailsLabel}>
                {t('fullName')}
              </Text>
              <Text
                weight="semibold"
                size="smaller"
-                align="left"
                color={Theme.Colors.Details}>
                {getLocalizedField(
                  props.vc?.verifiableCredential.credentialSubject.fullName
@@ -144,7 +141,6 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                <Text
                  weight="semibold"
                  size="smaller"
-                  align="left"
                  color={Theme.Colors.Details}>
                  {t('valid')}
                </Text>
@@ -222,8 +218,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                  }
                  weight="semibold"
                  size="smaller"
-                  color={Theme.Colors.Details}
-                  align="left">
+                  color={Theme.Colors.Details}>
                  {getLocalizedField(
                    props.vc?.verifiableCredential.credentialSubject.email
                  )}
@@ -243,8 +238,7 @@ export const VcDetails: React.FC<VcDetailsProps> = (props) => {
                  style={{ flex: 1 }}
                  weight="semibold"
                  size="smaller"
-                  color={Theme.Colors.Details}
-                  align="left">
+                  color={Theme.Colors.Details}>
                  {getFullAddress(
                    props.vc?.verifiableCredential.credentialSubject
                  )}
--- a/components/VcItem.tsx
+++ b/components/VcItem.tsx
@@ -37,7 +37,6 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
        <Text
          weight="bold"
          size="smaller"
-          align="left"
          color={
            !verifiableCredential
              ? Theme.Colors.LoadingDetailsLabel
@@ -72,8 +71,7 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
              : Theme.Colors.DetailsLabel
          }
          weight="bold"
-          size="smaller"
-          align="left">
+          size="smaller">
          {arg1}
        </Text>
        <Text
@@ -81,7 +79,6 @@ const getDetails = (arg1, arg2, verifiableCredential) => {
          color={Theme.Colors.Details}
          weight="bold"
          size="smaller"
-          align="left"
          style={
            !verifiableCredential
              ? Theme.Styles.loadingTitle
@@ -151,8 +148,7 @@ export const VcItem: React.FC<VcItemProps> = (props) => {
                  : Theme.Colors.DetailsLabel
              }
              weight="bold"
-              size="smaller"
-              align="left">
+              size="smaller">
              {t('idType')}
            </Text>
            <Text
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal as RNModal, View } from 'react-native';
+import { I18nManager, Modal as RNModal, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { Column, Row, Text } from '.';
 import { ElevationLevel, Theme } from './styleUtils';
@@ -23,7 +23,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
            }}>
            {props.headerRight ? (
              <Icon
-                name="chevron-left"
+                name={I18nManager.isRTL ? 'chevron-right' : 'chevron-left'}
                onPress={props.onDismiss}
                color={Theme.Colors.Icon}
              />
--- a/components/ui/Text.tsx
+++ b/components/ui/Text.tsx
@@ -9,7 +9,7 @@ export const Text: React.FC<TextProps> = (props: TextProps) => {
    Theme.TextStyles.base,
    Theme.TextStyles[weight],
    props.color ? { color: props.color } : null,
-    props.align ? { textAlign: props.align } : null,
+    props.align ? { textAlign: props.align } : { textAlign: 'left' },
    props.margin ? Theme.spacing('margin', props.margin) : null,
    props.size ? Theme.TextStyles[props.size] : null,
    props.style ? props.style : null,
--- a/components/ui/UpdatedModal.tsx
+++ b/components/ui/UpdatedModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal as RNModal } from 'react-native';
+import { I18nManager, Modal as RNModal } from 'react-native';
 import { Icon } from 'react-native-elements';
 import { Column, Row } from '.';
 import { Theme, ElevationLevel } from './styleUtils';
@@ -15,7 +15,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
        <Row padding="16 32" elevation={props.headerElevation}>
          {props.headerRight ? (
            <Icon
-              name="chevron-left"
+              name={I18nManager.isRTL ? 'chevron-right' : 'chevron-left'}
              onPress={props.onDismiss}
              color={Theme.Colors.Icon}
            />
--- a/locales/ara.json
+++ b/locales/ara.json
@@ -249,7 +249,7 @@
        },
        "rejected": {
          "title": "تنويه",
-          "message": "تم رفض {{vcLabel}} من قِبل {{Receiver}}"
+          "message": "تم رفض {{vcLabel}} من قِبل {{receiver}}"
        }
      },
      "consentToPhotoVerification": "أوافق على التقاط صورتي للمصادقة"
--- a/screens/Home/MyVcs/GetIdInputModal.tsx
+++ b/screens/Home/MyVcs/GetIdInputModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dimensions } from 'react-native';
+import { Dimensions, I18nManager } from 'react-native';
 import { Icon, Input, Tooltip } from 'react-native-elements';
 import { Button, Column, Row, Text } from '../../../components/ui';
 import { Modal } from '../../../components/ui/Modal';
@@ -39,6 +39,10 @@ export const GetIdInputModal: React.FC<GetIdInputModalProps> = (props) => {
                    color: controller.isInvalid
                      ? Theme.Colors.errorMessage
                      : Theme.Colors.textValue,
+                    textAlign: 'left',
+                  }}
+                  inputStyle={{
+                    textAlign: I18nManager.isRTL ? 'right' : 'left',
                  }}
                  style={Theme.Styles.placeholder}
                  value={controller.id}
--- a/screens/Home/MyVcs/IdInputModal.tsx
+++ b/screens/Home/MyVcs/IdInputModal.tsx
@@ -75,6 +75,7 @@ export const IdInputModal: React.FC<IdInputModalProps> = (props) => {
                    color: controller.isInvalid
                      ? Theme.Colors.errorMessage
                      : Theme.Colors.textValue,
+                    textAlign: 'left',
                  }}
                  inputStyle={{
                    textAlign: I18nManager.isRTL ? 'right' : 'left',
--- a/screens/Profile/Credits.tsx
+++ b/screens/Profile/Credits.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Markdown from 'react-native-simple-markdown';
 import { useTranslation } from 'react-i18next';
-import { Image, SafeAreaView, View } from 'react-native';
+import { I18nManager, Image, SafeAreaView, View } from 'react-native';
 import { Divider, Icon, ListItem, Overlay } from 'react-native-elements';

 import { Button, Text, Row, Column } from '../../components/ui';
@@ -62,7 +62,14 @@ export const Credits: React.FC<CreditsProps> = (props) => {
              <View style={Theme.CreditsStyles.buttonContainer}>
                <Button
                  type="clear"
-                  icon={<Icon name="chevron-left" color={Theme.Colors.Icon} />}
+                  icon={
+                    <Icon
+                      name={
+                        I18nManager.isRTL ? 'chevron-right' : 'chevron-left'
+                      }
+                      color={Theme.Colors.Icon}
+                    />
+                  }
                  title=""
                  onPress={() => setIsViewing(false)}
                />
--- a/screens/Profile/Revoke.tsx
+++ b/screens/Profile/Revoke.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { Dimensions, RefreshControl, SafeAreaView, View } from 'react-native';
+import {
+  Dimensions,
+  I18nManager,
+  RefreshControl,
+  SafeAreaView,
+  View,
+} from 'react-native';
 import { Divider, Icon, ListItem, Overlay } from 'react-native-elements';
 import { Button, Column, Centered, Row, Text } from '../../components/ui';
 import { VidItem } from '../../components/VidItem';
@@ -33,7 +39,14 @@ export const Revoke: React.FC<RevokeScreenProps> = (props) => {
              <View style={Theme.RevokeStyles.buttonContainer}>
                <Button
                  type="clear"
-                  icon={<Icon name="chevron-left" color={Theme.Colors.Icon} />}
+                  icon={
+                    <Icon
+                      name={
+                        I18nManager.isRTL ? 'chevron-right' : 'chevron-left'
+                      }
+                      color={Theme.Colors.Icon}
+                    />
+                  }
                  title=""
                  onPress={() => controller.setIsViewing(false)}
                />
--- a/screens/Request/RequestScreen.tsx
+++ b/screens/Request/RequestScreen.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
 import { Switch } from 'react-native-elements';
-import { Platform } from 'react-native';
+import { I18nManager, Platform } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';

 import { Centered, Button, Row, Column, Text } from '../../components/ui';