Quantcast
Viewing all articles
Browse latest Browse all 4

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) {        super(props);    }    static navigationOptions = {        header: null    };    componentDidMount() {        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);    }    componentWillUnmount() {        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);    }    _onNavigationStateChange(navState) {        console.log(navState);        this.setState({            canGoBack: navState.canGoBack        });    }    handleBackButton = () => {        console.log(this.state);        if (this.state.canGoBack === true) {            this.webView.goBack();            return true;        } else {            return false;        }    };    render() {        return (<WebView                source={{uri: 'https://m.youtube.com/channel/UCw3kP3qCCF7ZpLUNzm_Q9Xw/videos' }}                ref={(webView) => this.webView = webView}                onNavigationStateChange={this._onNavigationStateChange.bind(this)}            />        );    }}export default SermonScreen;

Viewing all articles
Browse latest Browse all 4

Trending Articles