Home > Back-end >  How can I prevent going back in react-native-webview?
How can I prevent going back in react-native-webview?

Time:06-18

My app uses react-native-webview and set allowsBackForwardNavigationGestures to true. I want to prevent going back on a specific page. For example, after navigating to the home page from the login page, I want to make sure that I cannot go back. I wonder if blocking back is possible in react-native-webview.

Please help.

CodePudding user response:

I can't be sure but your question sure sounds like a React Navigation issue, particularly concerning Auth. Flow. Well, should that be the case, there's a pretty well written documentation on Auth Flow with good example(s) here

Hope that helps in solving your issue.

CodePudding user response:

I think you could use onShouldStartLoadWithRequest and simply return false when request contains URL you do not want to allow.

From documentation:

<WebView
  source={{ uri: 'https://reactnative.dev' }}
  onShouldStartLoadWithRequest={(request) => {
    // Only allow navigating within this website
    return request.url.startsWith('https://reactnative.dev');
  }}
/>

CodePudding user response:

You can restrict back button from onNavigationStateChange

onNavigationStateChange={(navState) => {
        if (navState.canGoBack) {
          navigation.setParams({
            headerLeftInfo: {
              title: '',
              onPress: () => //TODO:back button logic,
            },
          });
        } else {
          navigation.setParams({
            headerLeftInfo: null,
          });
        }
      }}

Reference: https://www.reactnativeschool.com/integrating-react-navigation-back-button-with-a-webview

  • Related