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

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