4

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" component 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 component.

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 component 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.

3 Answers 3

4

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.

3
  • Do you mean change the localhost address returned from the server to the IP server address? The url will become http://example.com/?operation=%2Flogin%2Ffacebook&success=true&message=Account+already+exists ?
    – henrycity
    Commented Dec 28, 2016 at 13:54
  • Exactly, if you want to use "example.com", you should modify your host file adding the DNS reference too. Start testing it with your local ip address, or whatever you are using in your server. Commented Dec 28, 2016 at 14:02
  • Okay, tks for the advice. It would take me couple of days since I don't have the permission for the server.
    – henrycity
    Commented Dec 28, 2016 at 15:42
0
<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.com/facebook/react-native/issues/21104#issuecomment-421962289

0

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.com/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.com/gitdown' }}
    />
  );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.