How to Integrate Calculator Widget in React Native

Installation

First, install the required WebView package:

npm install react-native-webview

or if you’re using Yarn:

yarn add react-native-webview

Integration Methods

Method 1: Self-Hosted Integration

If you have the calculator hosted on your website, you can simply point the WebView to that URL.

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

const CalculatorComponent = () => {
  return (
    <WebView
      source={{ uri: 'https://yourcompany.com/calculator' }}
      style={{ flex: 1 }}
    />
  );
};

export default CalculatorComponent;

Method 2: Inline HTML Integration

Embed the calculator script directly using an HTML template within the WebView.

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

const CalculatorComponent = () => {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body { margin: 0; padding: 10px; }
      </style>
    </head>
    <body>
      <div id="calcumate-root"
           data-integration="your-data-integration"
           data-ref="your-data-ref"
           data-int="your-data-int"></div>
      <script src="https://production.calcumate.co/static/js/main.js"></script>
    </body>
    </html>
  `;

  return (
    <WebView
      source={{ html: htmlContent }}
      style={{ flex: 1 }}
    />
  );
};

export default CalculatorComponent;

Advanced: Event Handling

To capture calculator events and communicate with your React Native app, you can use JavaScript injection and message passing.

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

const CalculatorComponent = () => {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      <div id="calcumate-root"
           data-integration="your-data-integration"
           data-ref="your-data-ref"
           data-int="your-data-int"></div>
      <script src="https://production.calcumate.co/static/js/main.js"></script>
    </body>
    </html>
  `;

  const calculatorEventListener = `
    window.addEventListener('Booking', function(event) {
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'calculatorLeadFillEvent',
        data: event.detail
      }));
    });

    window.addEventListener('userDetails', function(event) {
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'userDetails',
        data: event.detail
      }));
    });

    true; // Required for injectedJavaScript
  `;

  const handleMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);

      if (data.type === 'calculatorLeadFillEvent') {
        console.log('Calculator lead data:', data.data);
        // Handle lead form submission
        // Example: navigation, API calls, etc.
      } else if (data.type === 'userDetails') {
        console.log('User details:', data.data);
        // Handle user details update
      }
    } catch (error) {
      console.error('Error parsing WebView message:', error);
    }
  };

  return (
    <WebView
      source={{ html: htmlContent }}
      injectedJavaScript={calculatorEventListener}
      onMessage={handleMessage}
      style={{ flex: 1 }}
    />
  );
};

export default CalculatorComponent;

Configuration Parameters

Replace the following placeholder values with your actual configuration:

• your-data-integration: Your integration identifier
• your-data-ref: Your reference parameter
• your-data-int: Your integration parameter
• https://yourcompany.com/calculator: Your actual calculator URL

Best Practices

• Error Handling: Always wrap message parsing in try-catch blocks
• Loading States: Consider adding loading indicators while the WebView loads
• Responsive Design: Ensure the calculator works well on different screen sizes
• Performance: Monitor WebView performance, especially on older devices

Troubleshooting

Common Issues

Calculator not loading:

• Verify the script URL is accessible
• Check network connectivity
• Ensure all required parameters are provided

Events not firing:

• Confirm JavaScript injection is working
• Check browser console for errors (use remote debugging)
• Verify event listener names match the calculator’s events

Layout issues:

• Adjust the WebView container styling
• Check viewport meta tag settings
• Test on different device sizes

Getting Help

If you encounter issues during implementation:

1. Check the browser console for JavaScript errors
2. Verify all configuration parameters are correct
3. Test the calculator in a regular web browser first
4. Contact our support team with specific error messages and device information

Support

For additional assistance or troubleshooting, please reach out to our support team with:

• Device and OS version
• React Native version
• Specific error messages or screenshots
• Steps to reproduce the issue