Quando estamos trabalhando com desenvolvimento mobile, no nosso caso, com React Native, nós utilizamos algumas ferramentas como: o editor (Vs Code, por exemplo) e o emulador (como o do Android Studio, por exemplo). Esses dois dispositivos podem nos mostrar pistas de que algo não está correto no nosso projeto.

Cada um desses dispositivos mostra o erro em uma perspectiva diferente. No VsCode, você vai ver o erro de execução do projeto, mostrando o nome do arquivo e provavelmente já vai te dar uma dica de como corrigir. No emulador, ele vai te mostrar o nome do arquivo que ele não conseguiu executar e aonde ele teve problemas em executar, mas não trará muitos detalhes de como corrigir. Então, o que fazemos primeiro é olhar o erro do VSCode, que vai te trazer mais informações e depois, olhamos no emulador para verificar se há alguma outra informação que vamos precisar para corrigir o erro.

Vou usar um projeto que já desenvolvemos, como exemplo: o OnebitLife. Vou causar um erro removendo a importação do useNavigation, que vai afetar vários arquivos e vamos ver como enxergamos esse erro no editor e no emulador. Vejam que eu comentei a linha 11, onde ficava a importação do useNavigation.

Entendendo melhor o erro: Ele mostra que não foi possível encontrar a variável useNavigation. Utilizamos em vários lugares do projeto, mas ele não consegue encontrar, por isso ele mostra todos os locais onde essa variável “desconhecida” foi utilizada.

No emulador, ele vai aparecer assim:

Perceba que no emulador, ele indica o erro e os arquivos que ele aconteceu, mostrando quais partes do código ele não consegue exibir, mas ele só mostra essa informação. Ele diz que houve um erro de carregamento da página, mas é tudo muito geral, não tem informações específicas como no editor.