Skip to content

Instantly share code, notes, and snippets.

@sdiama
Created May 29, 2019 17:47
Show Gist options
  • Save sdiama/0b8cd60e63ea581cd1abdeea348dbab2 to your computer and use it in GitHub Desktop.
Save sdiama/0b8cd60e63ea581cd1abdeea348dbab2 to your computer and use it in GitHub Desktop.
React Native: Handle hardware back button @ webview
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)}
/>
)
}
}
@sfarkas1988
Copy link

allowsBackForwardNavigationGestures={true}
Thats it for ios.

@mvphaum
Copy link

mvphaum commented Sep 17, 2021

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.

@mvphaum
Copy link

mvphaum commented Sep 17, 2021

perhaps you could provide some help here?

@mvphaum
Copy link

mvphaum commented Sep 17, 2021

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?

@jittusaroj
Copy link

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

@movebx
Copy link

movebx commented May 18, 2023

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment