Cuidado ao tipar navegação no React Navigation 5 com TypeScript

Ao implementar navegação com react-navigation 5 em projetos React Native usando TypeScript, é comum se deparar com o erro de 'binding element has an implicit any type'. Isso acontece porque o TypeScript exige que o tipo do prop 'navigation' seja explicitamente definido.

Na prática, muitos desenvolvedores simplesmente ignoram esse erro, mas isso pode gerar problemas em produção, especialmente na hora de refatorar ou fazer rollback, onde tipos bem definidos ajudam a evitar bugs silenciosos. A decisão fica mais saudável quando o time consegue medir o impacto depois.

Para resolver, o ideal é criar uma interface que descreva as rotas e seus props, incluindo o 'navigation'. Por exemplo:

import { StackNavigationProp } from '@react-navigation/stack'. type RootStackParamList = {
  Home: undefined. Profile: { userId: string }. }. type ProfileScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Profile'>. interface ProfileProps {
  navigation: ProfileScreenNavigationProp. } O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

function ProfileScreen({ navigation }: ProfileProps) {
  // ...
}

Fazendo assim, você garante que o TypeScript saiba exatamente o que esperar, evitando esse erro e aumentando a segurança do seu código. Você já passou por uma situação semelhante? Como lidou com problemas de tipagem em navegação? Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.