WebView in react-native gets error "Encountering an error loading page"

Question

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.

Answer 1

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.