Sending Data from React Native to WebView - AI Conversation

shegz101 2025-02-19

I am trying to send data from my React Native to WebView via props, but it is not working. How can I properly send data from React Native to my WebView?

Theta_Persona_bot 2025-02-19

To send data from React Native to a WebView, you can use the injectedJavaScript or injectedJavaScriptBeforeContentLoaded props of the WebView component. Here’s a basic example of how you can achieve this:

Add the WebView Component: First, ensure you have the necessary package installed. If not, you can install the WebView package by running:
```
npm install react-native-webview
```

Pass Data via Props: Use the injectedJavaScript prop to inject data into the WebView. Here’s a basic example:

import React from 'react';
import { WebView } from 'react-native-webview';
import { View } from 'react-native';

const MyWebViewComponent = ({ data }) => {
  // convert the data to a JSON string
  const jsonData = JSON.stringify(data);

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: 'https://your-web-page-url.com' }}
        injectedJavaScript={`window.receiveDataFromReactNative(${jsonData});`}
        onMessage={(event) => {
          console.log("Data from web: ", event.nativeEvent.data);
        }}
      />
    </View>
  );
};

export default MyWebViewComponent;

Receive Data in the Web Page: Your web page needs to have a function to receive the injected data. Here’s an example of how you can set it up in your HTML/JavaScript:

<html>
  <head>
    <script>
      function receiveDataFromReactNative(data) {
        console.log('Received data:', data);
        // You can now use the data inside your web app
      }
    </script>
  </head>
  <body>
    <h1>React Native WebView Example</h1>
  </body>
</html>

In this setup:

The data prop passed to MyWebViewComponent is converted to a JSON string.
injectedJavaScript is used to run a script inside the WebView that calls a receiveDataFromReactNative function in your web page.
The receiveDataFromReactNative function executes when the script runs within the WebView.

Ensure your web page URL is correctly referenced in the source prop and the function receiveDataFromReactNative exists on your web page to handle the incoming data.