Tipagem de Componentes e Props

Q: Devo usar interface ou type para props de componentes?

Qualquer um funciona. Use interface quando esperar mesclagem de declaração ou extensão entre arquivos; use type para uniões, tipos mapeados e composições Omit/Pick. A consistência dentro de um sistema de design é mais importante do que a palavra-chave.

Q: Como tipar children em componentes de função React 19?

Adicione children?: React.ReactNode ao seu tipo de props quando o componente renderizar um slot. Não confie em React.FC - não é mais o padrão recomendado. Para APIs mais rigorosas, restrinja para ReactElement ou um tipo de componente específico.

Q: Qual é o tipo correto para props de estilo?

Use StyleProp em View, StyleProp em Text e StyleProp em Image. Estes aceitam um objeto de estilo, arrays e entradas falsy condicionais (condition && styles.x).

Q: Como uniões discriminadas são restritas dentro do JSX?

Restrinja no corpo da função com if (props.variant === "error") antes de retornar JSX. O TypeScript carrega o tipo restrito para esse ramo, então props.onRetry só é obrigatório quando variant é "error".

Q: Como compartilhar props entre dois componentes semelhantes?

Extraia um tipo base (RowBaseProps) e intercale com tipos específicos de variante. Use Pick e Omit para reutilizar fatias de primitivas: Pick.

Q: Como tipar um renderItem genérico de FlatList?

Passe o genérico do item para FlatList: item é inferido como Place sem casts manuais.

Q: Como tipar props de callback opcionais?

Use campos opcionais: onPress?: () => void. Quando o callback é necessário apenas para um ramo da união, coloque-o dentro desse ramo de uma união discriminada em vez de marcá-lo como opcional globalmente.

Q: Armadilha: Por que espalhar props quebra o autocompletar?

{...rest} onde rest é tipado muito amplamente (por exemplo, Record) perde a verificação de chave. Tipifique rest como Omit ou ViewProps para que apenas chaves nativas válidas sejam espalhadas.

Q: Como tipar uniões de nomes de ícones?

Use uniões de literais de string ("star" | "pin") ou mapas as const: Uniões literais capturam erros de digitação em tempo de compilação e impulsionam a exaustividade do switch.

Genéricos, uniões discriminadas e contratos de props reutilizáveis transformam componentes React Native em APIs auto-documentadas. Tipos de props fortes capturam combinações inválidas em tempo de compilação - antes que elas apareçam como bugs de layout no iOS e Android.

Receita

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

import { Pressable, StyleSheet, Text, View, type ViewProps } from "react-native";
 
// Contrato base reutilizável - layout compartilhado + testID
type BoxProps = ViewProps & {
  testID?: string;
};
 
// União discriminada - apenas combinações de props válidas compilam
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}>Carregando…</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}>Tentar novamente</Text>
        </Pressable>
      </View>
    );
  }
  return <Text style={styles.success}>{props.message}</Text>;
}
 
// Linha de lista genérica - T flui do chamador para 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>
  );
}

Quando usar isso: Você está construindo primitivas de UI compartilhadas, linhas de lista ou componentes orientados por variantes e deseja que o TypeScript rejeite combinações de props impossíveis antes do tempo de execução.

Exemplo de Trabalho

import { memo } from "react";
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
  type PressableProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
// ---- Contratos compartilhados ----
 
type WithTestID = { testID?: string };
 
type RowBaseProps = WithTestID & {
  title: string;
  subtitle?: string;
  style?: StyleProp<ViewStyle>;
};
 
// Slot de mídia discriminado - ícone 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 seção 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;
};
 
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>
  );
}
 
// ---- Conexão da tela ----
 
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: "Salvos", 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}>Ainda não há locais.</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" },
});

O que isso demonstra:

RowBaseProps centraliza campos compartilhados; MediaProps adiciona chaves específicas de variante através de um discriminador.
SectionList<T> preserva o tipo do item de sections através de renderItem.
PressableProps["onPress"] reutiliza o tipo do manipulador da plataforma em vez de duplicá-lo.
Componentes de linha memo combinam com contratos de props estáveis para desempenho da lista.

Mergulho Profundo

Como Funciona

Componentes de função são tipados anotando o parâmetro de props (function Row(props: RowProps)).
TypeScript restringe uniões discriminadas dentro de if/switch no campo discriminador (variant, media).
Componentes genéricos (<T>) permitem que os chamadores passem tipos de domínio (Place) sem casts no local da chamada.
React.ComponentProps<typeof Pressable> e ViewProps herdam props primitivas do RN (style, accessibilityLabel, testID).
StyleProp<ViewStyle> é o tipo correto para style - ele aceita um único estilo, arrays e entradas falsy.
React 19 mantém children fora dos padrões React.FC; adicione children?: React.ReactNode apenas quando sua API aceitar slots.

Padrões de Contrato de Props

Padrão	Formato do tipo	Use quando
Base + extensão	`BaseProps & { extra: string }`	Vários componentes compartilham `testID`, `style`
União discriminada	`{ kind: "a"; a: string } \| { kind: "b"; b: number }`	Conjuntos de props mutuamente exclusivos
Props de dados genéricos	`<T> { data: T[]; renderItem: (t: T) => … }`	Listas, seletores, autocompletar
`Omit` / `Pick`	`Omit<PressableProps, "children">`	Componentes wrapper que possuem children
Render prop	`{ children: (state: S) => ReactNode }`	Primitivas headless

Notas do TypeScript

import type { ComponentProps, ReactElement, ReactNode } from "react";
import { Pressable, Text, type TextProps, type ViewProps } from "react-native";
 
// Herda props primitivas, substitui apenas o que você possui
type CardProps = ViewProps & {
  title: string;
  footer?: ReactNode;
};
 
// Extrai onPress do Pressable sem importar o tipo de valor manualmente
type IconButtonProps = Pick<ComponentProps<typeof Pressable>, "onPress" | "disabled"> & {
  label: string;
  icon: ReactElement;
};
 
// Children estritos - apenas nós de Texto permitidos dentro de um wrapper de tipografia
type TypographyProps = TextProps & {
  children: string | ReactElement<typeof Text>;
};

Parâmetros e Valores de Retorno

Parâmetro	Tipo	Descrição
`props`	Interface nomeada ou tipo inline	API pública do componente
`style`	`StyleProp<ViewStyle \| TextStyle \| ImageStyle>`	Objeto(s) de estilo da plataforma
`children`	`ReactNode` (explícito)	Conteúdo do slot quando o componente renderiza children
Genérico `T`	Tipo de domínio fornecido pelo chamador	Tipo de item para listas e seletores
Retorno	`ReactElement \| null` (inferido)	Componentes RN retornam elementos; `null` não renderiza nada

Armadilhas

Opcional tudo em props de variante - { variant?: "a" \| "b"; a?: string; b?: number } permite que os chamadores passem { variant: "a", b: 1 } sem erro. Correção: Use uma união discriminada com campos obrigatórios por ramo.
Duplicar tipos de onPress - Escrever manualmente (event: GestureResponderEvent) => void se desvia das atualizações do RN. Correção: Use PressableProps["onPress"] ou ComponentProps<typeof Pressable>["onPress"].
Casting de dados de lista genérica - data as Place[] dentro de uma lista compartilhada oculta erros do chamador. Correção: Empurre o genérico para o componente de lista: FlatList<Place>, SectionList<Place>.
Espalhar props desconhecidas em View - {...rest} de um tipo amplo pode passar chaves inválidas para views nativas. Correção: Use Omit para chaves conhecidas e tipifique rest como ViewProps ou um Pick restrito.
Tipos de objeto inline em cada componente - ({ name }: { name: string }) está bom uma vez; formas repetidas pertencem a um tipo nomeado. Correção: Exporte ProfileCardProps do mesmo arquivo que o componente.
Esquecer readonly em arrays - Props tipadas como T[] permitem que os chamadores façam .push() em arrays passados. Correção: Prefira readonly T[] para props de dados somente leitura.
Usar React.FC para código novo - children implícitos e peculiaridades legadas adicionam ruído no React 19. Correção: Digite o parâmetro de props diretamente em uma função nomeada.

Alternativas

Alternativa	Use quando	Não use quando
Uniões discriminadas	Conjuntos de props mutuamente exclusivos (tipo de mídia, severidade de alerta)	Todas as props são independentes e opcionais
Genéricos (`<T>`)	Listas, tabelas, seletores sobre tipos de itens desconhecidos	Telas de uso único com um tipo de domínio
`ComponentProps<typeof X>`	Envolvendo primitivas do RN	Você precisa de uma superfície de API substancialmente diferente
Zod + tipos inferidos	Props originam-se de JSON ou deep links	UI puramente interna com props estáticas
`satisfies` em objetos de estilo	Objetos de token de design que devem permanecer restritos	Entradas únicas de `StyleSheet.create`

FAQs

Devo usar interface ou type para props de componentes?

Qualquer um funciona. Use interface quando esperar mesclagem de declaração ou extensão entre arquivos; use type para uniões, tipos mapeados e composições Omit/Pick. A consistência dentro de um sistema de design é mais importante do que a palavra-chave.

Como tipar children em componentes de função React 19?

Adicione children?: React.ReactNode ao seu tipo de props quando o componente renderizar um slot. Não confie em React.FC - não é mais o padrão recomendado. Para APIs mais rigorosas, restrinja para ReactElement ou um tipo de componente específico.

Qual é o tipo correto para props de estilo?

Use StyleProp<ViewStyle> em View, StyleProp<TextStyle> em Text e StyleProp<ImageStyle> em Image. Estes aceitam um objeto de estilo, arrays e entradas falsy condicionais (condition && styles.x).

Como uniões discriminadas são restritas dentro do JSX?

Restrinja no corpo da função com if (props.variant === "error") antes de retornar JSX. O TypeScript carrega o tipo restrito para esse ramo, então props.onRetry só é obrigatório quando variant é "error".

Como compartilhar props entre dois componentes semelhantes?

Extraia um tipo base (RowBaseProps) e intercale com tipos específicos de variante. Use Pick e Omit para reutilizar fatias de primitivas: Pick<PressableProps, "onPress" | "disabled">.

Como tipar um renderItem genérico de FlatList?

Passe o genérico do item para FlatList<T>:

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

item é inferido como Place sem casts manuais.

Devo exportar tipos de props de arquivos de componentes?

Exporte quando outros módulos envolverem ou estenderem o componente - telas de navegação, histórias do Storybook e auxiliares de teste se beneficiam de export type ListRowProps. Mantenha props auxiliares internas não exportadas.

Como tipar props de callback opcionais?

Use campos opcionais: onPress?: () => void. Quando o callback é necessário apenas para um ramo da união, coloque-o dentro desse ramo de uma união discriminada em vez de marcá-lo como opcional globalmente.

Armadilha: Por que espalhar props quebra o autocompletar?

{...rest} onde rest é tipado muito amplamente (por exemplo, Record<string, unknown>) perde a verificação de chave. Tipifique rest como Omit<CardProps, "title"> ou ViewProps para que apenas chaves nativas válidas sejam espalhadas.

Como tipar uniões de nomes de ícones?

Use uniões de literais de string ("star" | "pin") ou mapas as const:

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

Uniões literais capturam erros de digitação em tempo de compilação e impulsionam a exaustividade do switch.

Posso usar valores de parâmetro padrão com props tipadas?

Sim - function Counter({ initial = 0 }: { initial?: number }) é idiomático. Os padrões são aplicados em tempo de execução; o TypeScript ainda trata a prop como opcional no lado do chamador.

Como tipar children de render-prop?

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

O retorno do callback deve ser ReactNode; use ReactElement apenas quando você exigir um único elemento.

Como a verificação estrita de nulos afeta as props?

Com strict: true, props opcionais são T | undefined. Use prop ?? fallback ou guardas explícitas. Evite asserções não nulas prop! em componentes - os chamadores podem omitir o campo.

Componentes de linha de lista devem usar memo com props tipadas?

Sim, quando as linhas são caras e recebem props estáveis. Combine memo com um tipo de props nomeado para que comparadores e testes permaneçam claros. Lambdas inline instáveis onPress={() => …} anulam a memoização.

Como estender props de componentes de terceiros?

Use ComponentProps<typeof ThirdPartyButton> ou o tipo de props exportado pelo pacote. Reexporte uma versão restrita com Omit se você ocultar algumas props upstream do seu sistema de design.

Relacionados

Noções Básicas de TypeScript em RN - padrões tsconfig estritos antes de refinar APIs de componentes
Tipos Utilitários para RN - ComponentProps, StyleProp e auxiliares seguros para estilo
Props, Estado e Re-renderizações em Mobile - como props tipadas fluem quando os pais re-renderizam
Tipagem de Navegação e Parâmetros de Rota - componentes de tela recebendo parâmetros de rota
Tipagem de Respostas de API e Zod - inferir tipos de props a partir de formas de API validadas
Melhores Práticas de TypeScript em RN - convenções de equipe para onde os tipos valem a pena

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, StyleSheet, Text, View, type ViewProps } from "react-native";
 
// Contrato base reutilizável - layout compartilhado + testID
type BoxProps = ViewProps & {
  testID?: string;
};
 
// União discriminada - apenas combinações de props válidas compilam
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}>Carregando…</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}>Tentar novamente</Text>
        </Pressable>
      </View>
    );
  }
  return <Text style={styles.success}>{props.message}</Text>;
}
 
// Linha de lista genérica - T flui do chamador para 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>
  );
}

Exemplo de Trabalho

import { memo } from "react";
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
  type PressableProps,
  type StyleProp,
  type ViewStyle,
} from "react-native";
 
// ---- Contratos compartilhados ----
 
type WithTestID = { testID?: string };
 
type RowBaseProps = WithTestID & {
  title: string;
  subtitle?: string;
  style?: StyleProp<ViewStyle>;
};
 
// Slot de mídia discriminado - ícone 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 seção 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;
};
 
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>
  );
}
 
// ---- Conexão da tela ----
 
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: "Salvos", 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}>Ainda não há locais.</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" },
});

O que isso demonstra:

RowBaseProps centraliza campos compartilhados; MediaProps adiciona chaves específicas de variante através de um discriminador.
SectionList<T> preserva o tipo do item de sections através de renderItem.
PressableProps["onPress"] reutiliza o tipo do manipulador da plataforma em vez de duplicá-lo.
Componentes de linha memo combinam com contratos de props estáveis para desempenho da lista.

Mergulho Profundo

Como Funciona

Componentes de função são tipados anotando o parâmetro de props (function Row(props: RowProps)).
TypeScript restringe uniões discriminadas dentro de if/switch no campo discriminador (variant, media).
Componentes genéricos (<T>) permitem que os chamadores passem tipos de domínio (Place) sem casts no local da chamada.
React.ComponentProps<typeof Pressable> e ViewProps herdam props primitivas do RN (style, accessibilityLabel, testID).
StyleProp<ViewStyle> é o tipo correto para style - ele aceita um único estilo, arrays e entradas falsy.
React 19 mantém children fora dos padrões React.FC; adicione children?: React.ReactNode apenas quando sua API aceitar slots.

Padrões de Contrato de Props

Padrão	Formato do tipo	Use quando
Base + extensão	`BaseProps & { extra: string }`	Vários componentes compartilham `testID`, `style`
União discriminada	`{ kind: "a"; a: string } \| { kind: "b"; b: number }`	Conjuntos de props mutuamente exclusivos
Props de dados genéricos	`<T> { data: T[]; renderItem: (t: T) => … }`	Listas, seletores, autocompletar
`Omit` / `Pick`	`Omit<PressableProps, "children">`	Componentes wrapper que possuem children
Render prop	`{ children: (state: S) => ReactNode }`	Primitivas headless

Notas do TypeScript

import type { ComponentProps, ReactElement, ReactNode } from "react";
import { Pressable, Text, type TextProps, type ViewProps } from "react-native";
 
// Herda props primitivas, substitui apenas o que você possui
type CardProps = ViewProps & {
  title: string;
  footer?: ReactNode;
};
 
// Extrai onPress do Pressable sem importar o tipo de valor manualmente
type IconButtonProps = Pick<ComponentProps<typeof Pressable>, "onPress" | "disabled"> & {
  label: string;
  icon: ReactElement;
};
 
// Children estritos - apenas nós de Texto permitidos dentro de um wrapper de tipografia
type TypographyProps = TextProps & {
  children: string | ReactElement<typeof Text>;
};

Parâmetros e Valores de Retorno

Parâmetro	Tipo	Descrição
`props`	Interface nomeada ou tipo inline	API pública do componente
`style`	`StyleProp<ViewStyle \| TextStyle \| ImageStyle>`	Objeto(s) de estilo da plataforma
`children`	`ReactNode` (explícito)	Conteúdo do slot quando o componente renderiza children
Genérico `T`	Tipo de domínio fornecido pelo chamador	Tipo de item para listas e seletores
Retorno	`ReactElement \| null` (inferido)	Componentes RN retornam elementos; `null` não renderiza nada

Armadilhas

Opcional tudo em props de variante - { variant?: "a" \| "b"; a?: string; b?: number } permite que os chamadores passem { variant: "a", b: 1 } sem erro. Correção: Use uma união discriminada com campos obrigatórios por ramo.
Duplicar tipos de onPress - Escrever manualmente (event: GestureResponderEvent) => void se desvia das atualizações do RN. Correção: Use PressableProps["onPress"] ou ComponentProps<typeof Pressable>["onPress"].
Casting de dados de lista genérica - data as Place[] dentro de uma lista compartilhada oculta erros do chamador. Correção: Empurre o genérico para o componente de lista: FlatList<Place>, SectionList<Place>.
Espalhar props desconhecidas em View - {...rest} de um tipo amplo pode passar chaves inválidas para views nativas. Correção: Use Omit para chaves conhecidas e tipifique rest como ViewProps ou um Pick restrito.
Tipos de objeto inline em cada componente - ({ name }: { name: string }) está bom uma vez; formas repetidas pertencem a um tipo nomeado. Correção: Exporte ProfileCardProps do mesmo arquivo que o componente.
Esquecer readonly em arrays - Props tipadas como T[] permitem que os chamadores façam .push() em arrays passados. Correção: Prefira readonly T[] para props de dados somente leitura.
Usar React.FC para código novo - children implícitos e peculiaridades legadas adicionam ruído no React 19. Correção: Digite o parâmetro de props diretamente em uma função nomeada.

Alternativas

Alternativa	Use quando	Não use quando
Uniões discriminadas	Conjuntos de props mutuamente exclusivos (tipo de mídia, severidade de alerta)	Todas as props são independentes e opcionais
Genéricos (`<T>`)	Listas, tabelas, seletores sobre tipos de itens desconhecidos	Telas de uso único com um tipo de domínio
`ComponentProps<typeof X>`	Envolvendo primitivas do RN	Você precisa de uma superfície de API substancialmente diferente
Zod + tipos inferidos	Props originam-se de JSON ou deep links	UI puramente interna com props estáticas
`satisfies` em objetos de estilo	Objetos de token de design que devem permanecer restritos	Entradas únicas de `StyleSheet.create`

FAQs

Devo usar interface ou type para props de componentes?

Como tipar children em componentes de função React 19?

Qual é o tipo correto para props de estilo?

Como uniões discriminadas são restritas dentro do JSX?

Como compartilhar props entre dois componentes semelhantes?

Extraia um tipo base (RowBaseProps) e intercale com tipos específicos de variante. Use Pick e Omit para reutilizar fatias de primitivas: Pick<PressableProps, "onPress" | "disabled">.

Como tipar um renderItem genérico de FlatList?

Passe o genérico do item para FlatList<T>:

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

item é inferido como Place sem casts manuais.

Devo exportar tipos de props de arquivos de componentes?

Como tipar props de callback opcionais?

Armadilha: Por que espalhar props quebra o autocompletar?

Como tipar uniões de nomes de ícones?

Use uniões de literais de string ("star" | "pin") ou mapas as const:

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

Uniões literais capturam erros de digitação em tempo de compilação e impulsionam a exaustividade do switch.

Posso usar valores de parâmetro padrão com props tipadas?

Sim - function Counter({ initial = 0 }: { initial?: number }) é idiomático. Os padrões são aplicados em tempo de execução; o TypeScript ainda trata a prop como opcional no lado do chamador.

Como tipar children de render-prop?

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

O retorno do callback deve ser ReactNode; use ReactElement apenas quando você exigir um único elemento.

Como a verificação estrita de nulos afeta as props?

Com strict: true, props opcionais são T | undefined. Use prop ?? fallback ou guardas explícitas. Evite asserções não nulas prop! em componentes - os chamadores podem omitir o campo.

Componentes de linha de lista devem usar memo com props tipadas?

Como estender props de componentes de terceiros?

Use ComponentProps<typeof ThirdPartyButton> ou o tipo de props exportado pelo pacote. Reexporte uma versão restrita com Omit se você ocultar algumas props upstream do seu sistema de design.

Relacionados

Noções Básicas de TypeScript em RN - padrões tsconfig estritos antes de refinar APIs de componentes
Tipos Utilitários para RN - ComponentProps, StyleProp e auxiliares seguros para estilo
Props, Estado e Re-renderizações em Mobile - como props tipadas fluem quando os pais re-renderizam
Tipagem de Navegação e Parâmetros de Rota - componentes de tela recebendo parâmetros de rota
Tipagem de Respostas de API e Zod - inferir tipos de props a partir de formas de API validadas
Melhores Práticas de TypeScript em RN - convenções de equipe para onde os tipos valem a pena

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

Tipagem de Componentes e Props

Buscar na documentação

Tipagem de Componentes e Props