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)}
      />
    )
  }
}

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!