Tipo dinámico y escalado de fuentes

import type { TextProps } from "react-native";
import { PixelRatio, StyleSheet, Text, View } from "react-native";
 
type AppTextProps = TextProps & {
  variant?: "body" | "caption" | "toolbar";
};
 
const SCALE_CAPS = {
  body: undefined,
  caption: 1.5,
  toolbar: 1.2,
} as const;
 
export function AppText({ variant = "body", style, ...rest }: AppTextProps) {
  const cap = SCALE_CAPS[variant];
 
  return (
    <Text
      allowFontScaling
      maxFontSizeMultiplier={cap}
      style={[typography[variant], style]}
      {...rest}
    />
  );
}
 
const typography = StyleSheet.create({
  body: { fontSize: 16, lineHeight: 24 },
  caption: { fontSize: 13, lineHeight: 18 },
  toolbar: { fontSize: 14, lineHeight: 18, fontWeight: "600" },
});
 
export function useFontScale() {
  return PixelRatio.getFontScale();
}
 
export function ScalableRow({ title, meta }: { title: string; meta: string }) {
  return (
    <View style={styles.row}>
      <AppText variant="body" style={styles.title}>
        {title}
      </AppText>
      <AppText variant="caption" style={styles.meta}>
        {meta}
      </AppText>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", flexWrap: "wrap", gap: 8, paddingVertical: 12, alignItems: "center" },
  title: { flexShrink: 1 },
  meta: { color: "#64748b" },
});

import { useMemo } from "react";
import { PixelRatio, Pressable, StyleSheet, Text, View } from "react-native";
 
const LARGE_SCALE_THRESHOLD = 1.3;
 
export function SettingsScreen() {
  const fontScale = PixelRatio.getFontScale();
  const stacked = useMemo(() => fontScale >= LARGE_SCALE_THRESHOLD, [fontScale]);
 
  return (
    <View style={styles.screen}>
      <View style={[styles.toolbar, stacked && styles.toolbarStacked]}>
        <Text
          style={styles.toolbarTitle}
          maxFontSizeMultiplier={1.2}
          numberOfLines={stacked ? 2 : 1}
        >
          Configuración
        </Text>
      </View>
 
      <Pressable style={[styles.row, stacked && styles.rowStacked]}>
        <Text style={styles.rowTitle} allowFontScaling>
          Notificaciones
        </Text>
        <Text style={styles.rowValue} maxFontSizeMultiplier={1.4}>
          Habilitado
        </Text>
      </Pressable>
 
      <Pressable style={[styles.row, stacked && styles.rowStacked]}>
        <Text style={styles.rowTitle} allowFontScaling>
          Idioma
        </Text>
        <Text style={styles.rowValue} maxFontSizeMultiplier={1.4}>
          Español
        </Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 8 },
  toolbar: { minHeight: 44, justifyContent: "center" },
  toolbarStacked: { minHeight: 56, paddingVertical: 8 },
  toolbarTitle: { fontSize: 20, fontWeight: "700" },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    minHeight: 48,
    paddingVertical: 8,
    gap: 12,
  },
  rowStacked: { flexDirection: "column", alignItems: "flex-start" },
  rowTitle: { fontSize: 16, fontWeight: "600", flexShrink: 1 },
  rowValue: { fontSize: 14, color: "#64748b" },
});

// shared/ui/AppText.tsx - política de escalado única
export const typography = StyleSheet.create({
  display: { fontSize: 34, lineHeight: 40 },
  title: { fontSize: 22, lineHeight: 28 },
  body: { fontSize: 16, lineHeight: 24 },
  caption: { fontSize: 13, lineHeight: 18 },
});

// Frágil - altura fija recorta texto grande
<View style={{ height: 40 }}>
  <Text numberOfLines={1}>Configuración de cuenta y controles de privacidad</Text>
</View>
 
// Resiliente - crece con el contenido
<View style={{ minHeight: 44, paddingVertical: 8 }}>
  <Text style={{ flexShrink: 1 }}>Configuración de cuenta y controles de privacidad</Text>
</View>

<Text
  adjustsFontSizeToFit
  numberOfLines={1}
  minimumFontScale={0.85}
  maxFontSizeMultiplier={1.2}
  style={styles.tabLabel}
>
  Dashboard
</Text>

import { useEffect, useState } from "react";
import { PixelRatio, AppState } from "react-native";
 
export function useFontScale() {
  const [scale, setScale] = useState(PixelRatio.getFontScale());
 
  useEffect(() => {
    const sub = AppState.addEventListener("change", (state) => {
      if (state === "active") {
        setScale(PixelRatio.getFontScale());
      }
    });
    return () => sub.remove();
  }, []);
 
  return scale;
}

// Antipatrón - rechaza configuraciones de accesibilidad
<Text allowFontScaling={false}>Términos y condiciones</Text>
 
// Prefiere límite selectivo solo en chrome densa
<Text maxFontSizeMultiplier={1.15} style={styles.badge}>
  PRO
</Text>

1. iOS: Configuración - Accesibilidad - Display & Text Size - Larger Text - máximo
2. Android: Configuración - Display - Font size - más grande
3. Recorre incorporación, formulario, barra de pestañas y pago
4. Verifica: sin CTAs recortados, sin iconos de pestaña superpuestos, sin texto legal truncado
5. Captura pantalla de fallos para revisión de diseño - no solo tickets de ingeniería