Created
May 29, 2019 17:47
-
-
Save sdiama/0b8cd60e63ea581cd1abdeea348dbab2 to your computer and use it in GitHub Desktop.
React Native: Handle hardware back button @ webview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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!!
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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
after implementation, it's working fine, but the react-navigation is getting crash.