VAPI react-native setup issues
# support
p
I'm trying to use vapi in an existing react-native mobile app and testing with android. I followed the setup instructions [here](https://github.com/VapiAI/client-sdk-react-native) for android (and using yarn) but I keep getting the following error on app launch. I made sure I'm on the right version of
daily-co/react-native-webrtc
(I tried both
118.0.3-daily.1
and
118.0.3-daily.2
). Any idea what I might be doing wrong or how I can debug?
Copy code
│ LOG  MediaDevices _registerEvents invoked                                                                                                                             │
│ ERROR  TypeError: WebRTCModule.startMediaDevicesEventMonitor is not a function. (In 'WebRTCModule.startMediaDevicesEventMonitor()',                                   ││'WebRTCModule.startMediaDevicesEventMonitor' is undefined)
v
Hi there! 👋 I see you're having trouble with the VAPI setup in your React Native Android app. I don't have specific information about the exact
WebRTCModule.startMediaDevicesEventMonitor
error you're encountering, but I can definitely help with some troubleshooting steps that might resolve your issue. Here are some debugging steps that might help: ## Dependency and Version Checks First, make sure your dependencies are correctly installed and compatible:
Copy code
json
{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6",
    "@vapi-ai/react-native": "^0.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }
}
According to the information I found, it's important to check that all required dependencies and versions are correctly installed in your project [source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510). ## SDK Version Compatibility The error you're seeing might be related to SDK compatibility issues. If you're using Expo, try downgrading to Expo SDK 50, as this has resolved similar issues for other users [source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510). ## General Debugging Steps Here are some additional debugging techniques that might help: 1. **Clear Metro Bundler Cache**: Run
npx react-native start --reset-cache
to clear the Metro bundler cache. 2. **Rebuild the App**: After making changes, completely rebuild your app with
npx react-native run-android
. 3. **Review Recent Changes**: If the setup was previously working, review any recent changes to the project or its dependencies. 4. **Check Vapi Instance Creation**: Ensure the
vapi
instance is created correctly without any conditional dependencies. 5. **Use useRef**: Try using
useRef
instead of a regular variable to ensure the Vapi instance persists between renders.
6. **Check Network Connectivity**: Verify that your device or emulator can reach the necessary servers. 7. **Test on a Real Device**: Sometimes emulators can behave differently, so testing on a physical device might help identify if it's an emulator-specific issue. ## Resources You might want to check the official [Vapi React Native SDK](https://github.com/VapiAI/react-native-sdk) and [client-side example](https://github.com/VapiAI/client-side-example-react-native) repositories for any recent updates or issues that might be related to your problem. Is there anything specific about your implementation that you'd like me to help with further? Sources: - [Discord conversation about VAPI react-native setup troubleshooting](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510) - [Vapi React Native SDK](https://github.com/VapiAI/react-native-sdk) - [Vapi client-side example for React Native](https://github.com/VapiAI/client-side-example-react-native)
Hi there! 👋 I see you're having trouble with VAPI in your React Native Android app. I don't have specific information about the exact
WebRTCModule.startMediaDevicesEventMonitor
error you're encountering, but I can definitely help with some troubleshooting steps that might resolve your issue. ## Dependency and Version Checks Make sure your dependencies are correctly installed and compatible:
Copy code
json
{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6",
    "@vapi-ai/react-native": "^0.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }
}
According to the [troubleshooting information](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510) I found, it's important to check that all required dependencies and versions are correctly installed. ## SDK Version Compatibility If you're using Expo, try downgrading to Expo SDK 50, as this has resolved similar issues for other users according to [this source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510). ## General Debugging Steps Here are some additional debugging techniques that might help: 1. **Clear Metro Bundler Cache**: Run
npx react-native start --reset-cache
to clear the Metro bundler cache. 2. **Rebuild the App**: After making changes, completely rebuild your app with
npx react-native run-android
. 3. **Review Recent Changes**: If the setup was previously working, review any recent changes to the project or its dependencies. 4. **Check Vapi Instance Creation**: Ensure the
vapi
instance is created correctly without any conditional dependencies. 5. **Use useRef**: Try using
useRef
instead of a regular variable to ensure the Vapi instance persists between renders. 6. **Check Network Connectivity**: Verify that your device or emulator can reach the necessary servers.
7. **Test on a Real Device**: Sometimes emulators behave differently, so testing on a physical device might help identify if it's an emulator-specific issue. ## Resources You might want to check the official [Vapi React Native SDK](https://github.com/VapiAI/react-native-sdk) and [client-side example](https://github.com/VapiAI/client-side-example-react-native) repositories for any recent updates or issues that might be related to your problem. Is there anything specific about your implementation that you'd like me to help with further? Sources: - [Discord conversation about VAPI react-native setup troubleshooting](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510) - [Vapi React Native SDK](https://github.com/VapiAI/react-native-sdk) - [Vapi client-side example for React Native](https://github.com/VapiAI/client-side-example-react-native)
Hi there! 👋 I see you're having trouble with the VAPI setup in your React Native Android app. Unfortunately, I don't have specific information about the exact
WebRTCModule.startMediaDevicesEventMonitor
error you're encountering. However, I can definitely help with some troubleshooting steps that might resolve your issue. Here are some debugging steps that might help: ## Dependency and Version Checks First, make sure your dependencies are correctly installed and compatible:
Copy code
json
{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6",
    "@vapi-ai/react-native": "^0.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }
}
According to the information I found, it's important to check that all required dependencies and versions are correctly installed in your project [source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510). ## SDK Version Compatibility The error you're seeing might be related to SDK compatibility issues. If you're using Expo, try downgrading to Expo SDK 50, as this has resolved similar issues for other users [source](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510). ## General Debugging Steps Here are some additional debugging techniques that might help: 1. **Clear Metro Bundler Cache**: Run
npx react-native start --reset-cache
to clear the Metro bundler cache. 2. **Rebuild the App**: After making changes, completely rebuild your app with
npx react-native run-android
. 3. **Review Recent Changes**: If the setup was previously working, review any recent changes to the project or its dependencies. 4. **Check Vapi Instance Creation**: Ensure the
vapi
instance is created correctly without any conditional dependencies. 5. **Use useRef**: Try using
useRef
instead of a regular variable to ensure the Vapi instance persists between renders.
6. **Check Network Connectivity**: Verify that your device or emulator can reach the necessary servers. 7. **Test on a Real Device**: Sometimes emulators can behave differently, so testing on a physical device might help identify if it's an emulator-specific issue. ## Resources You might want to check the official [Vapi React Native SDK](https://github.com/VapiAI/react-native-sdk) and [client-side example](https://github.com/VapiAI/client-side-example-react-native) repositories for any recent updates or issues that might be related to your problem. Is there anything specific about your implementation that you'd like me to help with further? Sources: - [Discord conversation about VAPI react-native setup troubleshooting](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1239945056937443510) - [Vapi React Native SDK](https://github.com/VapiAI/react-native-sdk) - [Vapi client-side example for React Native](https://github.com/VapiAI/client-side-example-react-native)
I've tried my best to help with the troubleshooting steps, but I think we need more specialized assistance for this specific WebRTC error. I'm going to connect you with our technical support team who has deeper expertise with the React Native SDK and WebRTC implementation. I've escalated your issue to our support team and shared all the details you've provided. They'll be able to help you resolve this
WebRTCModule.startMediaDevicesEventMonitor
error more effectively. In the meantime, if you discover any additional information or if anything changes with your setup, please let us know as it might help in diagnosing the issue faster. Someone from our team will be in touch with you shortly. Thanks for your patience! 🙏
p
My app is on an older react-native version (0.71.17) but docs mention >= 60 is sufficient
s
Hey PJ, Thanks for bringing this up. For client-side SDK-related issues, you have to create an issue on our GitHub repo and share the steps over there on how to reproduce it. Then someone from the SDK team will reach out to you and help you get it resolved.
3 Views