react-native-webview: Source.headers is not supported when using POST

screen shot 2019-02-05 at 10 58 28 am

In android emulator, I tried to post to a url, I got the error above. It works fine in ios emulator. Not sure how to fix it, any idea?

Here is part of the code.

import React, {Component} from 'react';
import { Button, View } from 'react-native';
import { WebView } from "react-native-webview";
import qs from 'qs';
import Config from "react-native-config";

export class LoginIntention extends Component {
    // disable back button
    static navigationOptions = {
        headerLeft: null
    }

    // init
    constructor(props) {
        // super
        super(props);
    }

    // e.g. always call
    _onNavigationStateChange = (event) => {

        const email = this.props.navigation.getParam('email', false);
        const password = this.props.navigation.getParam('password', false);

        // if we have email and password, assume coming from Login.js to here
        if(email && password) {
            if (event.hasOwnProperty('jsEvaluationValue')) {
                const isNotLogin = event.jsEvaluationValue;
                if (isNotLogin === '1') {
                    // test
                    console.log('not able to login');

                    // back to login screen
                    this.props.navigation.navigate('Login', {
                        error: 'Username or password is incorrect.'
                    });
                } else {
                    // test
                    console.log('able to login with state:');
                    console.log(isNotLogin);

                    // go to the real display component with user & pass
                    this.props.navigation.navigate('Display', {
                        email,
                        password
                    });
                }
            } else {
                console.log('still waiting jsEvaluationValue');
            }
        } else {
            console.log('-- else --');
        }
    }

    render() {
        const loginUrl = Config.LOGIN_URL;

        // screen param
        const email = this.props.navigation.getParam('email', false);
        const password = this.props.navigation.getParam('password', false);

        // put screen param into the state as well

        let header = {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        };

        let loginObj = {
            "form_type": "customer_login",
            "customer[email]": email,
            "customer[password]": password
        };

        let loginStr = qs.stringify(loginObj);

        const sourceObj = {
            uri: loginUrl,
            headers: header,
            body: loginStr,
            method:'POST'
        };

        // still equal login, so login fail
        const isNotLogin = `
            (function() { 
                return document.querySelector("h1").innerHTML === "Login" }
            )()
        `;

        return (
            <View style={{ flex: 1 }}>
                <View style={{ height: 20 }} />
                <WebView
                    // ref
                    ref={ref => (this.webview = ref)}
                    // source
                    source={sourceObj}
                    // error
                    onError={console.error.bind(console, 'error')}
                    // no bounce
                    bounces={false}
                    // load with req
                    onShouldStartLoadWithRequest={() => true}
                    // yes, js
                    javaScriptEnabledAndroid={true}

                    injectedJavaScript={
                        isNotLogin
                    }

                    onNavigationStateChange={this._onNavigationStateChange}

                    // loading
                    startInLoadingState={true}
                    // style
                    style={{ flex: 1 }}
                />
            </View>
        );
    }
}

export default LoginIntention;

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 18 (1 by maintainers)

Most upvoted comments

I am facing this issue in 2022

is there any update about this problem? it does not work on android but works on ios

so reading this and everything else, clearly this is not fit for purpose - anyone try downgrade the version to see if this is just latest issue?

I’m facing the same issue.

This issue is still present, any updates ?

Yes, it is still there, no updates …

We resolved this issue by making webpage on our web app and we did everything that we needed there by opening it in modal with web view and communicating using events