> For the complete documentation index, see [llms.txt](https://help.calcumate.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.calcumate.co/frequently-asked-questions/how-to-integrate-calculator-widget-in-react-native.md).
# 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