Diseños RTL

npx expo install expo-localization expo-updates

// src/i18n/rtl.ts
import { I18nManager } from "react-native";
import * as Updates from "expo-updates";
import { getLocales } from "expo-localization";
 
const RTL_LANGS = new Set(["ar", "he", "fa", "ur"]);
 
export function isRtlLanguage(lang: string) {
  return RTL_LANGS.has(lang.split("-")[0]?.toLowerCase() ?? "");
}
 
export function readDeviceDirection() {
  return getLocales()[0]?.textDirection ?? "ltr";
}
 
export async function applyRtlForLanguage(lang: string) {
  const shouldRtl = isRtlLanguage(lang);
  if (I18nManager.isRTL === shouldRtl) return false;
 
  I18nManager.allowRTL(shouldRtl);
  I18nManager.forceRTL(shouldRtl);
  await Updates.reloadAsync();
  return true;
}

// Usa bordes lógicos en StyleSheet
const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center" },
  chip: { marginStart: 8, paddingStart: 12, paddingEnd: 12 },
});

import { getLocales } from "expo-localization";
import { isRtlLanguage } from "@/i18n/rtl";
 
export function shouldEnableRtl(lang?: string) {
  if (lang) return isRtlLanguage(lang);
  const [{ textDirection, languageCode }] = getLocales();
  return textDirection === "rtl" || isRtlLanguage(languageCode ?? "en");
}

// app/_layout.tsx (extracto)
import { useEffect, useState } from "react";
import { applyRtlForLanguage } from "@/i18n/rtl";
import { initI18n, getCurrentLanguage } from "@/i18n/i18n";
 
export default function RootLayout() {
  const [ready, setReady] = useState(false);
 
  useEffect(() => {
    void (async () => {
      await initI18n();
      const lang = getCurrentLanguage();
      const reloaded = await applyRtlForLanguage(lang);
      if (!reloaded) setReady(true);
    })();
  }, []);
 
  if (!ready) return null;
  return <Stack />;
}

import { StyleSheet, Text, View } from "react-native";
 
export function ListRow({ title, subtitle }: { title: string; subtitle: string }) {
  return (
    <View style={styles.row}>
      <View style={styles.textCol}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>
      <Text style={styles.chevron}>›</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingStart: 16,
    paddingEnd: 16,
  },
  textCol: { flex: 1, marginEnd: 8 },
  title: { fontSize: 16, textAlign: "left" }, // ver ejemplo 4
  subtitle: { fontSize: 13, color: "#6b7280" },
  chevron: { fontSize: 20 },
});

// Prefiere alineación consciente de la dirección de escritura
<Text style={{ textAlign: I18nManager.isRTL ? "right" : "left" }}>{title}</Text>
 
// Mejor: la alineación predeterminada sigue locale cuando es compatible
<Text style={styles.body}>{body}</Text>

import { I18nManager, StyleSheet } from "react-native";
 
const styles = StyleSheet.create({
  body: {
    textAlign: "auto" as "auto", // RN 0.86 - sigue la dirección de escritura
    writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
  },
});

import { I18nManager, Image, StyleSheet } from "react-native";
 
type Props = { source: number; mirrorInRtl?: boolean };
 
export function DirectionalIcon({ source, mirrorInRtl = true }: Props) {
  return (
    <Image
      source={source}
      style={[styles.icon, mirrorInRtl && I18nManager.isRTL && styles.mirror]}
    />
  );
}
 
const styles = StyleSheet.create({
  icon: { width: 24, height: 24 },
  mirror: { transform: [{ scaleX: -1 }] },
});

import { Pressable, Text } from "react-native";
import { router } from "expo-router";
import { useTranslation } from "react-i18next";
import { DirectionalIcon } from "@/components/DirectionalIcon";
 
export function BackButton() {
  const { t } = useTranslation("common");
  return (
    <Pressable
      onPress={() => router.back()}
      accessibilityRole="button"
      accessibilityLabel={t("actions.back")}
      style={{ flexDirection: "row", alignItems: "center" }}
    >
      <DirectionalIcon source={require("@/assets/chevron-back.png")} />
      <Text>{t("actions.back")}</Text>
    </Pressable>
  );
}

import { I18nManager } from "react-native";
 
I18nManager.isRTL; // dirección de diseño actual
I18nManager.allowRTL(true); // permite diseño RTL
I18nManager.forceRTL(true); // fuerza RTL incluso en dispositivo LTR (QA)
I18nManager.swapLeftAndRightInRTL; // intercambia propiedades left/right en RTL (ayudante heredado)

import { useWindowDimensions } from "react-native";
import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated";
import { I18nManager } from "react-native";
 
export function SlideInPanel({ open }: { open: boolean }) {
  const { width } = useWindowDimensions();
  const sign = I18nManager.isRTL ? -1 : 1;
 
  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: withTiming(open ? 0 : sign * width) },
    ],
  }));
 
  return <Animated.View style={[{ position: "absolute", top: 0, bottom: 0, width }, style]} />;
}

<Text style={{ writingDirection: "rtl" }}>
  رقم الطلب: <Text style={{ writingDirection: "ltr" }}>#A-1042</Text>
</Text>

export function RtlChecklistScreen() {
  const { t, i18n } = useTranslation("common");
  return (
    <View style={{ padding: 16 }}>
      <Text accessibilityRole="header">{t("rtl.checklist_title")}</Text>
      <Text>• {t("rtl.logical_margins")}</Text>
      <Text>• {t("rtl.mirrored_chevrons")}</Text>
      <Text>• {t("rtl.reload_after_switch")}</Text>
      <Text>Lang: {i18n.language} - RTL: {String(I18nManager.isRTL)}</Text>
    </View>
  );
}

Lista de verificación de envío RTL:
 
✓ I18nManager alineado con idioma de app en inicio
✓ No marginLeft/paddingRight en estilos de característica (auditoría grep)
✓ Iconos direccionales reflejados; logos sin tocar
✓ Asequibilidad de navegación atrás probada en dispositivo árabe
✓ Configuración advierte sobre breve recarga en cambio de idioma
✓ Revisión de pseudolocale + captura de pantalla de traducción más larga