Solution 1 :
const webView = useRef(null)
const [canGoBack, setCanGoBack] = useState(false)
useEffect(() => {
if (Platform.OS === 'android') {
console.log(webView)
BackHandler.addEventListener('hardwareBackPress', HandleBackPressed)
return () => {
BackHandler.removeEventListener('hardwareBackPress', HandleBackPressed)
}
}
}, []) // INITIALIZE ONLY ONCE
const HandleBackPressed = () => {
if (webView.current) {
webView.current.goBack()
return true
}
return false
}
return (
<WebView
ref={webView}
style={{
width: '100%',
height: '100%',
}}
source={{ uri:"example.com" }}
/>
)
and import necessary items from react-native
Problem :
I am using react-native-webview to create a webview interface for a web app I already developed. I am trying to enable ‘swipe to navigate’ gestures to transtion between screens for the web app and it provides a built-in method, allowsBackForwardNavigationGestures
, to do that for iOS. However, for Android, it doesn’t have such method.
What would be the way to enable ‘swipe to navigate’ gestures for webview? Is there a library to do that? If so, what would it be? If not, what would be the workaround to do this?
Below is the simple code that I wrote.
import React, {useEffect} from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView source = {{uri:/* url to my website */}}
style = {{ marginTop : 50 }}
allowsBackForwardNavigationGestures = {true}
/>
);
}
Thanks!