9

I am trying to achieve a similar thing in React Native any idea how can i do this

<form action="http://example.com/some-url-end-point" method="POST">
  <input type="hidden" name="q" value="a">
</form>

Is there a possibility to do something similar in React Native. I can do this in a web application. But in react native window.document doesn't exist. So I can't submit a form dynamically or in any way.

Basically what happens is I send some data to a 3rd party payment gateway with POST method data. Any idea how I can achieve this in React Native?

Edit: I need a solution that changes when submitted a web view opens up which changes the location of the browser, and sends data to that location in post method format

A similar question I found regarding this for Javascript implementation was this JavaScript post request like a form submit I need to achieve something similar in react native.

Adeel Imran
  • 8,751
  • 5
  • 45
  • 71
  • would you put your final code to this post? I've got the same issue with this code snippet, I'm using Webview but `document.forms[0].submit()` or any similar submission not work and not send me to the browser – novonimo Jan 26 '21 at 17:08

2 Answers2

6

Since what you are trying to do is actually create a web form and redirect after that, why not create your form using HTML? You can do it using WebView. It's source prop accepts HTML directly or a remote source, and by doing so you can get the result you wish.

H. Tugkan Kibar
  • 2,005
  • 12
  • 17
  • Oh i think this will work, I will look into this. Thank you – Adeel Imran Jan 12 '18 at 12:33
  • Any idea how I can submit the loaded form in source prop as html on web view load? As in as soon the web view loads with the html submit the form automatically? – Adeel Imran Jan 12 '18 at 12:40
  • 1
    As webview accepts javascript, best way to go at it would be to use javascript code there. You can either include it directly, or use ```injectJavaScript``` / ```injectedJavaScript```. First one is a function that will allow you to inject JS and execute immediately. Second is a prop that executes given JS when the view loads. – H. Tugkan Kibar Jan 12 '18 at 12:43
  • Hi @AdeelImran, did you managed to implement HTML form POST behaviour in react native? I am finding way to do it as well. – Mohammad Harith Feb 13 '19 at 01:12
4

There is no equivalent in React Native to the html form.

All network requests are done with some networking library. React Native comes with fetch built in, but you can also use something like Axios, or even the XMLHttpRequest object itself.

See the Networking section in the React Native docs.

There are some libraries for the form UI, but they usually just provide you with the values in the form elements, which you then have to send on your own.

Kraylog
  • 6,558
  • 1
  • 22
  • 32
  • So how can I mimic a behavior where I open a webview and a link opens up in which I have send some data in a `POST` format. – Adeel Imran Jan 05 '18 at 11:36
  • A webview is basically a browser window. Any web page you load will behave the same as it would in a normal browser, including forms. Then again, that's not what you asked about. – Kraylog Jan 05 '18 at 11:39
  • So how can I `post` data to a url. And open that url in a web view? That URL is not 'GET' method. It is of 'POST' method – Adeel Imran Jan 05 '18 at 11:43
  • 1
    A `POST` method is used to sent data to a server. Are you saying you want to display the result of that in a web view? – Kraylog Jan 05 '18 at 11:46
  • No, I need to open a URL of type 'POST' and send some data to that URL. You generally do that with `
    ` in web apps, but how can you do that in react native.     – Adeel Imran Jan 05 '18 at 11:48
  • As I said in the answer, use `fetch`, it allows you to send `POST` requests. – Kraylog Jan 05 '18 at 11:51
  • 1
    @AdeelImran you have to do as Kraylog suggest use network library to send the post, the url you are going to be sending will have to responses with a static html content, you have to set a state with that responses in your state tree in you react native app, that state is going to be use by the webView in the source props https://facebook.github.io/react-native/docs/webview.html#source – Angel Jan 16 '18 at 20:47
  • @Angel Have a look at user (h-tugkan-kibar) answer. That is what I was looking for. – Adeel Imran Jan 17 '18 at 07:55