How do I go back in webview? I am using the react-navigation package in react-native

I installed the react-navigation package in react-native

I have implemented tab navigation and one of them is implemented in webview format.

My problem is that if I press the back physical button on Android, I go from the app itself to the previous tab, not back from the webview.

I’ve already applied the back button for the webview on the internet, but I have not done that.

I tried to display the onNavigationStateChange log when debugging, but it was not updated when url was moved after it was loaded at first startup. Here is the code I implemented:

import React from "react";
import {BackHandler} from "react-native";
import {WebView} from "react-native-webview";

class SermonScreen extends React.Component {
    constructor(props) {
    static navigationOptions = {
        header: null

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);

    _onNavigationStateChange(navState) {
            canGoBack: navState.canGoBack

    handleBackButton = () => {
        if (this.state.canGoBack === true) {
            return true;
        } else {
            return false;

    render() {
        return (
                source={{uri: '' }}
                ref={(webView) => this.webView = webView}

export default SermonScreen;

Source: React natvie