Does anyone have this problem? I am using WebView to login to my web page via Facebook. If the user logins successfully, It will redirect the user to another screen.

I am using 'react-native-router-flux' for that. However, I got a problem "Encountering an error loading page". It did redirect me to "PresentationScreen" ponent but I still have the warning & the drawer is my "PresentationScreen" is not there anymore.

As I understand because the server is trying to redirect me back to the localhost. But in the onNavigationStateChange, I already redirect it to another ponent.

Here is the error:

{canGoForward: false, code: -6, canGoBack: false, description: "net::ERR_CONNECTION_REFUSED", loading: false, target: 57, url: "http://localhost:8100/?operation=%2Flogin%2Ffacebook&success=true&message=Account+already+exists"}

And here is my ponent for the login page :

import { Actions as NavigationActions } from 'react-native-router-flux';

class LoginScreen extends React.Component {

  constructor (props: LoginScreenProps) {
    super(props);
  }

  handleNavigationStateChange = (event) => {
    if (event.url.includes('operation=%2Flogin%2Ffacebook&success=true')) {
      NavigationActions.presentationScreen();
    }
  };

  render () {
    return (
      <WebView source={{uri: ''}}
               onNavigationStateChange = {this.handleNavigationStateChange}
      />
    )
  }
}

I would appreciate if anyone finds a solution about it.

Does anyone have this problem? I am using WebView to login to my web page via Facebook. If the user logins successfully, It will redirect the user to another screen.

I am using 'react-native-router-flux' for that. However, I got a problem "Encountering an error loading page". It did redirect me to "PresentationScreen" ponent but I still have the warning & the drawer is my "PresentationScreen" is not there anymore.

As I understand because the server is trying to redirect me back to the localhost. But in the onNavigationStateChange, I already redirect it to another ponent.

Here is the error:

{canGoForward: false, code: -6, canGoBack: false, description: "net::ERR_CONNECTION_REFUSED", loading: false, target: 57, url: "http://localhost:8100/?operation=%2Flogin%2Ffacebook&success=true&message=Account+already+exists"}

And here is my ponent for the login page :

import { Actions as NavigationActions } from 'react-native-router-flux';

class LoginScreen extends React.Component {

  constructor (props: LoginScreenProps) {
    super(props);
  }

  handleNavigationStateChange = (event) => {
    if (event.url.includes('operation=%2Flogin%2Ffacebook&success=true')) {
      NavigationActions.presentationScreen();
    }
  };

  render () {
    return (
      <WebView source={{uri: 'https://api.taskuparkki.fi/api/login/facebook'}}
               onNavigationStateChange = {this.handleNavigationStateChange}
      />
    )
  }
}

I would appreciate if anyone finds a solution about it.

• javascript
• android
• reactjs
• webview
• react-native

• If using expo, try it on a higher android version. I was running my app on pixel 6 (avd) and webview was not working. Then I tried it on my physical device (android 13) and it worked :) – Shub Commented Oct 19, 2024 at 6:44

3 Answers 3

Change 'localhost' by the IP server address, I think in your case it would be your IP. You should do the changes on your facebook developer console.

Let me know if it works.

<WebView source={{uri:'https://api.taskuparkki.fi/api/login/facebook'}}
         onNavigationStateChange = {this.handleNavigationStateChange}
         allowFileAccess={true}
         scalesPageToFit={true}
         originWhitelist={['*']}
         />

 allowFileAccess={true}
 scalesPageToFit={true}
 originWhitelist={['*']}

https://github./facebook/react-native/issues/21104#issuement-421962289

I was facing the same error and here is how I fixed this issue:

1. Restarted my android device

2. Removed the https:// from the url techhelpbd./gitdown was throwing this error when I removed https:// then it worked fine.

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default function Browser() {
  return (
    <WebView
      source={{ uri: 'techhelpbd./gitdown' }}
    />
  );
}