Tipos de Utilidad para RN

Q: ¿Qué es StyleProp y por qué no usar ViewStyle directamente?

StyleProp coincide con la tipificación real de prop de estilo de React Native. Permite arrays, estilos registrados y entradas falsy para estilos condicionales. Solo ViewStyle rechaza [styles.a, styles.b] y condition && styles.c.

Q: ¿Cómo extiendo Pressable sin listar cada prop?

ComponentProps incluye onPress, disabled, hitSlop, y props de accesibilidad. Omit elimina solo lo que tu API reemplaza.

Q: ¿Cómo tipifiques una devolución de llamada de función de estilo Pressable?

Usa PressableProps["style"] - es StyleProp | ((state) => StyleProp). No asignes el resultado de la devolución de llamada a solo ViewStyle.

Q: ¿Cuándo debo usar Pick vs Omit?

Omit cuando la mayoría de los props se reenvían y eliminas algunos. Pick cuando expones una superficie pública pequeña (resumen de fila de lista). Componer: Pick para tarjetas, Device completo para pantallas de detalle.

Q: ¿ComponentProps funciona con componentes forwardRef?

Para RN TextInput y librerías que aún usan forwardRef, ComponentPropsWithRef incluye ref. React 19 permite ref como una prop regular en componentes de función - ComponentProps a menudo es suficiente.

Q: ¿Qué es RegisteredStyle?

El tipo opaco devuelto por las claves de StyleSheet.create. Asignable a StyleProp - los llamadores pueden pasar styles.card directamente. Preferir StyleSheet.create así las claves se verifican exhaustivamente.

Q: ¿Puedo usar Partial para anulaciones de temas?

Sí para fusiones de configuración anidadas. No hagas Partial en props de componentes requeridos como title a menos que el componente realmente permita su omisión.

Q: ¿Debo importar tipos de utilidad desde react o react-native?

StyleProp, ViewStyle, GestureResponderEvent - desde react-native. ComponentProps está disponible desde ambos; prefiere react-native en archivos solo de RN para un sitio de importación.

React Native envía superficies de props ricas en componentes integrados. Los tipos de utilidad de TypeScript - especialmente StyleProp y ComponentProps - te permiten extender Pressable, Text y View sin duplicar docenas de props opcionales o romper arrays de estilos.

Receta

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

import {
  Pressable,
  Text,
  StyleSheet,
  type ComponentProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
type PressableProps = ComponentProps<typeof Pressable>;
 
interface LinkButtonProps extends Omit<PressableProps, "children"> {
  label: string;
  style?: StyleProp<ViewStyle>;
}
 
function LinkButton({ label, style, ...pressableProps }: LinkButtonProps) {
  return (
    <Pressable style={[styles.link, style]} {...pressableProps}>
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}

Cuándo usarlo:

Envolviendo Pressable, TextInput, o ScrollView con una API de sistema de diseño.
Aceptando anulaciones de style opcionales que los llamadores pasan como arrays ([base, condition && active]).
Reenviando props de accesibilidad y prueba (accessibilityLabel, testID) sin volver a listarlos.
Construyendo componentes compuestos que expanden props restantes a una primitiva.
Reemplazando envolturas React.FC donde necesitas control preciso sobre children.

Ejemplo Funcional

// components/Card.tsx - View wrapper with typed style slots
import { View, Text, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
 
interface CardProps {
  title: string;
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  elevated?: boolean;
}
 
export function Card({ title, children, style, titleStyle, elevated }: CardProps) {
  return (
    <View style={[styles.card, elevated && styles.elevated, style]}>
      <Text style={[styles.title, titleStyle]}>{title}</Text>
      {children}
    </View>
  );
}
 
const styles = StyleSheet.create({
  card: {
    borderRadius: 12,
    padding: 16,
    backgroundColor: "#fff",
  },
  elevated: {
    shadowColor: "#000",
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 3,
  },
  title: {
    fontSize: 17,
    fontWeight: "600",
    marginBottom: 8,
  },
});

// components/PrimaryButton.tsx - Pressable with forwarded props
import {
  ActivityIndicator,
  Pressable,
  Text,
  StyleSheet,
  type ComponentProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
type PressableProps = ComponentProps<typeof Pressable>;
type PressableStyle = PressableProps["style"];
 
interface PrimaryButtonProps extends Omit<PressableProps, "children" | "style"> {
  label: string;
  loading?: boolean;
  style?: StyleProp<ViewStyle>;
  pressedStyle?: PressableStyle;
}
 
export function PrimaryButton({
  label,
  loading = false,
  disabled,
  style,
  pressedStyle,
  ...pressableProps
}: PrimaryButtonProps) {
  const isDisabled = disabled || loading;
 
  return (
    <Pressable
      accessibilityRole="button"
      disabled={isDisabled}
      style={({ pressed }) => [
        styles.base,
        isDisabled && styles.disabled,
        pressed && !isDisabled ? styles.pressed : null,
        pressed && pressedStyle,
        style,
      ]}
      {...pressableProps}
    >
      {loading ? (
        <ActivityIndicator color="#fff" />
      ) : (
        <Text style={styles.label}>{label}</Text>
      )}
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  base: {
    backgroundColor: "#2563eb",
    borderRadius: 10,
    paddingVertical: 12,
    paddingHorizontal: 16,
    alignItems: "center",
  },
  pressed: { opacity: 0.9 },
  disabled: { opacity: 0.5 },
  label: { color: "#fff", fontWeight: "600" },
});

// components/LabeledInput.tsx - TextInput with typed change handler
import {
  TextInput,
  View,
  Text,
  StyleSheet,
  type ComponentProps,
  type StyleProp,
  type TextStyle,
} from "react-native";
 
type TextInputProps = ComponentProps<typeof TextInput>;
type OnChangeText = TextInputProps["onChangeText"];
 
interface LabeledInputProps extends Omit<TextInputProps, "style"> {
  label: string;
  inputStyle?: StyleProp<TextStyle>;
  onChangeText: OnChangeText;
}
 
export function LabeledInput({ label, inputStyle, onChangeText, ...inputProps }: LabeledInputProps) {
  return (
    <View style={styles.field}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        style={[styles.input, inputStyle]}
        onChangeText={onChangeText}
        placeholderTextColor="#94a3b8"
        {...inputProps}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  field: { gap: 6 },
  label: { fontSize: 14, fontWeight: "500", color: "#334155" },
  input: {
    borderWidth: 1,
    borderColor: "#cbd5e1",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
  },
});

Lo que esto demuestra:

StyleProp<ViewStyle> en Card acepta arrays de llamadores y entradas falsy de la misma manera que lo hace View.
ComponentProps<typeof Pressable> captura onPress, disabled, hitSlop, y props de accesibilidad para reenvío.
PressableProps["style"] preserva el tipo de devolución de llamada de estilo de función - no solo ViewStyle.
Omit<TextInputProps, "style"> divide los estilos del contenedor vs entrada sin perder props de teclado o auto-capitalización.
TextInputProps["onChangeText"] extrae la firma exacta del manejador de la primitiva.

Profundidad

Cómo Funciona

StyleProp<T> es una unión: T | RecursiveArray<T | Falsy> | RegisteredStyle<T> - refleja lo que las props de estilo de RN aceptan.
ComponentProps<C> (de las re-exportaciones de react-native) resuelve props para un tipo de componente o elemento intrínseco.
Omit<T, K> elimina claves que reemplazas con una API más estrecha (children - label).
Pick<T, K> selecciona un subconjunto - útil para bolsas de props "resumen" en filas de lista.
Partial<T> hace cada clave opcional - común para anulaciones de temas y actualizaciones de configuración de estilo PATCH.

Tipos de Estilo de RN de Un Vistazo

Tipo	Usar en
`StyleProp<ViewStyle>`	Envoltorios `View`, `Pressable`, `SafeAreaView`
`StyleProp<TextStyle>`	Estilos de texto `Text`, `TextInput`
`StyleProp<ImageStyle>`	`Image`, `ImageBackground`
`ViewStyle` / `TextStyle` / `ImageStyle`	Objetos de estilo único dentro de `StyleSheet.create`
`RegisteredStyle<T>`	Tipo de retorno de claves `StyleSheet.create` - aún asignable a `StyleProp<T>`

import { StyleSheet, type ViewStyle, type StyleProp } from "react-native";
 
const styles = StyleSheet.create({
  row: { flexDirection: "row" },
});
 
// All valid StyleProp usages:
const a: StyleProp<ViewStyle> = styles.row;
const b: StyleProp<ViewStyle> = [styles.row, { padding: 8 }];
const c: StyleProp<ViewStyle> = [styles.row, false && { opacity: 0 }];

Patrones de ComponentProps

Patrón	Código	Por Qué
Reenvío completo	`ComponentProps<typeof Pressable>`	Envoltorio listo para usar
Eliminar props reemplazados	`Omit<Props, "children" \| "style">`	API `label` personalizada
Extraer un manejador	`ComponentProps<typeof TextInput>["onChangeText"]`	Aridad exacta de devolución de llamada
Reenvío de ref	`ComponentPropsWithRef<typeof TextInput>`	Al usar `forwardRef` (el ref-as-prop de React 19 también funciona)

Notas de TypeScript

import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 
// Event types for custom touchables - do not invent synthetic event shapes
type OnPress = (event: GestureResponderEvent) => void;
 
function logLayout(e: LayoutChangeEvent) {
  const { width, height } = e.nativeEvent.layout;
  console.log({ width, height });
}
 
// Prefer keyof typeof styles for style keys tied to StyleSheet.create
const styles = StyleSheet.create({ card: {}, title: {} });
type CardStyleKey = keyof typeof styles; // "card" | "title"

Importa tipos con import type { ... } - mantiene los bundles de Metro limpios y satisface verbatimModuleSyntax si está habilitado.
No uses React.FC para envoltorios - agrega children implícitos y oscurece genéricos.
Para componentes de terceros, ComponentProps<typeof SomeLib.Button> funciona de la misma manera que las primitivas de RN.

Errores Comunes

Tipificación de style como solo ViewStyle - Los llamadores no pueden pasar [styles.base, props.style] o guardias falsy. Solución: Usa StyleProp<ViewStyle>.
Reducción de style de Pressable a ViewStyle - Pressable acepta una función ({ pressed }) => style. Solución: Usa PressableProps["style"] para anulaciones que deben soportar la forma de devolución de llamada.
Esparciendo props antes de los explícitos - {...pressableProps} onPress={mine} se sobrescribe por el esparcimiento si el orden es incorrecto. Solución: Esparce ...pressableProps último solo cuando los llamadores deben anular los valores predeterminados; de lo contrario, desestructura onPress explícitamente.
Duplicando interface ButtonProps a mano - Falta accessibilityState o android_ripple cuando RN agrega props. Solución: Comienza desde ComponentProps<typeof Pressable> y Omit lo que reemplazas.
TextStyle en TextInput - La prop de estilo TextInput incluye props de fuente pero también modelo de caja; confundir con ViewStyle causa errores. Solución: Usa StyleProp<TextStyle> para estilos de texto de entrada; envuelve en View para diseño.
Partial en props de marca requeridos - Partial<CardProps> hace que title sea opcional cuando siempre debe estar presente. Solución: Partial<Pick<CardProps, "style" | "titleStyle">> solo para ranuras opcionales.
Importando ComponentProps desde react - Funciona para proyectos DOM; las primitivas de RN necesitan tipos de react-native para StyleProp y props específicos de la plataforma. Solución: Importa ambos desde react-native cuando esté disponible.

Alternativas

Alternativa	Usar Cuando	No Usar Cuando
`ComponentProps<typeof X>`	Envolviendo primitivas de RN	Las props del componente no se exportan y no son una función componente simple
`interface` escrita a mano	Dos o tres props personalizados en un componente hoja	Envolviendo `Pressable` / `TextInput` con 30+ props nativas opcionales
`React.ComponentPropsWithoutRef`	Elementos DOM web en código compartido `react-native-web`	Módulos nativos puros sin JSX
Librerías de temas (Tamagui, Restyle)	`styled()` basado en tokens con variantes inferidas	Envoltorios únicos - los tipos de utilidad son más ligeros
`satisfies` en objetos de estilo	Literales de objeto en línea sin `StyleSheet.create`	Librerías de componentes publicadas que deben exponer anulaciones `StyleProp`

Preguntas Frecuentes

¿Qué es StyleProp y por qué no usar ViewStyle directamente?

StyleProp<T> coincide con la tipificación real de prop de estilo de React Native.
Permite arrays, estilos registrados y entradas falsy para estilos condicionales.
Solo ViewStyle rechaza [styles.a, styles.b] y condition && styles.c.

¿Cómo extiendo Pressable sin listar cada prop?

type PressableProps = ComponentProps<typeof Pressable>;
interface IconButtonProps extends Omit<PressableProps, "children"> {
  icon: React.ReactNode;
}

ComponentProps<typeof Pressable> incluye onPress, disabled, hitSlop, y props de accesibilidad.
Omit elimina solo lo que tu API reemplaza.

¿Cómo tipifiques una devolución de llamada de función de estilo Pressable?

Usa PressableProps["style"] - es StyleProp<ViewStyle> | ((state) => StyleProp<ViewStyle>).
No asignes el resultado de la devolución de llamada a solo ViewStyle.

¿Cuándo debo usar Pick vs Omit?

Omit<Big, "a" | "b"> cuando la mayoría de los props se reenvían y eliminas algunos.
Pick<Big, "a" | "b"> cuando expones una superficie pública pequeña (resumen de fila de lista).
Componer: Pick<Device, "id" | "name"> para tarjetas, Device completo para pantallas de detalle.

¿ComponentProps funciona con componentes forwardRef?

Para RN TextInput y librerías que aún usan forwardRef, ComponentPropsWithRef<typeof TextInput> incluye ref.
React 19 permite ref como una prop regular en componentes de función - ComponentProps a menudo es suficiente.

¿Cómo tipifiques onChangeText sin copiar la firma?

type TextInputProps = ComponentProps<typeof TextInput>;
type OnChangeText = TextInputProps["onChangeText"];

El acceso indexado extrae el tipo exacto del manejador de la primitiva.
Se mantiene correcto si React Native actualiza la firma.

¿Qué es RegisteredStyle?

El tipo opaco devuelto por las claves de StyleSheet.create.
Asignable a StyleProp<T> - los llamadores pueden pasar styles.card directamente.
Preferir StyleSheet.create así las claves se verifican exhaustivamente.

¿Puedo usar Partial para anulaciones de temas?

type Theme = { colors: { primary: string; background: string }; spacing: { md: number } };
type ThemeOverrides = Partial<Theme>;

Sí para fusiones de configuración anidadas.
No hagas Partial en props de componentes requeridos como title a menos que el componente realmente permita su omisión.

¿Cómo tipifiques devoluciones de llamada de diseño?

import type { LayoutChangeEvent } from "react-native";
 
function onLayout(e: LayoutChangeEvent) {
  const { x, y, width, height } = e.nativeEvent.layout;
}

Usa los tipos de evento exportados de RN - no inventes formas de evento personalizadas.

¿Debo importar tipos de utilidad desde react o react-native?

StyleProp, ViewStyle, GestureResponderEvent - desde react-native.
ComponentProps está disponible desde ambos; prefiere react-native en archivos solo de RN para un sitio de importación.

¿Cómo tipifiques props de fuente de Imagen?

import type { ImageProps, ImageSourcePropType } from "react-native";
 
type AvatarProps = Pick<ImageProps, "source" | "accessibilityLabel"> & {
  size: number;
};

ImageSourcePropType cubre formas require() y { uri }.
Pick<ImageProps, ...> reenvía resizeMode y accesibilidad cuando sea necesario.

¿Qué pasa con las utilidades Readonly y Required?

Readonly<T> para objetos de configuración que no deben mutar después de la creación.
Required<Pick<T, "id">> obliga a claves específicas mientras deja otros opcionales a través de la intersección.
Menos común que Pick/Omit pero útil para configuraciones de aplicación inmutables.

Relacionado

TypeScript en Conceptos Básicos de RN - ejemplos introductorios ComponentProps y Pick
Tipificación de Componentes y Props - uniones discriminadas y contratos de props genéricos
Vistas, Texto y Componentes Principales - StyleProp en primitivas de diseño
Manejo de Eventos y Touchables - patrones Pressable y hitSlop
Tipificación de Respuestas de API y Zod - Pick/Omit en tipos de esquema inferidos
TypeScript en Mejores Prácticas de RN - convenciones de equipo para envoltorios

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,
  Text,
  StyleSheet,
  type ComponentProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
type PressableProps = ComponentProps<typeof Pressable>;
 
interface LinkButtonProps extends Omit<PressableProps, "children"> {
  label: string;
  style?: StyleProp<ViewStyle>;
}
 
function LinkButton({ label, style, ...pressableProps }: LinkButtonProps) {
  return (
    <Pressable style={[styles.link, style]} {...pressableProps}>
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}

Cuándo usarlo:

Envolviendo Pressable, TextInput, o ScrollView con una API de sistema de diseño.
Aceptando anulaciones de style opcionales que los llamadores pasan como arrays ([base, condition && active]).
Reenviando props de accesibilidad y prueba (accessibilityLabel, testID) sin volver a listarlos.
Construyendo componentes compuestos que expanden props restantes a una primitiva.
Reemplazando envolturas React.FC donde necesitas control preciso sobre children.

Ejemplo Funcional

// components/Card.tsx - View wrapper with typed style slots
import { View, Text, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
 
interface CardProps {
  title: string;
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  titleStyle?: StyleProp<TextStyle>;
  elevated?: boolean;
}
 
export function Card({ title, children, style, titleStyle, elevated }: CardProps) {
  return (
    <View style={[styles.card, elevated && styles.elevated, style]}>
      <Text style={[styles.title, titleStyle]}>{title}</Text>
      {children}
    </View>
  );
}
 
const styles = StyleSheet.create({
  card: {
    borderRadius: 12,
    padding: 16,
    backgroundColor: "#fff",
  },
  elevated: {
    shadowColor: "#000",
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 3,
  },
  title: {
    fontSize: 17,
    fontWeight: "600",
    marginBottom: 8,
  },
});

// components/PrimaryButton.tsx - Pressable with forwarded props
import {
  ActivityIndicator,
  Pressable,
  Text,
  StyleSheet,
  type ComponentProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
type PressableProps = ComponentProps<typeof Pressable>;
type PressableStyle = PressableProps["style"];
 
interface PrimaryButtonProps extends Omit<PressableProps, "children" | "style"> {
  label: string;
  loading?: boolean;
  style?: StyleProp<ViewStyle>;
  pressedStyle?: PressableStyle;
}
 
export function PrimaryButton({
  label,
  loading = false,
  disabled,
  style,
  pressedStyle,
  ...pressableProps
}: PrimaryButtonProps) {
  const isDisabled = disabled || loading;
 
  return (
    <Pressable
      accessibilityRole="button"
      disabled={isDisabled}
      style={({ pressed }) => [
        styles.base,
        isDisabled && styles.disabled,
        pressed && !isDisabled ? styles.pressed : null,
        pressed && pressedStyle,
        style,
      ]}
      {...pressableProps}
    >
      {loading ? (
        <ActivityIndicator color="#fff" />
      ) : (
        <Text style={styles.label}>{label}</Text>
      )}
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  base: {
    backgroundColor: "#2563eb",
    borderRadius: 10,
    paddingVertical: 12,
    paddingHorizontal: 16,
    alignItems: "center",
  },
  pressed: { opacity: 0.9 },
  disabled: { opacity: 0.5 },
  label: { color: "#fff", fontWeight: "600" },
});

// components/LabeledInput.tsx - TextInput with typed change handler
import {
  TextInput,
  View,
  Text,
  StyleSheet,
  type ComponentProps,
  type StyleProp,
  type TextStyle,
} from "react-native";
 
type TextInputProps = ComponentProps<typeof TextInput>;
type OnChangeText = TextInputProps["onChangeText"];
 
interface LabeledInputProps extends Omit<TextInputProps, "style"> {
  label: string;
  inputStyle?: StyleProp<TextStyle>;
  onChangeText: OnChangeText;
}
 
export function LabeledInput({ label, inputStyle, onChangeText, ...inputProps }: LabeledInputProps) {
  return (
    <View style={styles.field}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        style={[styles.input, inputStyle]}
        onChangeText={onChangeText}
        placeholderTextColor="#94a3b8"
        {...inputProps}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  field: { gap: 6 },
  label: { fontSize: 14, fontWeight: "500", color: "#334155" },
  input: {
    borderWidth: 1,
    borderColor: "#cbd5e1",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
  },
});

Lo que esto demuestra:

StyleProp<ViewStyle> en Card acepta arrays de llamadores y entradas falsy de la misma manera que lo hace View.
ComponentProps<typeof Pressable> captura onPress, disabled, hitSlop, y props de accesibilidad para reenvío.
PressableProps["style"] preserva el tipo de devolución de llamada de estilo de función - no solo ViewStyle.
Omit<TextInputProps, "style"> divide los estilos del contenedor vs entrada sin perder props de teclado o auto-capitalización.
TextInputProps["onChangeText"] extrae la firma exacta del manejador de la primitiva.

Profundidad

Cómo Funciona

StyleProp<T> es una unión: T | RecursiveArray<T | Falsy> | RegisteredStyle<T> - refleja lo que las props de estilo de RN aceptan.
ComponentProps<C> (de las re-exportaciones de react-native) resuelve props para un tipo de componente o elemento intrínseco.
Omit<T, K> elimina claves que reemplazas con una API más estrecha (children - label).
Pick<T, K> selecciona un subconjunto - útil para bolsas de props "resumen" en filas de lista.
Partial<T> hace cada clave opcional - común para anulaciones de temas y actualizaciones de configuración de estilo PATCH.

Tipos de Estilo de RN de Un Vistazo

Tipo	Usar en
`StyleProp<ViewStyle>`	Envoltorios `View`, `Pressable`, `SafeAreaView`
`StyleProp<TextStyle>`	Estilos de texto `Text`, `TextInput`
`StyleProp<ImageStyle>`	`Image`, `ImageBackground`
`ViewStyle` / `TextStyle` / `ImageStyle`	Objetos de estilo único dentro de `StyleSheet.create`
`RegisteredStyle<T>`	Tipo de retorno de claves `StyleSheet.create` - aún asignable a `StyleProp<T>`

import { StyleSheet, type ViewStyle, type StyleProp } from "react-native";
 
const styles = StyleSheet.create({
  row: { flexDirection: "row" },
});
 
// All valid StyleProp usages:
const a: StyleProp<ViewStyle> = styles.row;
const b: StyleProp<ViewStyle> = [styles.row, { padding: 8 }];
const c: StyleProp<ViewStyle> = [styles.row, false && { opacity: 0 }];

Patrones de ComponentProps

Patrón	Código	Por Qué
Reenvío completo	`ComponentProps<typeof Pressable>`	Envoltorio listo para usar
Eliminar props reemplazados	`Omit<Props, "children" \| "style">`	API `label` personalizada
Extraer un manejador	`ComponentProps<typeof TextInput>["onChangeText"]`	Aridad exacta de devolución de llamada
Reenvío de ref	`ComponentPropsWithRef<typeof TextInput>`	Al usar `forwardRef` (el ref-as-prop de React 19 también funciona)

Notas de TypeScript

import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 
// Event types for custom touchables - do not invent synthetic event shapes
type OnPress = (event: GestureResponderEvent) => void;
 
function logLayout(e: LayoutChangeEvent) {
  const { width, height } = e.nativeEvent.layout;
  console.log({ width, height });
}
 
// Prefer keyof typeof styles for style keys tied to StyleSheet.create
const styles = StyleSheet.create({ card: {}, title: {} });
type CardStyleKey = keyof typeof styles; // "card" | "title"

Importa tipos con import type { ... } - mantiene los bundles de Metro limpios y satisface verbatimModuleSyntax si está habilitado.
No uses React.FC para envoltorios - agrega children implícitos y oscurece genéricos.
Para componentes de terceros, ComponentProps<typeof SomeLib.Button> funciona de la misma manera que las primitivas de RN.

Errores Comunes

Tipificación de style como solo ViewStyle - Los llamadores no pueden pasar [styles.base, props.style] o guardias falsy. Solución: Usa StyleProp<ViewStyle>.
Reducción de style de Pressable a ViewStyle - Pressable acepta una función ({ pressed }) => style. Solución: Usa PressableProps["style"] para anulaciones que deben soportar la forma de devolución de llamada.
Esparciendo props antes de los explícitos - {...pressableProps} onPress={mine} se sobrescribe por el esparcimiento si el orden es incorrecto. Solución: Esparce ...pressableProps último solo cuando los llamadores deben anular los valores predeterminados; de lo contrario, desestructura onPress explícitamente.
Duplicando interface ButtonProps a mano - Falta accessibilityState o android_ripple cuando RN agrega props. Solución: Comienza desde ComponentProps<typeof Pressable> y Omit lo que reemplazas.
TextStyle en TextInput - La prop de estilo TextInput incluye props de fuente pero también modelo de caja; confundir con ViewStyle causa errores. Solución: Usa StyleProp<TextStyle> para estilos de texto de entrada; envuelve en View para diseño.
Partial en props de marca requeridos - Partial<CardProps> hace que title sea opcional cuando siempre debe estar presente. Solución: Partial<Pick<CardProps, "style" | "titleStyle">> solo para ranuras opcionales.
Importando ComponentProps desde react - Funciona para proyectos DOM; las primitivas de RN necesitan tipos de react-native para StyleProp y props específicos de la plataforma. Solución: Importa ambos desde react-native cuando esté disponible.

Alternativas

Alternativa	Usar Cuando	No Usar Cuando
`ComponentProps<typeof X>`	Envolviendo primitivas de RN	Las props del componente no se exportan y no son una función componente simple
`interface` escrita a mano	Dos o tres props personalizados en un componente hoja	Envolviendo `Pressable` / `TextInput` con 30+ props nativas opcionales
`React.ComponentPropsWithoutRef`	Elementos DOM web en código compartido `react-native-web`	Módulos nativos puros sin JSX
Librerías de temas (Tamagui, Restyle)	`styled()` basado en tokens con variantes inferidas	Envoltorios únicos - los tipos de utilidad son más ligeros
`satisfies` en objetos de estilo	Literales de objeto en línea sin `StyleSheet.create`	Librerías de componentes publicadas que deben exponer anulaciones `StyleProp`

Preguntas Frecuentes

¿Qué es StyleProp y por qué no usar ViewStyle directamente?

StyleProp<T> coincide con la tipificación real de prop de estilo de React Native.
Permite arrays, estilos registrados y entradas falsy para estilos condicionales.
Solo ViewStyle rechaza [styles.a, styles.b] y condition && styles.c.

¿Cómo extiendo Pressable sin listar cada prop?

type PressableProps = ComponentProps<typeof Pressable>;
interface IconButtonProps extends Omit<PressableProps, "children"> {
  icon: React.ReactNode;
}

ComponentProps<typeof Pressable> incluye onPress, disabled, hitSlop, y props de accesibilidad.
Omit elimina solo lo que tu API reemplaza.

¿Cómo tipifiques una devolución de llamada de función de estilo Pressable?

Usa PressableProps["style"] - es StyleProp<ViewStyle> | ((state) => StyleProp<ViewStyle>).
No asignes el resultado de la devolución de llamada a solo ViewStyle.

¿Cuándo debo usar Pick vs Omit?

Omit<Big, "a" | "b"> cuando la mayoría de los props se reenvían y eliminas algunos.
Pick<Big, "a" | "b"> cuando expones una superficie pública pequeña (resumen de fila de lista).
Componer: Pick<Device, "id" | "name"> para tarjetas, Device completo para pantallas de detalle.

¿ComponentProps funciona con componentes forwardRef?

Para RN TextInput y librerías que aún usan forwardRef, ComponentPropsWithRef<typeof TextInput> incluye ref.
React 19 permite ref como una prop regular en componentes de función - ComponentProps a menudo es suficiente.

¿Cómo tipifiques onChangeText sin copiar la firma?

type TextInputProps = ComponentProps<typeof TextInput>;
type OnChangeText = TextInputProps["onChangeText"];

El acceso indexado extrae el tipo exacto del manejador de la primitiva.
Se mantiene correcto si React Native actualiza la firma.

¿Qué es RegisteredStyle?

El tipo opaco devuelto por las claves de StyleSheet.create.
Asignable a StyleProp<T> - los llamadores pueden pasar styles.card directamente.
Preferir StyleSheet.create así las claves se verifican exhaustivamente.

¿Puedo usar Partial para anulaciones de temas?

type Theme = { colors: { primary: string; background: string }; spacing: { md: number } };
type ThemeOverrides = Partial<Theme>;

Sí para fusiones de configuración anidadas.
No hagas Partial en props de componentes requeridos como title a menos que el componente realmente permita su omisión.

¿Cómo tipifiques devoluciones de llamada de diseño?

import type { LayoutChangeEvent } from "react-native";
 
function onLayout(e: LayoutChangeEvent) {
  const { x, y, width, height } = e.nativeEvent.layout;
}

Usa los tipos de evento exportados de RN - no inventes formas de evento personalizadas.

¿Debo importar tipos de utilidad desde react o react-native?

StyleProp, ViewStyle, GestureResponderEvent - desde react-native.
ComponentProps está disponible desde ambos; prefiere react-native en archivos solo de RN para un sitio de importación.

¿Cómo tipifiques props de fuente de Imagen?

import type { ImageProps, ImageSourcePropType } from "react-native";
 
type AvatarProps = Pick<ImageProps, "source" | "accessibilityLabel"> & {
  size: number;
};

ImageSourcePropType cubre formas require() y { uri }.
Pick<ImageProps, ...> reenvía resizeMode y accesibilidad cuando sea necesario.

¿Qué pasa con las utilidades Readonly y Required?

Readonly<T> para objetos de configuración que no deben mutar después de la creación.
Required<Pick<T, "id">> obliga a claves específicas mientras deja otros opcionales a través de la intersección.
Menos común que Pick/Omit pero útil para configuraciones de aplicación inmutables.

Relacionado

TypeScript en Conceptos Básicos de RN - ejemplos introductorios ComponentProps y Pick
Tipificación de Componentes y Props - uniones discriminadas y contratos de props genéricos
Vistas, Texto y Componentes Principales - StyleProp en primitivas de diseño
Manejo de Eventos y Touchables - patrones Pressable y hitSlop
Tipificación de Respuestas de API y Zod - Pick/Omit en tipos de esquema inferidos
TypeScript en Mejores Prácticas de RN - convenciones de equipo para envoltorios

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).

Tipos de Utilidad para RN

Buscar en la documentación

Tipos de Utilidad para RN