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

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!