React Native: Handle hardware back button @ webview

webview.js

import React, { Component } from 'react';
import { WebView, BackHandler } from 'react-native';

export default class WebViewMoviezSpace extends Component {
  constructor(props) {
    super(props);
    this.WEBVIEW_REF = React.createRef();
  }

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

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

  handleBackButton = ()=>{
    this.WEBVIEW_REF.current.goBack();
    return true;
  }

  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack
    });
  }

  render(){
    return (
      <WebView
        source={{ uri: "https://moviez.space" }}
        ref={this.WEBVIEW_REF}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
      />
    )
  }
}

Thank You!

It helped me. I would definitely be able to resolve it. But you made me optimize my time. How do I buy you coffee?

thank you sir

Thank You!

thankyou sir

Thank you so much @sdiama.

Anyone has an idea on how to handle a button click from the WebView URL loaded to the local native app.
While passing some values from the data attributes. Thank you in advance guys

@kartikkapoor12 @natanaeldiego @barrsofilho, @Paydarsefat

expo tells me this when i try the code
Device: (108:85823) Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
what can i do?

Perfect ! thanks

i use : import { WebView } from 'react-native-webview';

Thank you so much @sdiama.

Anyone has an idea on how to handle a button click from the WebView URL loaded to the local native app.
While passing some values from the data attributes. Thank you in advance guys

@kartikkapoor12 @natanaeldiego @barrsofilho, @Paydarsefat

Thanks for the gist 😊. @mangowi Checkout https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md on onNavigationStateChange

Thanks @blkc

Thank you so much @sdiama

after implementation, it's working fine, but the react-navigation is getting crash.

Thank you!!

Awesome! Thanks you so much!

It works perfect on android but on ios no back gesture is detected for me on ios 14.5 iphone 12 pro max simulator as well as on my physical ipad and a friends iphone 12.

allowsBackForwardNavigationGestures={true}
Thats it for ios.

Sorry, i'm a newbie in Webview React Native App developing. Want to ask, how do i implement this code in my responsive app that run by PHP.

perhaps you could provide some help here?

Thank You!

It helped me. I would definitely be able to resolve it. But you made me optimize my time. How do I buy you coffee?

can help explain how it works?

thankyou so much sir i was in trouble for a long time for implementing back button feature in hybrid app
thankyou so much

Thanks!