Nós vamos começar criando uma pasta dentro de “components” chamada “Error” e dentro dela vamos criar uma chamada “ErrorScreen”

Vamos criar dentro de “ErrorScreen” o index e o styled. Vamos começar criando a estrutura visual da tela, que será apenas um container e um título de erro

import styled from "styled-components/native";

export const Container = styled.View`
  flex: 1;
  background-color: #222323;
`;

export const ErrorTitle = styled.Text`
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: white;
  margin-top: 40px;
`;

Agora iremos apenas puxar as informações visuais do styled e usar aqui no index.

import React from "react";
import { Container, Title } from "./styled";

const ErrorScreen = () => {
  return (
    <Container>
      <Title>Está tela teve algum erro</Title>
    </Container>
  );
};

export default ErrorScreen;

Com isso feito, já temos a tela pronta, vamos usar ela dentro de error, porém nesse arquivo nós vamos criar o componente de classe, pois é necessário isso para poder criar o ErrorBoundary

O ErrorBoundary no React é um componente utilizado para capturar e tratar erros durante a renderização de outros componentes.

Vamos começar criando a estruta de classe para renderizar, criando também duas interfaces de tipos

import React, { Component, ReactNode } from "react";

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {}

export default ErrorBoundary;

Agora nós iremos criar o constructor, para que o state inicial de ter erro comece como falso

import React, { Component, ReactNode } from "react";

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
	constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }
}

export default ErrorBoundary;

Nós vamos criar o componentDidCatch, para caso o componente pegue um erro, ele exiba. E aí nós vamos exibir no console uma mensagem para o programador checar.

import React, { Component, ReactNode } from "react";

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
	constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.log("Erro capturado pela ErrorBoundary:", error, errorInfo);
  }
}

export default ErrorBoundary;

E por fim, nós vamos criar o render, que irá mostrar o screen que a gente criou na tela

import React, { Component, ReactNode } from "react";

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
	constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.log("Erro capturado pela ErrorBoundary:", error, errorInfo);
  }

	render() {
    if (this.state.hasError) {
      return <ErrorScreen />;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Agora para ele capturar o nosso erro, ele vai envolver todo o App, indo para o App.tsx

export default function App() {
  return (
    <ErrorBoundary>
      <StatusBar style="light" />
      <ThemeProvider theme={myTheme}>
        <Routes />
      </ThemeProvider>
    </ErrorBoundary>
  );
}