Tipos Utilitários para RN

Q: O que é StyleProp e por que não usar ViewStyle diretamente?

StyleProp corresponde ao tipo real da prop de estilo do React Native. Permite arrays, estilos registrados e entradas falsy para estilização condicional. ViewStyle sozinho rejeita [styles.a, styles.b] e condition && styles.c.

Q: Como estendo Pressable sem listar todas as props?

ComponentProps inclui onPress, disabled, hitSlop e props de acessibilidade. Omit remove apenas o que sua API substitui.

Q: Como tipar uma função de callback de estilo Pressable?

Use PressableProps["style"] - é StyleProp | ((state) => StyleProp). Não atribua o resultado do callback apenas a ViewStyle.

Q: Quando devo usar Pick vs Omit?

Omit quando a maioria das props é encaminhada e você remove algumas. Pick ao expor uma pequena superfície pública (resumo de linha de lista). Componha: Pick para cartões, Device completo para telas de detalhes.

Q: ComponentProps funciona com componentes forwardRef?

Para RN TextInput e bibliotecas que ainda usam forwardRef, ComponentPropsWithRef inclui ref. O React 19 permite ref como uma prop regular em componentes de função - ComponentProps geralmente é suficiente.

Q: O que é RegisteredStyle?

O tipo opaco retornado pelas chaves de StyleSheet.create. Atribuível a StyleProp - chamadores podem passar styles.card diretamente. Prefira StyleSheet.create para que as chaves sejam verificadas exaustivamente.

Q: Posso usar Partial para substituições de tema?

Sim para mesclagens de configuração aninhadas. Não use Partial em props de componente obrigatórias como title, a menos que o componente realmente permita omissão.

Q: Devo importar tipos utilitários de react ou react-native?

StyleProp, ViewStyle, GestureResponderEvent - de react-native. ComponentProps está disponível em ambos; prefira react-native em arquivos apenas RN para um único local de importação.

React Native envia superfícies de props ricas em componentes integrados. Tipos utilitários do TypeScript - especialmente StyleProp e ComponentProps - permitem estender Pressable, Text e View sem duplicar dezenas de props opcionais ou quebrar arrays de estilos.

Receita

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

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

Quando usar isso:

Envolver Pressable, TextInput ou ScrollView com uma API de sistema de design.
Aceitar substituições de style opcionais que os chamadores passam como arrays ([base, condition && active]).
Encaminhar props de acessibilidade e de teste (accessibilityLabel, testID) sem listá-las novamente.
Construir componentes compostos que espalham as props restantes para um primitivo.
Substituir wrappers React.FC onde você precisa de controle preciso sobre children.

Exemplo de Trabalho

// components/Card.tsx - Wrapper View com slots de estilo tipados
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 com props encaminhadas
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 com manipulador de alteração tipado
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,
  },
});

O que isso demonstra:

StyleProp<ViewStyle> em Card aceita arrays de chamadores e entradas falsy da mesma forma que View.
ComponentProps<typeof Pressable> captura onPress, disabled, hitSlop e props de acessibilidade para encaminhamento.
PressableProps["style"] preserva o tipo de callback no estilo de função - não apenas ViewStyle.
Omit<TextInputProps, "style"> divide a estilização do contêiner vs. a entrada sem perder as props de teclado ou de capitalização automática.
TextInputProps["onChangeText"] extrai a assinatura exata do manipulador do primitivo.

Mergulho Profundo

Como Funciona

StyleProp<T> é uma união: T | RecursiveArray<T | Falsy> | RegisteredStyle<T> - espelha o que as props de estilo do RN aceitam.
ComponentProps<C> (reexportado de react-native) resolve as props para um tipo de componente ou elemento intrínseco.
Omit<T, K> remove chaves que você substitui por uma API mais restrita (children → label).
Pick<T, K> seleciona um subconjunto - útil para pacotes de props de "resumo" em linhas de lista.
Partial<T> torna todas as chaves opcionais - comum para substituições de tema e atualizações no estilo PATCH.

Tipos de Estilo RN em Resumo

Tipo	Uso em
`StyleProp<ViewStyle>`	Wrappers de `View`, `Pressable`, `SafeAreaView`
`StyleProp<TextStyle>`	Estilização de texto de `Text`, `TextInput`
`StyleProp<ImageStyle>`	`Image`, `ImageBackground`
`ViewStyle` / `TextStyle` / `ImageStyle`	Objetos de estilo único dentro de `StyleSheet.create`
`RegisteredStyle<T>`	Tipo de retorno das chaves de `StyleSheet.create` - ainda atribuível a `StyleProp<T>`

import { StyleSheet, type ViewStyle, type StyleProp } from "react-native";
 
const styles = StyleSheet.create({
  row: { flexDirection: "row" },
});
 
// Todos os usos válidos de StyleProp:
const a: StyleProp<ViewStyle> = styles.row;
const b: StyleProp<ViewStyle> = [styles.row, { padding: 8 }];
const c: StyleProp<ViewStyle> = [styles.row, false && { opacity: 0 }];

Padrões de ComponentProps

Padrão	Código	Por quê
Encaminhamento Completo	`ComponentProps<typeof Pressable>`	Wrapper "drop-in"
Remover props substituídas	`Omit<Props, "children" \| "style">`	API `label` personalizada
Extrair um manipulador	`ComponentProps<typeof TextInput>["onChangeText"]`	Aridade exata do callback
Encaminhamento de ref	`ComponentPropsWithRef<typeof TextInput>`	Ao usar `forwardRef` (o ref como prop do React 19 também funciona)

Notas de TypeScript

import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 
// Tipos de evento para touchables personalizados - não invente formas de evento sintéticas
type OnPress = (event: GestureResponderEvent) => void;
 
function logLayout(e: LayoutChangeEvent) {
  const { width, height } = e.nativeEvent.layout;
  console.log({ width, height });
}
 
// Prefira keyof typeof styles para chaves de estilo ligadas a StyleSheet.create
const styles = StyleSheet.create({ card: {}, title: {} });
type CardStyleKey = keyof typeof styles; // "card" | "title"

Importe tipos com import type { ... } - mantém os bundles do Metro limpos e satisfaz verbatimModuleSyntax se habilitado.
Não use React.FC para wrappers - ele adiciona children implícitos e obscurece genéricos.
Para componentes de terceiros, ComponentProps<typeof SomeLib.Button> funciona da mesma forma que os primitivos do RN.

Armadilhas

Tipar style como apenas ViewStyle - Chamadores não podem passar [styles.base, props.style] ou guardas falsy. Correção: Use StyleProp<ViewStyle>.
Restringir o style do Pressable a ViewStyle - Pressable aceita uma função ({ pressed }) => style. Correção: Use PressableProps["style"] para substituições que devem suportar a forma de callback.
Espalhar props antes das explícitas - {...pressableProps} onPress={mine} é sobrescrito pelo spread se a ordem estiver errada. Correção: Espalhe ...pressableProps por último apenas quando os chamadores devem substituir os padrões; caso contrário, desestruture onPress explicitamente.
Duplicar interface ButtonProps manualmente - Falta accessibilityState ou android_ripple quando o RN adiciona props. Correção: Comece com ComponentProps<typeof Pressable> e Omit o que você substitui.
TextStyle em TextInput - A prop de estilo do TextInput inclui props de fonte, mas também o modelo de caixa; confundir com ViewStyle causa erros. Correção: Use StyleProp<TextStyle> para estilização de texto de entrada; envolva em View para layout.
Partial em props de marca obrigatórias - Partial<CardProps> torna title opcional quando ele deve estar sempre presente. Correção: Partial<Pick<CardProps, "style" | "titleStyle">> apenas para slots opcionais.
Importar ComponentProps de react - Funciona para projetos DOM; primitivos RN precisam de tipos react-native para StyleProp e props específicas da plataforma. Correção: Importe ambos de react-native onde disponível.

Alternativas

Alternativa	Use Quando	Não Use Quando
`ComponentProps<typeof X>`	Envolver primitivos RN	As props do componente não são exportadas e não são um componente de função simples
`interface` escrito à mão	Duas ou três props personalizadas em um componente folha	Envolver `Pressable` / `TextInput` com mais de 30 props nativas opcionais
`React.ComponentPropsWithoutRef`	Elementos DOM Web em código compartilhado `react-native-web`	Módulos nativos puros sem JSX
Bibliotecas de tema (Tamagui, Restyle)	`styled()` baseado em token com variantes inferidas	Wrappers pontuais - tipos utilitários são mais leves
`satisfies` em objetos de estilo	Literais de objeto inline sem `StyleSheet.create`	Bibliotecas de componentes publicadas que devem expor substituições `StyleProp`

FAQs

O que é StyleProp e por que não usar ViewStyle diretamente?

StyleProp<T> corresponde ao tipo real da prop de estilo do React Native.
Permite arrays, estilos registrados e entradas falsy para estilização condicional.
ViewStyle sozinho rejeita [styles.a, styles.b] e condition && styles.c.

Como estendo Pressable sem listar todas as props?

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

ComponentProps<typeof Pressable> inclui onPress, disabled, hitSlop e props de acessibilidade.
Omit remove apenas o que sua API substitui.

Como tipar uma função de callback de estilo Pressable?

Use PressableProps["style"] - é StyleProp<ViewStyle> | ((state) => StyleProp<ViewStyle>).
Não atribua o resultado do callback apenas a ViewStyle.

Quando devo usar Pick vs Omit?

Omit<Big, "a" | "b"> quando a maioria das props é encaminhada e você remove algumas.
Pick<Big, "a" | "b"> ao expor uma pequena superfície pública (resumo de linha de lista).
Componha: Pick<Device, "id" | "name"> para cartões, Device completo para telas de detalhes.

ComponentProps funciona com componentes forwardRef?

Para RN TextInput e bibliotecas que ainda usam forwardRef, ComponentPropsWithRef<typeof TextInput> inclui ref.
O React 19 permite ref como uma prop regular em componentes de função - ComponentProps geralmente é suficiente.

Como tipar onChangeText sem copiar a assinatura?

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

O acesso indexado extrai o tipo exato do manipulador do primitivo.
Permanece correto se o React Native atualizar a assinatura.

O que é RegisteredStyle?

O tipo opaco retornado pelas chaves de StyleSheet.create.
Atribuível a StyleProp<T> - chamadores podem passar styles.card diretamente.
Prefira StyleSheet.create para que as chaves sejam verificadas exaustivamente.

Posso usar Partial para substituições de tema?

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

Sim para mesclagens de configuração aninhadas.
Não use Partial em props de componente obrigatórias como title, a menos que o componente realmente permita omissão.

Como tipar callbacks de layout?

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

Use os tipos de evento exportados pelo RN - não invente formas de evento personalizadas.

Devo importar tipos utilitários de react ou react-native?

StyleProp, ViewStyle, GestureResponderEvent - de react-native.
ComponentProps está disponível em ambos; prefira react-native em arquivos apenas RN para um único local de importação.

Como tipar props de fonte de imagem?

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

ImageSourcePropType cobre formas require() e { uri }.
Pick<ImageProps, ...> encaminha resizeMode e acessibilidade quando necessário.

E quanto aos utilitários Readonly e Required?

Readonly<T> para objetos de configuração que não devem ser mutados após a criação.
Required<Pick<T, "id">> força chaves específicas enquanto deixa outras opcionais por meio de interseção.
Menos comum que Pick/Omit, mas útil para configurações de aplicativos imutáveis.

Relacionados

Noções Básicas de TypeScript em RN - exemplos introdutórios de ComponentProps e Pick
Tipando Componentes e Props - uniões discriminadas e contratos de props genéricos
Views, Text e Componentes Principais - StyleProp em primitivos de layout
Manipulação de Eventos e Touchables - padrões Pressable e hitSlop
Tipando Respostas de API e Zod - Pick/Omit em tipos de esquema inferidos
Melhores Práticas de TypeScript em RN - convenções da equipe para wrappers

Versões da 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.

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

Quando usar isso:

Envolver Pressable, TextInput ou ScrollView com uma API de sistema de design.
Aceitar substituições de style opcionais que os chamadores passam como arrays ([base, condition && active]).
Encaminhar props de acessibilidade e de teste (accessibilityLabel, testID) sem listá-las novamente.
Construir componentes compostos que espalham as props restantes para um primitivo.
Substituir wrappers React.FC onde você precisa de controle preciso sobre children.

Exemplo de Trabalho

// components/Card.tsx - Wrapper View com slots de estilo tipados
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 com props encaminhadas
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 com manipulador de alteração tipado
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,
  },
});

O que isso demonstra:

StyleProp<ViewStyle> em Card aceita arrays de chamadores e entradas falsy da mesma forma que View.
ComponentProps<typeof Pressable> captura onPress, disabled, hitSlop e props de acessibilidade para encaminhamento.
PressableProps["style"] preserva o tipo de callback no estilo de função - não apenas ViewStyle.
Omit<TextInputProps, "style"> divide a estilização do contêiner vs. a entrada sem perder as props de teclado ou de capitalização automática.
TextInputProps["onChangeText"] extrai a assinatura exata do manipulador do primitivo.

Mergulho Profundo

Como Funciona

StyleProp<T> é uma união: T | RecursiveArray<T | Falsy> | RegisteredStyle<T> - espelha o que as props de estilo do RN aceitam.
ComponentProps<C> (reexportado de react-native) resolve as props para um tipo de componente ou elemento intrínseco.
Omit<T, K> remove chaves que você substitui por uma API mais restrita (children → label).
Pick<T, K> seleciona um subconjunto - útil para pacotes de props de "resumo" em linhas de lista.
Partial<T> torna todas as chaves opcionais - comum para substituições de tema e atualizações no estilo PATCH.

Tipos de Estilo RN em Resumo

Tipo	Uso em
`StyleProp<ViewStyle>`	Wrappers de `View`, `Pressable`, `SafeAreaView`
`StyleProp<TextStyle>`	Estilização de texto de `Text`, `TextInput`
`StyleProp<ImageStyle>`	`Image`, `ImageBackground`
`ViewStyle` / `TextStyle` / `ImageStyle`	Objetos de estilo único dentro de `StyleSheet.create`
`RegisteredStyle<T>`	Tipo de retorno das chaves de `StyleSheet.create` - ainda atribuível a `StyleProp<T>`

import { StyleSheet, type ViewStyle, type StyleProp } from "react-native";
 
const styles = StyleSheet.create({
  row: { flexDirection: "row" },
});
 
// Todos os usos válidos de StyleProp:
const a: StyleProp<ViewStyle> = styles.row;
const b: StyleProp<ViewStyle> = [styles.row, { padding: 8 }];
const c: StyleProp<ViewStyle> = [styles.row, false && { opacity: 0 }];

Padrões de ComponentProps

Padrão	Código	Por quê
Encaminhamento Completo	`ComponentProps<typeof Pressable>`	Wrapper "drop-in"
Remover props substituídas	`Omit<Props, "children" \| "style">`	API `label` personalizada
Extrair um manipulador	`ComponentProps<typeof TextInput>["onChangeText"]`	Aridade exata do callback
Encaminhamento de ref	`ComponentPropsWithRef<typeof TextInput>`	Ao usar `forwardRef` (o ref como prop do React 19 também funciona)

Notas de TypeScript

import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 
// Tipos de evento para touchables personalizados - não invente formas de evento sintéticas
type OnPress = (event: GestureResponderEvent) => void;
 
function logLayout(e: LayoutChangeEvent) {
  const { width, height } = e.nativeEvent.layout;
  console.log({ width, height });
}
 
// Prefira keyof typeof styles para chaves de estilo ligadas a StyleSheet.create
const styles = StyleSheet.create({ card: {}, title: {} });
type CardStyleKey = keyof typeof styles; // "card" | "title"

Importe tipos com import type { ... } - mantém os bundles do Metro limpos e satisfaz verbatimModuleSyntax se habilitado.
Não use React.FC para wrappers - ele adiciona children implícitos e obscurece genéricos.
Para componentes de terceiros, ComponentProps<typeof SomeLib.Button> funciona da mesma forma que os primitivos do RN.

Armadilhas

Tipar style como apenas ViewStyle - Chamadores não podem passar [styles.base, props.style] ou guardas falsy. Correção: Use StyleProp<ViewStyle>.
Restringir o style do Pressable a ViewStyle - Pressable aceita uma função ({ pressed }) => style. Correção: Use PressableProps["style"] para substituições que devem suportar a forma de callback.
Espalhar props antes das explícitas - {...pressableProps} onPress={mine} é sobrescrito pelo spread se a ordem estiver errada. Correção: Espalhe ...pressableProps por último apenas quando os chamadores devem substituir os padrões; caso contrário, desestruture onPress explicitamente.
Duplicar interface ButtonProps manualmente - Falta accessibilityState ou android_ripple quando o RN adiciona props. Correção: Comece com ComponentProps<typeof Pressable> e Omit o que você substitui.
TextStyle em TextInput - A prop de estilo do TextInput inclui props de fonte, mas também o modelo de caixa; confundir com ViewStyle causa erros. Correção: Use StyleProp<TextStyle> para estilização de texto de entrada; envolva em View para layout.
Partial em props de marca obrigatórias - Partial<CardProps> torna title opcional quando ele deve estar sempre presente. Correção: Partial<Pick<CardProps, "style" | "titleStyle">> apenas para slots opcionais.
Importar ComponentProps de react - Funciona para projetos DOM; primitivos RN precisam de tipos react-native para StyleProp e props específicas da plataforma. Correção: Importe ambos de react-native onde disponível.

Alternativas

Alternativa	Use Quando	Não Use Quando
`ComponentProps<typeof X>`	Envolver primitivos RN	As props do componente não são exportadas e não são um componente de função simples
`interface` escrito à mão	Duas ou três props personalizadas em um componente folha	Envolver `Pressable` / `TextInput` com mais de 30 props nativas opcionais
`React.ComponentPropsWithoutRef`	Elementos DOM Web em código compartilhado `react-native-web`	Módulos nativos puros sem JSX
Bibliotecas de tema (Tamagui, Restyle)	`styled()` baseado em token com variantes inferidas	Wrappers pontuais - tipos utilitários são mais leves
`satisfies` em objetos de estilo	Literais de objeto inline sem `StyleSheet.create`	Bibliotecas de componentes publicadas que devem expor substituições `StyleProp`

FAQs

O que é StyleProp e por que não usar ViewStyle diretamente?

StyleProp<T> corresponde ao tipo real da prop de estilo do React Native.
Permite arrays, estilos registrados e entradas falsy para estilização condicional.
ViewStyle sozinho rejeita [styles.a, styles.b] e condition && styles.c.

Como estendo Pressable sem listar todas as props?

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

ComponentProps<typeof Pressable> inclui onPress, disabled, hitSlop e props de acessibilidade.
Omit remove apenas o que sua API substitui.

Como tipar uma função de callback de estilo Pressable?

Use PressableProps["style"] - é StyleProp<ViewStyle> | ((state) => StyleProp<ViewStyle>).
Não atribua o resultado do callback apenas a ViewStyle.

Quando devo usar Pick vs Omit?

Omit<Big, "a" | "b"> quando a maioria das props é encaminhada e você remove algumas.
Pick<Big, "a" | "b"> ao expor uma pequena superfície pública (resumo de linha de lista).
Componha: Pick<Device, "id" | "name"> para cartões, Device completo para telas de detalhes.

ComponentProps funciona com componentes forwardRef?

Para RN TextInput e bibliotecas que ainda usam forwardRef, ComponentPropsWithRef<typeof TextInput> inclui ref.
O React 19 permite ref como uma prop regular em componentes de função - ComponentProps geralmente é suficiente.

Como tipar onChangeText sem copiar a assinatura?

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

O acesso indexado extrai o tipo exato do manipulador do primitivo.
Permanece correto se o React Native atualizar a assinatura.

O que é RegisteredStyle?

O tipo opaco retornado pelas chaves de StyleSheet.create.
Atribuível a StyleProp<T> - chamadores podem passar styles.card diretamente.
Prefira StyleSheet.create para que as chaves sejam verificadas exaustivamente.

Posso usar Partial para substituições de tema?

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

Sim para mesclagens de configuração aninhadas.
Não use Partial em props de componente obrigatórias como title, a menos que o componente realmente permita omissão.

Como tipar callbacks de layout?

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

Use os tipos de evento exportados pelo RN - não invente formas de evento personalizadas.

Devo importar tipos utilitários de react ou react-native?

StyleProp, ViewStyle, GestureResponderEvent - de react-native.
ComponentProps está disponível em ambos; prefira react-native em arquivos apenas RN para um único local de importação.

Como tipar props de fonte de imagem?

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

ImageSourcePropType cobre formas require() e { uri }.
Pick<ImageProps, ...> encaminha resizeMode e acessibilidade quando necessário.

E quanto aos utilitários Readonly e Required?

Readonly<T> para objetos de configuração que não devem ser mutados após a criação.
Required<Pick<T, "id">> força chaves específicas enquanto deixa outras opcionais por meio de interseção.
Menos comum que Pick/Omit, mas útil para configurações de aplicativos imutáveis.

Relacionados

Noções Básicas de TypeScript em RN - exemplos introdutórios de ComponentProps e Pick
Tipando Componentes e Props - uniões discriminadas e contratos de props genéricos
Views, Text e Componentes Principais - StyleProp em primitivos de layout
Manipulação de Eventos e Touchables - padrões Pressable e hitSlop
Tipando Respostas de API e Zod - Pick/Omit em tipos de esquema inferidos
Melhores Práticas de TypeScript em RN - convenções da equipe para wrappers

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

Tipos Utilitários para RN

Buscar na documentação

Tipos Utilitários para RN