Layouts RTL

Q: Posso alternar RTL sem recarregar?

Não de forma confiável no RN 0.86. Planeje um reloadAsync ao cruzar LTR ↔ RTL. Pequenas alterações de string dentro da mesma direção não precisam de recarga.

Q: NativeWind/Tailwind suporta RTL?

Use utilitários lógicos ms-, me-, ps-, pe- onde disponíveis - veja NativeWind. Evite ml-/mr- físicos em componentes compartilhados.

Q: Como testo RTL no simulador?

Defina o idioma do dispositivo para árabe OU chame I18nManager.forceRTL(true) por trás de um sinalizador de menu de desenvolvimento, depois recarregue.

Regras de inversão do I18nManager e ícones espelhados. Idiomas da direita para a esquerda (árabe, hebraico, persa, urdu) exigem espelhamento de layout - não apenas strings traduzidas. O React Native inverte o flexbox e as bordas start/end quando o RTL é habilitado; você ainda é responsável por ícones, animações e preenchimento assimétrico.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

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;
}

// Use bordas lógicas em StyleSheet
const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center" },
  chip: { marginStart: 8, paddingStart: 12, paddingEnd: 12 },
});

Quando usar isso:

Lançando árabe ou hebraico (ou outros locais RTL)
expo-localization reporta textDirection: "rtl" - expo-localization
O usuário muda o idioma nas configurações - combine com i18next - i18next / react-i18next
QA reporta rótulos em hebraico/árabe truncados ou cortados - verifique também Fallback de Locale e Pseudolocale
Aplicativos white-label com regras de marca mistas RTL/LTR - Tematização e Sabores de Marca

Exemplo de Trabalho

1. Detectar RTL a partir do Locale

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");
}

Confie em textDirection primeiro - o SO conhece a direção do script
Mantenha RTL_LANGS para substituições de idioma do aplicativo que não correspondem ao locale do dispositivo
Chame durante a inicialização do i18n - Noções Básicas de i18n

2. Habilitar RTL na Inicialização

// app/_layout.tsx (trecho)
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 />;
}

Updates.reloadAsync aplica as alterações do I18nManager - o hot reload não é suficiente
Primeira inicialização em um dispositivo árabe: habilite RTL antes da primeira pintura significativa, quando possível
O Expo Go reflete o RTL após a recarga - teste também em builds de cliente de desenvolvimento

3. Estilos Lógicos: `start` / `end`

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" }, // veja exemplo 4
  subtitle: { fontSize: 13, color: "#6b7280" },
  chevron: { fontSize: 20 },
});

paddingStart / marginEnd invertem em RTL - paddingLeft não
flexDirection: "row" inverte a ordem dos filhos em RTL - frequentemente correto para linhas de lista
Audite cada left, right, marginLeft, borderLeftWidth na base de código com regras personalizadas do ESLint

4. Alinhamento de Texto

// Prefira alinhamento ciente da direção de escrita
<Text style={{ textAlign: I18nManager.isRTL ? "right" : "left" }}>{title}</Text>
 
// Melhor: alinhamento padrão segue o locale quando suportado
<Text style={styles.body}>{body}</Text>

import { I18nManager, StyleSheet } from "react-native";
 
const styles = StyleSheet.create({
  body: {
    textAlign: "auto" as "auto", // RN 0.86 - segue a direção de escrita
    writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
  },
});

textAlign: "auto" permite que o algoritmo bidi posicione strings mistas LTR/RTL
Números e e-mails incorporados em frases em árabe precisam de cuidado com unicode-bidi - mantenha tokens LTR em spans se ocorrer corte
Frases longas em alemão em LTR ainda truncam - QA de pseudolocale - Fallback de Locale e Pseudolocale

5. Ícones Espelhados

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 }] },
});

Asset	Espelhar em RTL?
Chevron de volta, seta para frente, seta de envio	Sim
Pesquisar, fechar (X), marca de seleção	Não
Reprodução de mídia (triângulo de play)	Não
Logos assimétricos, marcas da empresa	Não
Gráficos com tempo no eixo X	Frequentemente não - mantenha o eixo de tempo LTR

Use scaleX: -1 em Image - não arquivos de assets separados, a menos que o design exija
Barras de abas e posições de FAB invertem com row - verifique o alcance do polegar em dispositivos RTL

6. Botão Voltar de Navegação

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>
  );
}

Expo Router e React Navigation honram RTL para transições de pilha - ainda verifique a direção do gesto
accessibilityLabel deve ser traduzido - não "Back" codificado
Testes Detox devem usar testID - Detox E2E

7. Flags do `I18nManager` Explicadas

import { I18nManager } from "react-native";
 
I18nManager.isRTL; // direção atual do layout
I18nManager.allowRTL(true); // permitir layout RTL
I18nManager.forceRTL(true); // forçar RTL mesmo em dispositivo LTR (QA)
I18nManager.swapLeftAndRightInRTL; // troca props de estilo left/right em RTL (helper legado)

forceRTL(true) em dispositivo LTR - útil para QA sem alterar o idioma do SO
Não chame forceRTL a cada renderização - apenas quando o idioma muda
Documente que recarregamento é necessário na cópia das configurações quando o usuário escolhe árabe

8. Animações e Posição Absoluta

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]} />;
}

left: 0 absoluto ancora à esquerda visual - errado para drawers RTL ancorados na borda inicial
Prefira position: "absolute", start: 0 (props de layout RN) onde suportado
Valores compartilhados do Reanimated não sabem da direção - multiplique transformações por sign

9. Conteúdo Misto LTR em Telas RTL

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

IDs de pedido, números de telefone e URLs frequentemente permanecem LTR dentro de parágrafos RTL
Campos de cartão de crédito e OTP devem usar textAlign: "left" + direção LTR independentemente do locale do aplicativo
Não espelhe mapas - o norte geográfico permanece para cima

10. Tela de Checklist RTL

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>
  );
}

Checklist de lançamento RTL:
 
✓ I18nManager alinhado com o idioma do app na inicialização
✓ Sem marginLeft/paddingRight nos estilos de recursos (auditoria grep)
✓ Ícones direcionais espelhados; logos intocados
✓ Funcionalidade de voltar da navegação testada em dispositivo árabe
✓ Configurações avisam sobre recarga breve na mudança de idioma
✓ Revisão de screenshots de pseudolocale + tradução mais longa

Armadilhas

paddingLeft em tokens de design compartilhados - Quebra o site RTL inteiro. Correção: migre tokens para sufixos Start/End.
Esquecer a recarga após forceRTL - O layout permanece LTR até a reinicialização. Correção: Updates.reloadAsync().
Espelhar botões de play e mapas - Confuso e incorreto. Correção: mirrorInRtl={false} por asset.
Strings concatenadas - A gramática árabe difere; UI espelhada expõe ordem de palavras estranha. Correção: chaves de frase completa - Melhores Práticas de i18n.
Sabor de marca apenas LTR - Alguns locatários podem desabilitar RTL - documente em Tematização e Sabores de Marca.

FAQs

Posso alternar RTL sem recarregar?

Não de forma confiável no RN 0.86. Planeje um reloadAsync ao cruzar LTR ↔ RTL. Pequenas alterações de string dentro da mesma direção não precisam de recarga.

NativeWind/Tailwind suporta RTL?

Use utilitários lógicos ms-, me-, ps-, pe- onde disponíveis - veja NativeWind. Evite ml-/mr- físicos em componentes compartilhados.

Como testo RTL no simulador?

Defina o idioma do dispositivo para árabe OU chame I18nManager.forceRTL(true) por trás de um sinalizador de menu de desenvolvimento, depois recarregue.

Abas do Expo Router em RTL?

A ordem das abas espelha com RTL. Verifique se abas apenas com ícones ainda têm tabBarAccessibilityLabel traduzido.

Relacionados

expo-localization - textDirection do dispositivo
i18next / react-i18next - mudança de idioma + recarga
Noções Básicas de i18n - provedor de locale na raiz
Fallback de Locale e Pseudolocale - truncamento antes dos tradutores
../design-systems/theming-and-brand-flavors/theming-and-brand-flavors.md - política RTL por marca
../styling-layout/flexbox-deep-dive/flexbox-deep-dive.md - layout de linha/coluna
Melhores Práticas de i18n - resumo da seção

Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

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;
}

// Use bordas lógicas em StyleSheet
const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center" },
  chip: { marginStart: 8, paddingStart: 12, paddingEnd: 12 },
});

Quando usar isso:

Lançando árabe ou hebraico (ou outros locais RTL)
expo-localization reporta textDirection: "rtl" - expo-localization
O usuário muda o idioma nas configurações - combine com i18next - i18next / react-i18next
QA reporta rótulos em hebraico/árabe truncados ou cortados - verifique também Fallback de Locale e Pseudolocale
Aplicativos white-label com regras de marca mistas RTL/LTR - Tematização e Sabores de Marca

Exemplo de Trabalho

1. Detectar RTL a partir do Locale

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");
}

Confie em textDirection primeiro - o SO conhece a direção do script
Mantenha RTL_LANGS para substituições de idioma do aplicativo que não correspondem ao locale do dispositivo
Chame durante a inicialização do i18n - Noções Básicas de i18n

2. Habilitar RTL na Inicialização

// app/_layout.tsx (trecho)
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 />;
}

Updates.reloadAsync aplica as alterações do I18nManager - o hot reload não é suficiente
Primeira inicialização em um dispositivo árabe: habilite RTL antes da primeira pintura significativa, quando possível
O Expo Go reflete o RTL após a recarga - teste também em builds de cliente de desenvolvimento

3. Estilos Lógicos: `start` / `end`

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" }, // veja exemplo 4
  subtitle: { fontSize: 13, color: "#6b7280" },
  chevron: { fontSize: 20 },
});

paddingStart / marginEnd invertem em RTL - paddingLeft não
flexDirection: "row" inverte a ordem dos filhos em RTL - frequentemente correto para linhas de lista
Audite cada left, right, marginLeft, borderLeftWidth na base de código com regras personalizadas do ESLint

4. Alinhamento de Texto

// Prefira alinhamento ciente da direção de escrita
<Text style={{ textAlign: I18nManager.isRTL ? "right" : "left" }}>{title}</Text>
 
// Melhor: alinhamento padrão segue o locale quando suportado
<Text style={styles.body}>{body}</Text>

import { I18nManager, StyleSheet } from "react-native";
 
const styles = StyleSheet.create({
  body: {
    textAlign: "auto" as "auto", // RN 0.86 - segue a direção de escrita
    writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
  },
});

textAlign: "auto" permite que o algoritmo bidi posicione strings mistas LTR/RTL
Números e e-mails incorporados em frases em árabe precisam de cuidado com unicode-bidi - mantenha tokens LTR em spans se ocorrer corte
Frases longas em alemão em LTR ainda truncam - QA de pseudolocale - Fallback de Locale e Pseudolocale

5. Ícones Espelhados

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 }] },
});

Asset	Espelhar em RTL?
Chevron de volta, seta para frente, seta de envio	Sim
Pesquisar, fechar (X), marca de seleção	Não
Reprodução de mídia (triângulo de play)	Não
Logos assimétricos, marcas da empresa	Não
Gráficos com tempo no eixo X	Frequentemente não - mantenha o eixo de tempo LTR

Use scaleX: -1 em Image - não arquivos de assets separados, a menos que o design exija
Barras de abas e posições de FAB invertem com row - verifique o alcance do polegar em dispositivos RTL

6. Botão Voltar de Navegação

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>
  );
}

Expo Router e React Navigation honram RTL para transições de pilha - ainda verifique a direção do gesto
accessibilityLabel deve ser traduzido - não "Back" codificado
Testes Detox devem usar testID - Detox E2E

7. Flags do `I18nManager` Explicadas

import { I18nManager } from "react-native";
 
I18nManager.isRTL; // direção atual do layout
I18nManager.allowRTL(true); // permitir layout RTL
I18nManager.forceRTL(true); // forçar RTL mesmo em dispositivo LTR (QA)
I18nManager.swapLeftAndRightInRTL; // troca props de estilo left/right em RTL (helper legado)

forceRTL(true) em dispositivo LTR - útil para QA sem alterar o idioma do SO
Não chame forceRTL a cada renderização - apenas quando o idioma muda
Documente que recarregamento é necessário na cópia das configurações quando o usuário escolhe árabe

8. Animações e Posição Absoluta

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]} />;
}

left: 0 absoluto ancora à esquerda visual - errado para drawers RTL ancorados na borda inicial
Prefira position: "absolute", start: 0 (props de layout RN) onde suportado
Valores compartilhados do Reanimated não sabem da direção - multiplique transformações por sign

9. Conteúdo Misto LTR em Telas RTL

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

IDs de pedido, números de telefone e URLs frequentemente permanecem LTR dentro de parágrafos RTL
Campos de cartão de crédito e OTP devem usar textAlign: "left" + direção LTR independentemente do locale do aplicativo
Não espelhe mapas - o norte geográfico permanece para cima

10. Tela de Checklist RTL

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>
  );
}

Checklist de lançamento RTL:
 
✓ I18nManager alinhado com o idioma do app na inicialização
✓ Sem marginLeft/paddingRight nos estilos de recursos (auditoria grep)
✓ Ícones direcionais espelhados; logos intocados
✓ Funcionalidade de voltar da navegação testada em dispositivo árabe
✓ Configurações avisam sobre recarga breve na mudança de idioma
✓ Revisão de screenshots de pseudolocale + tradução mais longa

Armadilhas

paddingLeft em tokens de design compartilhados - Quebra o site RTL inteiro. Correção: migre tokens para sufixos Start/End.
Esquecer a recarga após forceRTL - O layout permanece LTR até a reinicialização. Correção: Updates.reloadAsync().
Espelhar botões de play e mapas - Confuso e incorreto. Correção: mirrorInRtl={false} por asset.
Strings concatenadas - A gramática árabe difere; UI espelhada expõe ordem de palavras estranha. Correção: chaves de frase completa - Melhores Práticas de i18n.
Sabor de marca apenas LTR - Alguns locatários podem desabilitar RTL - documente em Tematização e Sabores de Marca.

FAQs

Posso alternar RTL sem recarregar?

Não de forma confiável no RN 0.86. Planeje um reloadAsync ao cruzar LTR ↔ RTL. Pequenas alterações de string dentro da mesma direção não precisam de recarga.

NativeWind/Tailwind suporta RTL?

Use utilitários lógicos ms-, me-, ps-, pe- onde disponíveis - veja NativeWind. Evite ml-/mr- físicos em componentes compartilhados.

Como testo RTL no simulador?

Defina o idioma do dispositivo para árabe OU chame I18nManager.forceRTL(true) por trás de um sinalizador de menu de desenvolvimento, depois recarregue.

Abas do Expo Router em RTL?

A ordem das abas espelha com RTL. Verifique se abas apenas com ícones ainda têm tabBarAccessibilityLabel traduzido.

Relacionados

expo-localization - textDirection do dispositivo
i18next / react-i18next - mudança de idioma + recarga
Noções Básicas de i18n - provedor de locale na raiz
Fallback de Locale e Pseudolocale - truncamento antes dos tradutores
../design-systems/theming-and-brand-flavors/theming-and-brand-flavors.md - política RTL por marca
../styling-layout/flexbox-deep-dive/flexbox-deep-dive.md - layout de linha/coluna
Melhores Práticas de i18n - resumo da seção

Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Layouts RTL

Buscar na documentação

Layouts RTL