Call WebView in react native

[yuchuga]

Hi, does anyone know how to call "window.ReactNativeWebView.postMessage("Form submitted");" in Formik onSubmit method() such that it will post a message on the mobile screen when calling from WebView after submitting the form. bombillazo, anderssonq can help pls

The link for this https://spin.atomicobject.com/2019/10/28/communicating-react-native-webview/

[bombillazo]

Hey @yuchuga. Unfortunately, I am no longer using Formik, I migrated our forms to React Hook Form due to certain difficulties with Formik, nor have used WebViews. Try looking to see if web views have some type of listener to attach your function to when a specific event happens. Best of luck!

[yuchuga]

Hi @bombillazo, can react hook forms use WebView ?

[bombillazo]

I haven't used WebView but following this guide, seems it is doable with either Formik or React Hook Form. I'm assuming your form is inside the WebView, so simply call the window.ReactNativeWebView.postMessage function inside your WebView JS logic, and pass a function to the onMessage prop to handle the data from the WebView.

// inside the webview JS logic

<Formik
  // form props
  onsubmit={(values, action, e) => {
    // your form handling logic
    const payload = { id: "test" };
    window.ReactNativeWebView.postMessage(JSON.stringify(payload)); // <--- message NEEDS to be serialized!
  }}
/>

// inside your React Native logic
<WebView
  source={{uri: 'https://www.example.com'}}
  onMessage={(event) => {
    const serializedPayload = event.nativeEvent.data;
    console.log(JSON.parse(serializedPayload)); // logs the payload object
  }
/>

Check the guide and the WebView API Reference on how to inject data to the WebView and more stuff.

[yuchuga]

@bombillazo. Thanks for helping! How do I validate whether the data is being send as a string to the server after submitting the form? Also do you know whether Formik is able to link to AWS amplify and S3 bucket ?

[yuchuga]

Hi @bombillazo, can we arrange a zoom session tmr to discuss about this please. Just ping here when you available. Can I have your email address to send you an invite. Thanks!