Tipificación de Componentes y Props

Q: ¿Debería usar interface o type para props de componente?

Ambas funcionan. Usa interface cuando esperes fusión de declaraciones o extensión entre archivos; usa type para uniones, tipos mapeados y composiciones Omit/Pick. La consistencia dentro de un sistema de diseño importa más que la palabra clave.

Q: ¿Cómo tipifica children en componentes de función de React 19?

Añade children?: React.ReactNode a tu tipo de props cuando el componente renderiza una ranura. No confíes en React.FC - ya no es el valor predeterminado recomendado. Para APIs más estrictas, estrecha a ReactElement o a un tipo de componente específico.

Q: ¿Cuál es el tipo correcto para props de estilo?

Usa StyleProp en View, StyleProp en Text, y StyleProp en Image. Estos aceptan un objeto de estilo, arrays y entradas falsas condicionales (condition && styles.x).

Q: ¿Cómo se estrechan las uniones discriminadas dentro de JSX?

Estrecha en el cuerpo de la función con if (props.variant === "error") antes de retornar JSX. TypeScript lleva el tipo estrechado a esa rama, así que props.onRetry solo es requerido cuando variant es "error".

Q: ¿Cómo comparto props entre dos componentes similares?

Extrae un tipo base (RowBaseProps) e intersecta con tipos específicos de variante. Usa Pick y Omit para reutilizar porciones de primitivos: Pick.

Q: ¿Cómo tipifica un renderItem genérico de FlatList?

Pasa el genérico de elemento a FlatList: item se infiere como Place sin conversiones manuales.

Q: ¿Cómo tipifica props de callback opcionales?

Usa campos opcionales: onPress?: () => void. Cuando el callback es requerido solo para una rama de unión, ponlo dentro de esa rama de una unión discriminada en lugar de marcarlo como opcional globalmente.

Q: Trampa común: ¿Por qué expandir props rompe el autocompletado?

{...rest} donde rest se tipifica demasiado ampliamente (p. ej. Record) pierde verificación de claves. Tipifica rest como Omit o ViewProps para que solo las claves nativas válidas se expandan.

Q: ¿Cómo tipifica uniones de nombres de icono?

Usa uniones de literales de cadena ("star" | "pin") o mapas as const: Las uniones literales capturan errores tipográficos en tiempo de compilación e impulsan exhaustividad de switch.

Los genéricos, las uniones discriminadas y los contratos de props reutilizables convierten los componentes de React Native en APIs autodocumentadas. Los tipos de props fuertes capturan combinaciones inválidas en tiempo de compilación - antes de que aparezcan como bugs de layout en iOS y Android.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

import { Pressable, StyleSheet, Text, View, type ViewProps } from "react-native";
 
// Contrato base reutilizable - layout compartido + testID
type BoxProps = ViewProps & {
  testID?: string;
};
 
// Unión discriminada - solo combinaciones de props válidas se compilan
type StatusBadgeProps =
  | { variant: "success"; message: string }
  | { variant: "error"; message: string; onRetry: () => void }
  | { variant: "loading" };
 
export function StatusBadge(props: StatusBadgeProps) {
  if (props.variant === "loading") {
    return <Text style={styles.muted}>Cargando…</Text>;
  }
  if (props.variant === "error") {
    return (
      <View style={styles.row}>
        <Text style={styles.error}>{props.message}</Text>
        <Pressable onPress={props.onRetry}>
          <Text style={styles.link}>Reintentar</Text>
        </Pressable>
      </View>
    );
  }
  return <Text style={styles.success}>{props.message}</Text>;
}
 
// Fila de lista genérica - T fluye del caller a renderItem
type ListProps<T> = BoxProps & {
  data: readonly T[];
  keyExtractor: (item: T) => string;
  renderItem: (item: T) => React.ReactNode;
};
 
export function SimpleList<T>({ data, keyExtractor, renderItem, ...viewProps }: ListProps<T>) {
  return (
    <View {...viewProps}>
      {data.map((item) => (
        <View key={keyExtractor(item)}>{renderItem(item)}</View>
      ))}
    </View>
  );
}

Cuándo usarlo: Estás construyendo primitivos de UI compartidos, filas de listas o componentes impulsados por variantes y quieres que TypeScript rechace combinaciones de props imposibles antes de la ejecución.

Ejemplo Funcionando

import { memo } from "react";
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
  type PressableProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
// ---- Contratos compartidos ----
 
type WithTestID = { testID?: string };
 
type RowBaseProps = WithTestID & {
  title: string;
  subtitle?: string;
  style?: StyleProp<ViewStyle>;
};
 
// Ranura de media discriminada - icono XOR avatar, nunca ambos
type MediaProps =
  | { media: "icon"; iconName: "star" | "pin" }
  | { media: "avatar"; uri: string }
  | { media?: "none" };
 
type ListRowProps = RowBaseProps & MediaProps & {
  onPress?: PressableProps["onPress"];
  selected?: boolean;
};
 
function ListRow(props: ListRowProps) {
  const { title, subtitle, onPress, selected, testID, style } = props;
 
  const media =
    props.media === "icon" ? (
      <Text style={styles.icon}>{props.iconName === "star" ? "★" : "📍"}</Text>
    ) : props.media === "avatar" ? (
      <View style={styles.avatar}>
        <Text style={styles.avatarLabel}>{props.uri.slice(0, 1).toUpperCase()}</Text>
      </View>
    ) : null;
 
  return (
    <Pressable
      testID={testID}
      onPress={onPress}
      style={[styles.row, selected && styles.rowSelected, style]}
    >
      {media}
      <View style={styles.copy}>
        <Text style={styles.title}>{title}</Text>
        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
      </View>
    </Pressable>
  );
}
 
// ---- Lista de secciones genérica ----
 
interface Section<T> {
  title: string;
  data: readonly T[];
}
 
type SectionListProps<T> = WithTestID & {
  sections: readonly Section<T>[];
  keyExtractor: (item: T) => string;
  renderItem: (item: T) => React.ReactNode;
  ListEmptyComponent?: React.ReactNode;
};
 
function SectionList<T>({
  sections,
  keyExtractor,
  renderItem,
  ListEmptyComponent,
  testID,
}: SectionListProps<T>) {
  const isEmpty = sections.every((s) => s.data.length === 0);
  if (isEmpty) return <>{ListEmptyComponent ?? null}</>;
 
  return (
    <View testID={testID}>
      {sections.map((section) => (
        <View key={section.title}>
          <Text style={styles.sectionHeader}>{section.title}</Text>
          {section.data.map((item) => (
            <View key={keyExtractor(item)}>{renderItem(item)}</View>
          ))}
        </View>
      ))}
    </View>
  );
}
 
// ---- Cableado de pantalla ----
 
interface Place {
  id: string;
  name: string;
  city: string;
  pinned: boolean;
}
 
const PLACES: Place[] = [
  { id: "1", name: "Mission Dolores Park", city: "San Francisco", pinned: true },
  { id: "2", name: "Golden Gate", city: "San Francisco", pinned: false },
];
 
const MemoRow = memo(function MemoRow({
  place,
  onTogglePin,
}: {
  place: Place;
  onTogglePin: (id: string) => void;
}) {
  return (
    <ListRow
      testID={`place-${place.id}`}
      title={place.name}
      subtitle={place.city}
      selected={place.pinned}
      media={place.pinned ? { media: "icon", iconName: "pin" } : { media: "none" }}
      onPress={() => onTogglePin(place.id)}
    />
  );
});
 
export default function PlacesScreen({
  places,
  onTogglePin,
}: {
  places: Place[];
  onTogglePin: (id: string) => void;
}) {
  const sections: Section<Place>[] = [
    { title: "Guardados", data: places.filter((p) => p.pinned) },
    { title: "Todos", data: places },
  ];
 
  return (
    <FlatList
      data={places}
      keyExtractor={(p) => p.id}
      ListHeaderComponent={
        <SectionList
          testID="places-sections"
          sections={sections}
          keyExtractor={(p) => p.id}
          renderItem={(place) => <MemoRow place={place} onTogglePin={onTogglePin} />}
          ListEmptyComponent={<Text style={styles.muted}>Sin lugares aún.</Text>}
        />
      }
      renderItem={({ item }) => (
        <ListRow
          title={item.name}
          subtitle={item.city}
          media={{ media: "avatar", uri: item.name }}
        />
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    padding: 14,
    backgroundColor: "#fff",
  },
  rowSelected: { backgroundColor: "#eff6ff" },
  copy: { flex: 1, gap: 2 },
  title: { fontSize: 16, fontWeight: "600" },
  subtitle: { fontSize: 14, color: "#64748b" },
  icon: { fontSize: 18, width: 28, textAlign: "center" },
  avatar: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: "#e2e8f0",
    alignItems: "center",
    justifyContent: "center",
  },
  avatarLabel: { fontWeight: "700", color: "#334155" },
  sectionHeader: {
    fontSize: 13,
    fontWeight: "700",
    color: "#64748b",
    paddingHorizontal: 14,
    paddingTop: 16,
    textTransform: "uppercase",
  },
  muted: { padding: 16, color: "#94a3b8" },
  success: { color: "#16a34a" },
  error: { color: "#dc2626" },
  link: { color: "#2563eb", fontWeight: "600" },
});

Lo que esto demuestra:

RowBaseProps centraliza campos compartidos; MediaProps añade claves específicas de variantes a través de un discriminante.
SectionList<T> preserva el tipo de elemento desde sections a través de renderItem.
PressableProps["onPress"] reutiliza el tipo de manejador de plataforma en lugar de duplicarlo.
Los componentes memoizados con contratos de props estables se emparejan con el rendimiento de listas.

Profundización

Cómo Funciona

Los componentes de función se tipifican anotando el parámetro de props (function Row(props: RowProps)).
TypeScript estrecha las uniones discriminadas dentro de if/switch en el campo discriminante (variant, media).
Los componentes genéricos (<T>) dejan que los callers pasen tipos de dominio (Place) sin conversiones en el sitio de llamada.
React.ComponentProps<typeof Pressable> y ViewProps heredan props primitivos de RN (style, accessibilityLabel, testID).
StyleProp<ViewStyle> es el tipo correcto para style - acepta un objeto de estilo, arrays y entradas falsas (condition && styles.x).
React 19 mantiene children fuera de los valores predeterminados de React.FC; añade children?: React.ReactNode solo cuando tu API acepta slots.

Patrones de Contrato de Props

Patrón	Forma de tipo	Usar cuándo
Base + extensión	`BaseProps & { extra: string }`	Varios componentes comparten `testID`, `style`
Unión discriminada	`{ kind: "a"; a: string } \| { kind: "b"; b: number }`	Conjuntos de props mutuamente excluyentes
Props de datos genéricos	`<T> { data: T[]; renderItem: (t: T) => … }`	Listas, selectores, autocompletado
`Omit` / `Pick`	`Omit<PressableProps, "children">`	Componentes envolventes que poseen children
Render prop	`{ children: (state: S) => ReactNode }`	Primitivos sin encabezado

Notas de TypeScript

import type { ComponentProps, ReactElement, ReactNode } from "react";
import { Pressable, Text, type TextProps, type ViewProps } from "react-native";
 
// Hereda props primitivos, sobrescribe solo lo que posees
type CardProps = ViewProps & {
  title: string;
  footer?: ReactNode;
};
 
// Extrae onPress de Pressable sin importar manualmente el tipo de valor
type IconButtonProps = Pick<ComponentProps<typeof Pressable>, "onPress" | "disabled"> & {
  label: string;
  icon: ReactElement;
};
 
// Children estrictos - solo nodos Text permitidos dentro de un envoltorio de tipografía
type TypographyProps = TextProps & {
  children: string | ReactElement<typeof Text>;
};

Parámetros y Valores de Retorno

Parámetro	Tipo	Descripción
`props`	Interfaz nombrada o tipo inline	API pública del componente
`style`	`StyleProp<ViewStyle \| TextStyle \| ImageStyle>`	Objeto(s) de estilo de plataforma
`children`	`ReactNode` (explícito)	Contenido de ranura cuando el componente renderiza children
`T` genérico	Tipo de dominio proporcionado por caller	Tipo de elemento para listas y selectores
Retorno	`ReactElement \| null` (inferido)	Los componentes de RN devuelven elementos; `null` renderiza nada

Errores Comunes

Opcional todo en props de variante - { variant?: "a" \| "b"; a?: string; b?: number } deja que los callers pasen { variant: "a", b: 1 } sin error. Solución: Usa una unión discriminada con campos requeridos por rama.
Duplicar tipos onPress - Escribir a mano (event: GestureResponderEvent) => void se desvía de las actualizaciones de RN. Solución: Usa PressableProps["onPress"] o ComponentProps<typeof Pressable>["onPress"].
Conversión de datos de lista genérica - data as Place[] dentro de una lista compartida oculta errores del caller. Solución: Empuja el genérico al componente de lista: FlatList<Place>, SectionList<Place>.
Expandiendo props desconocidos sobre View - {...rest} de un tipo amplio puede pasar claves inválidas a vistas nativas. Solución: Omit de claves conocidas y tipifica rest como ViewProps o una selección estrecha.
Tipos de objeto inline en cada componente - ({ name }: { name: string }) está bien una vez; las formas repetidas pertenecen a un tipo nombrado. Solución: Exporta ProfileCardProps desde el mismo archivo que el componente.
Olvidar readonly en arrays - Props tipificados como T[] permiten que los callers hagan .push() en arrays pasados. Solución: Prefiere readonly T[] para props de datos de solo lectura.
Usar React.FC para código nuevo - children implícitos y peculiaridades heredadas añaden ruido en React 19. Solución: Tipifica el parámetro de props directamente en una función nombrada.

Alternativas

Alternativa	Usar cuándo	No usar cuándo
Uniones discriminadas	Conjuntos de props mutuamente excluyentes (tipo de media, severidad de alerta)	Cada prop es independiente y opcional
Genéricos (`<T>`)	Listas, tablas, selectores sobre tipos de elemento desconocidos	Pantallas de un solo uso con un tipo de dominio
`ComponentProps<typeof X>`	Envolviendo primitivos de RN	Necesitas una superficie de API sustancialmente diferente
Zod + tipos inferidos	Props originados de JSON o deep links	Interfaz de usuario pura en app con props estáticos
`satisfies` en objetos de estilo	Objetos de token de diseño que deben permanecer estrechos	Entradas `StyleSheet.create` de un solo uso

Preguntas Frecuentes

¿Debería usar interface o type para props de componente?

Ambas funcionan. Usa interface cuando esperes fusión de declaraciones o extensión entre archivos; usa type para uniones, tipos mapeados y composiciones Omit/Pick. La consistencia dentro de un sistema de diseño importa más que la palabra clave.

¿Cómo tipifica children en componentes de función de React 19?

Añade children?: React.ReactNode a tu tipo de props cuando el componente renderiza una ranura. No confíes en React.FC - ya no es el valor predeterminado recomendado. Para APIs más estrictas, estrecha a ReactElement o a un tipo de componente específico.

¿Cuál es el tipo correcto para props de estilo?

Usa StyleProp<ViewStyle> en View, StyleProp<TextStyle> en Text, y StyleProp<ImageStyle> en Image. Estos aceptan un objeto de estilo, arrays y entradas falsas condicionales (condition && styles.x).

¿Cómo se estrechan las uniones discriminadas dentro de JSX?

Estrecha en el cuerpo de la función con if (props.variant === "error") antes de retornar JSX. TypeScript lleva el tipo estrechado a esa rama, así que props.onRetry solo es requerido cuando variant es "error".

¿Cómo comparto props entre dos componentes similares?

Extrae un tipo base (RowBaseProps) e intersecta con tipos específicos de variante. Usa Pick y Omit para reutilizar porciones de primitivos: Pick<PressableProps, "onPress" | "disabled">.

¿Cómo tipifica un renderItem genérico de FlatList?

Pasa el genérico de elemento a FlatList<T>:

<FlatList<Place>
  data={places}
  keyExtractor={(p) => p.id}
  renderItem={({ item }) => <PlaceRow place={item} />}
/>

item se infiere como Place sin conversiones manuales.

¿Debería exportar tipos de props desde archivos de componentes?

Exporta cuando otros módulos envuelven o extienden el componente - pantallas de navegación, historias de Storybook y helpers de prueba se benefician de export type ListRowProps. Mantén props de helper interno sin exportar.

¿Cómo tipifica props de callback opcionales?

Usa campos opcionales: onPress?: () => void. Cuando el callback es requerido solo para una rama de unión, ponlo dentro de esa rama de una unión discriminada en lugar de marcarlo como opcional globalmente.

Trampa común: ¿Por qué expandir props rompe el autocompletado?

{...rest} donde rest se tipifica demasiado ampliamente (p. ej. Record<string, unknown>) pierde verificación de claves. Tipifica rest como Omit<CardProps, "title"> o ViewProps para que solo las claves nativas válidas se expandan.

¿Cómo tipifica uniones de nombres de icono?

Usa uniones de literales de cadena ("star" | "pin") o mapas as const:

const ICONS = { star: "★", pin: "📍" } as const;
type IconName = keyof typeof ICONS;

Las uniones literales capturan errores tipográficos en tiempo de compilación e impulsan exhaustividad de switch.

¿Puedo usar valores de parámetro predeterminado con props tipificados?

Sí - function Counter({ initial = 0 }: { initial?: number }) es idiomático. Los valores predeterminados se aplican en tiempo de ejecución; TypeScript aún trata la prop como opcional en el lado del caller.

¿Cómo tipifica children de render-prop?

type MeasureProps = {
  children: (size: { width: number; height: number }) => React.ReactNode;
};

El retorno del callback debe ser ReactNode; usa ReactElement solo cuando requieras un único elemento.

¿Cómo afecta la verificación estricta de null a las props?

Con strict: true, las props opcionales son T | undefined. Usa prop ?? fallback o guardias explícitos. Evita aserciones de non-null prop! en componentes - los callers pueden omitir el campo.

¿Deberían los componentes de fila de lista usar memo con props tipificados?

Sí, cuando las filas son costosas y reciben props estables. Empareja memo con un tipo de props nombrado para que los comparadores y pruebas permanezcan claros. Las lambdas inline inestables onPress={() => …} anulan la memoización.

¿Cómo extiendo props de componentes de terceros?

Usa ComponentProps<typeof ThirdPartyButton> o el tipo de props exportado del paquete. Re-exporta una versión estrechada con Omit si ocultas algunas props aguas arriba de tu sistema de diseño.

Relacionado

Conceptos Básicos de TypeScript en RN - valores predeterminados de tsconfig estrictos antes de fortalecer APIs de componentes
Tipos de Utilidad para RN - ComponentProps, StyleProp y helpers seguros de estilo
Props, Estado y Re-renderizados en Móvil - cómo los props tipificados fluyen cuando los padres se re-renderizan
Tipificación de Navegación y Parámetros de Ruta - componentes de pantalla que reciben parámetros de ruta
Tipificación de Respuestas de API y Zod - infirir tipos de props de formas de API validadas
Mejores Prácticas de TypeScript en RN - convenciones de equipo para donde los tipos tienen recompensa

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

import { Pressable, StyleSheet, Text, View, type ViewProps } from "react-native";
 
// Contrato base reutilizable - layout compartido + testID
type BoxProps = ViewProps & {
  testID?: string;
};
 
// Unión discriminada - solo combinaciones de props válidas se compilan
type StatusBadgeProps =
  | { variant: "success"; message: string }
  | { variant: "error"; message: string; onRetry: () => void }
  | { variant: "loading" };
 
export function StatusBadge(props: StatusBadgeProps) {
  if (props.variant === "loading") {
    return <Text style={styles.muted}>Cargando…</Text>;
  }
  if (props.variant === "error") {
    return (
      <View style={styles.row}>
        <Text style={styles.error}>{props.message}</Text>
        <Pressable onPress={props.onRetry}>
          <Text style={styles.link}>Reintentar</Text>
        </Pressable>
      </View>
    );
  }
  return <Text style={styles.success}>{props.message}</Text>;
}
 
// Fila de lista genérica - T fluye del caller a renderItem
type ListProps<T> = BoxProps & {
  data: readonly T[];
  keyExtractor: (item: T) => string;
  renderItem: (item: T) => React.ReactNode;
};
 
export function SimpleList<T>({ data, keyExtractor, renderItem, ...viewProps }: ListProps<T>) {
  return (
    <View {...viewProps}>
      {data.map((item) => (
        <View key={keyExtractor(item)}>{renderItem(item)}</View>
      ))}
    </View>
  );
}

Ejemplo Funcionando

import { memo } from "react";
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
  type PressableProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
// ---- Contratos compartidos ----
 
type WithTestID = { testID?: string };
 
type RowBaseProps = WithTestID & {
  title: string;
  subtitle?: string;
  style?: StyleProp<ViewStyle>;
};
 
// Ranura de media discriminada - icono XOR avatar, nunca ambos
type MediaProps =
  | { media: "icon"; iconName: "star" | "pin" }
  | { media: "avatar"; uri: string }
  | { media?: "none" };
 
type ListRowProps = RowBaseProps & MediaProps & {
  onPress?: PressableProps["onPress"];
  selected?: boolean;
};
 
function ListRow(props: ListRowProps) {
  const { title, subtitle, onPress, selected, testID, style } = props;
 
  const media =
    props.media === "icon" ? (
      <Text style={styles.icon}>{props.iconName === "star" ? "★" : "📍"}</Text>
    ) : props.media === "avatar" ? (
      <View style={styles.avatar}>
        <Text style={styles.avatarLabel}>{props.uri.slice(0, 1).toUpperCase()}</Text>
      </View>
    ) : null;
 
  return (
    <Pressable
      testID={testID}
      onPress={onPress}
      style={[styles.row, selected && styles.rowSelected, style]}
    >
      {media}
      <View style={styles.copy}>
        <Text style={styles.title}>{title}</Text>
        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
      </View>
    </Pressable>
  );
}
 
// ---- Lista de secciones genérica ----
 
interface Section<T> {
  title: string;
  data: readonly T[];
}
 
type SectionListProps<T> = WithTestID & {
  sections: readonly Section<T>[];
  keyExtractor: (item: T) => string;
  renderItem: (item: T) => React.ReactNode;
  ListEmptyComponent?: React.ReactNode;
};
 
function SectionList<T>({
  sections,
  keyExtractor,
  renderItem,
  ListEmptyComponent,
  testID,
}: SectionListProps<T>) {
  const isEmpty = sections.every((s) => s.data.length === 0);
  if (isEmpty) return <>{ListEmptyComponent ?? null}</>;
 
  return (
    <View testID={testID}>
      {sections.map((section) => (
        <View key={section.title}>
          <Text style={styles.sectionHeader}>{section.title}</Text>
          {section.data.map((item) => (
            <View key={keyExtractor(item)}>{renderItem(item)}</View>
          ))}
        </View>
      ))}
    </View>
  );
}
 
// ---- Cableado de pantalla ----
 
interface Place {
  id: string;
  name: string;
  city: string;
  pinned: boolean;
}
 
const PLACES: Place[] = [
  { id: "1", name: "Mission Dolores Park", city: "San Francisco", pinned: true },
  { id: "2", name: "Golden Gate", city: "San Francisco", pinned: false },
];
 
const MemoRow = memo(function MemoRow({
  place,
  onTogglePin,
}: {
  place: Place;
  onTogglePin: (id: string) => void;
}) {
  return (
    <ListRow
      testID={`place-${place.id}`}
      title={place.name}
      subtitle={place.city}
      selected={place.pinned}
      media={place.pinned ? { media: "icon", iconName: "pin" } : { media: "none" }}
      onPress={() => onTogglePin(place.id)}
    />
  );
});
 
export default function PlacesScreen({
  places,
  onTogglePin,
}: {
  places: Place[];
  onTogglePin: (id: string) => void;
}) {
  const sections: Section<Place>[] = [
    { title: "Guardados", data: places.filter((p) => p.pinned) },
    { title: "Todos", data: places },
  ];
 
  return (
    <FlatList
      data={places}
      keyExtractor={(p) => p.id}
      ListHeaderComponent={
        <SectionList
          testID="places-sections"
          sections={sections}
          keyExtractor={(p) => p.id}
          renderItem={(place) => <MemoRow place={place} onTogglePin={onTogglePin} />}
          ListEmptyComponent={<Text style={styles.muted}>Sin lugares aún.</Text>}
        />
      }
      renderItem={({ item }) => (
        <ListRow
          title={item.name}
          subtitle={item.city}
          media={{ media: "avatar", uri: item.name }}
        />
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    padding: 14,
    backgroundColor: "#fff",
  },
  rowSelected: { backgroundColor: "#eff6ff" },
  copy: { flex: 1, gap: 2 },
  title: { fontSize: 16, fontWeight: "600" },
  subtitle: { fontSize: 14, color: "#64748b" },
  icon: { fontSize: 18, width: 28, textAlign: "center" },
  avatar: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: "#e2e8f0",
    alignItems: "center",
    justifyContent: "center",
  },
  avatarLabel: { fontWeight: "700", color: "#334155" },
  sectionHeader: {
    fontSize: 13,
    fontWeight: "700",
    color: "#64748b",
    paddingHorizontal: 14,
    paddingTop: 16,
    textTransform: "uppercase",
  },
  muted: { padding: 16, color: "#94a3b8" },
  success: { color: "#16a34a" },
  error: { color: "#dc2626" },
  link: { color: "#2563eb", fontWeight: "600" },
});

Lo que esto demuestra:

RowBaseProps centraliza campos compartidos; MediaProps añade claves específicas de variantes a través de un discriminante.
SectionList<T> preserva el tipo de elemento desde sections a través de renderItem.
PressableProps["onPress"] reutiliza el tipo de manejador de plataforma en lugar de duplicarlo.
Los componentes memoizados con contratos de props estables se emparejan con el rendimiento de listas.

Profundización

Cómo Funciona

Los componentes de función se tipifican anotando el parámetro de props (function Row(props: RowProps)).
TypeScript estrecha las uniones discriminadas dentro de if/switch en el campo discriminante (variant, media).
Los componentes genéricos (<T>) dejan que los callers pasen tipos de dominio (Place) sin conversiones en el sitio de llamada.
React.ComponentProps<typeof Pressable> y ViewProps heredan props primitivos de RN (style, accessibilityLabel, testID).
StyleProp<ViewStyle> es el tipo correcto para style - acepta un objeto de estilo, arrays y entradas falsas (condition && styles.x).
React 19 mantiene children fuera de los valores predeterminados de React.FC; añade children?: React.ReactNode solo cuando tu API acepta slots.

Patrones de Contrato de Props

Patrón	Forma de tipo	Usar cuándo
Base + extensión	`BaseProps & { extra: string }`	Varios componentes comparten `testID`, `style`
Unión discriminada	`{ kind: "a"; a: string } \| { kind: "b"; b: number }`	Conjuntos de props mutuamente excluyentes
Props de datos genéricos	`<T> { data: T[]; renderItem: (t: T) => … }`	Listas, selectores, autocompletado
`Omit` / `Pick`	`Omit<PressableProps, "children">`	Componentes envolventes que poseen children
Render prop	`{ children: (state: S) => ReactNode }`	Primitivos sin encabezado

Notas de TypeScript

import type { ComponentProps, ReactElement, ReactNode } from "react";
import { Pressable, Text, type TextProps, type ViewProps } from "react-native";
 
// Hereda props primitivos, sobrescribe solo lo que posees
type CardProps = ViewProps & {
  title: string;
  footer?: ReactNode;
};
 
// Extrae onPress de Pressable sin importar manualmente el tipo de valor
type IconButtonProps = Pick<ComponentProps<typeof Pressable>, "onPress" | "disabled"> & {
  label: string;
  icon: ReactElement;
};
 
// Children estrictos - solo nodos Text permitidos dentro de un envoltorio de tipografía
type TypographyProps = TextProps & {
  children: string | ReactElement<typeof Text>;
};

Parámetros y Valores de Retorno

Parámetro	Tipo	Descripción
`props`	Interfaz nombrada o tipo inline	API pública del componente
`style`	`StyleProp<ViewStyle \| TextStyle \| ImageStyle>`	Objeto(s) de estilo de plataforma
`children`	`ReactNode` (explícito)	Contenido de ranura cuando el componente renderiza children
`T` genérico	Tipo de dominio proporcionado por caller	Tipo de elemento para listas y selectores
Retorno	`ReactElement \| null` (inferido)	Los componentes de RN devuelven elementos; `null` renderiza nada

Errores Comunes

Opcional todo en props de variante - { variant?: "a" \| "b"; a?: string; b?: number } deja que los callers pasen { variant: "a", b: 1 } sin error. Solución: Usa una unión discriminada con campos requeridos por rama.
Duplicar tipos onPress - Escribir a mano (event: GestureResponderEvent) => void se desvía de las actualizaciones de RN. Solución: Usa PressableProps["onPress"] o ComponentProps<typeof Pressable>["onPress"].
Conversión de datos de lista genérica - data as Place[] dentro de una lista compartida oculta errores del caller. Solución: Empuja el genérico al componente de lista: FlatList<Place>, SectionList<Place>.
Expandiendo props desconocidos sobre View - {...rest} de un tipo amplio puede pasar claves inválidas a vistas nativas. Solución: Omit de claves conocidas y tipifica rest como ViewProps o una selección estrecha.
Tipos de objeto inline en cada componente - ({ name }: { name: string }) está bien una vez; las formas repetidas pertenecen a un tipo nombrado. Solución: Exporta ProfileCardProps desde el mismo archivo que el componente.
Olvidar readonly en arrays - Props tipificados como T[] permiten que los callers hagan .push() en arrays pasados. Solución: Prefiere readonly T[] para props de datos de solo lectura.
Usar React.FC para código nuevo - children implícitos y peculiaridades heredadas añaden ruido en React 19. Solución: Tipifica el parámetro de props directamente en una función nombrada.

Alternativas

Alternativa	Usar cuándo	No usar cuándo
Uniones discriminadas	Conjuntos de props mutuamente excluyentes (tipo de media, severidad de alerta)	Cada prop es independiente y opcional
Genéricos (`<T>`)	Listas, tablas, selectores sobre tipos de elemento desconocidos	Pantallas de un solo uso con un tipo de dominio
`ComponentProps<typeof X>`	Envolviendo primitivos de RN	Necesitas una superficie de API sustancialmente diferente
Zod + tipos inferidos	Props originados de JSON o deep links	Interfaz de usuario pura en app con props estáticos
`satisfies` en objetos de estilo	Objetos de token de diseño que deben permanecer estrechos	Entradas `StyleSheet.create` de un solo uso

Preguntas Frecuentes

¿Debería usar interface o type para props de componente?

¿Cómo tipifica children en componentes de función de React 19?

¿Cuál es el tipo correcto para props de estilo?

¿Cómo se estrechan las uniones discriminadas dentro de JSX?

¿Cómo comparto props entre dos componentes similares?

Extrae un tipo base (RowBaseProps) e intersecta con tipos específicos de variante. Usa Pick y Omit para reutilizar porciones de primitivos: Pick<PressableProps, "onPress" | "disabled">.

¿Cómo tipifica un renderItem genérico de FlatList?

Pasa el genérico de elemento a FlatList<T>:

<FlatList<Place>
  data={places}
  keyExtractor={(p) => p.id}
  renderItem={({ item }) => <PlaceRow place={item} />}
/>

item se infiere como Place sin conversiones manuales.

¿Debería exportar tipos de props desde archivos de componentes?

¿Cómo tipifica props de callback opcionales?

Trampa común: ¿Por qué expandir props rompe el autocompletado?

¿Cómo tipifica uniones de nombres de icono?

Usa uniones de literales de cadena ("star" | "pin") o mapas as const:

const ICONS = { star: "★", pin: "📍" } as const;
type IconName = keyof typeof ICONS;

Las uniones literales capturan errores tipográficos en tiempo de compilación e impulsan exhaustividad de switch.

¿Puedo usar valores de parámetro predeterminado con props tipificados?

¿Cómo tipifica children de render-prop?

type MeasureProps = {
  children: (size: { width: number; height: number }) => React.ReactNode;
};

El retorno del callback debe ser ReactNode; usa ReactElement solo cuando requieras un único elemento.

¿Cómo afecta la verificación estricta de null a las props?

Con strict: true, las props opcionales son T | undefined. Usa prop ?? fallback o guardias explícitos. Evita aserciones de non-null prop! en componentes - los callers pueden omitir el campo.

¿Deberían los componentes de fila de lista usar memo con props tipificados?

¿Cómo extiendo props de componentes de terceros?

Usa ComponentProps<typeof ThirdPartyButton> o el tipo de props exportado del paquete. Re-exporta una versión estrechada con Omit si ocultas algunas props aguas arriba de tu sistema de diseño.

Relacionado

Conceptos Básicos de TypeScript en RN - valores predeterminados de tsconfig estrictos antes de fortalecer APIs de componentes
Tipos de Utilidad para RN - ComponentProps, StyleProp y helpers seguros de estilo
Props, Estado y Re-renderizados en Móvil - cómo los props tipificados fluyen cuando los padres se re-renderizan
Tipificación de Navegación y Parámetros de Ruta - componentes de pantalla que reciben parámetros de ruta
Tipificación de Respuestas de API y Zod - infirir tipos de props de formas de API validadas
Mejores Prácticas de TypeScript en RN - convenciones de equipo para donde los tipos tienen recompensa

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Tipificación de Componentes y Props

Buscar en la documentación

Tipificación de Componentes y Props