skip to Main Content

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.

2

Answers


  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.

    Login or Signup to reply.
  2. <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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search