React-native-webview: App Exit when pressed the back botton - react-native

Question

I am using react native and i have problem in navigating between pages in my webview because it keeps on closing whenever I pressed the back button. I tried this one and an error comes when i press the back button undefined is not an object (evaluating 'this.props.navigation.goback') Can someone help me? Thank you
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { BackHandler } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props)
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}
handleBackButtonClick() {
this.props.navigation.goBack(null);
return true;
}
render(){
return (
<WebView
style={{ marginTop: 0 }}
source={{ uri: 'https://www.youtube.com' }}
/>
);
}
}

Answer 1

This code works
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { BackHandler } from 'react-native';
export default class App extends Component {
webView = {
canGoBack: false,
ref: null,
}
onAndroidBackPress = () => {
if (this.webView.canGoBack && this.webView.ref) {
this.webView.ref.goBack();
return true;
}
return false;
}
componentWillMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackHandler.removeEventListener('hardwareBackPress');
}
}
render(){
return (
<WebView
style={{ marginTop: 0 }}
source={{ uri: 'https://www.youtube.com' }}
useWebKit={true}
ref={(webView) => { this.webView.ref = webView; }}
onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
/>
);
}
}