# How to Integrate Calculator Widget in React Native
### Installation
First, install the required WebView package:
```bash
npm install react-native-webview
```
or if you're using Yarn:
```bash
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.
```javascript
import { WebView } from 'react-native-webview';
const CalculatorComponent = () => {
return (
);
};
export default CalculatorComponent;
```
#### Method 2: Inline HTML Integration
Embed the calculator script directly using an HTML template within the WebView.
```javascript
import React from 'react';
import { WebView } from 'react-native-webview';
const CalculatorComponent = () => {
const htmlContent = `
`;
return (
);
};
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.
```javascript
import React from 'react';
import { WebView } from 'react-native-webview';
const CalculatorComponent = () => {
const htmlContent = `
`;
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 (
);
};
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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.calcumate.co/frequently-asked-questions/how-to-integrate-calculator-widget-in-react-native.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.