constructor(props: Props) {

super(props);

this.state = { hasError: false, error: null };

}

static getDerivedStateFromError(error: Error): State {

return { hasError: true, error };

}

componentDidCatch(error: Error, errorInfo: ErrorInfo) {

// FIX: Calling reportError with the correct 'options' object.

reportError(error, { componentStack: 'ErrorBoundary', extra: { errorInfo } });

}

handleResetError = () => {

this.setState({ hasError: false, error: null });

};

render() {

if (this.state.hasError) {

return (

<View style={styles.container}>

<Text style={styles.title}>Oops! Something went wrong.</Text>

<Text style={styles.subtitle}>

Our team has been notified. Please try again.

</Text>

<ScrollView style={styles.errorContainer}>

<Text style={styles.errorText}>{this.state.error?.toString()}</Text>

</ScrollView>

<Button title="Try Again" onPress={this.handleResetError} />

</View>

);

}

return this.props.children;

}