CODEWITHSUNDEEP
javascriptandroidreactjswebviewreact-native
henrycity
henrycity

Reputation: 111

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

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.

Upvotes: 4

Views: 14107

Answers (3)

Kazi Mahbubur Rahman
Kazi Mahbubur Rahman

Reputation: 153

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

Upvotes: 0

مصطفى
مصطفى

Reputation: 915

<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

Upvotes: 0

Facundo La Rocca
Facundo La Rocca

Reputation: 3866

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.

Upvotes: 4

Related Questions