How do I pass post parameters in react native WebView?

We can do form post in webview in two ways

1st way:

const headerObj= { 'Content-Type': 'application/x-www-form-urlencoded'}
const postData = {
  key1: value1,
  key2: value2,
};
let urlEncodedData = '',
  urlEncodedDataPairs = [],
  key;
for (key in postData) {
  urlEncodedDataPairs.push(
    encodeURIComponent(key) + '=' + encodeURIComponent(postData[key]),
  );
}
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

<WebView
source={{uri: 'https://mypage.com/index.php', headers: headerObj, body: urlEncodedData, method:'POST'}}
style={{marginTop: 20}} />

2nd way: Using Html

  <WebView
    source={{html: `<html> <body onload="document.forms[0].submit();">
                  <form method="post" action=${this.state.URL}>
                    <input type="hidden" name="key1"  value=${value1} >
                    <input type="hidden" name="key2" value=${tvalue2} >
                  </form >
                </body> </html>`,}}
  />

Put this piece of code in the body:

{ source: { uri: 'https://mypage.com/index.php', method: 'POST', body: 
'cat=himalayan&dog=pug&fish=shark' }

You will have to add method in the source prop like this

<WebView
    source={{uri: 'https://mypage.com/index.php', headers: '---', body: '---',method:'POST'}}
    style={{marginTop: 20}}
  />

Tags:

Webview

React Native

Recent Posts