React Native Integration Not Working

[akatergi]

Hello,

I have been using VAPI in my web app for quite some time now, via the react module, and it has worked very smoothly and seamlessly. However, for the past 4 days I have been trying to integrate it in React Native using the module and its documentation, but nothing is working. I keep running into the same problem which prevents the call from occurring.

The "vapi.start" function successfully initializes the call, I know this because I console.logged the result of vapi.start and it looked like this {"assistantId": "722b4b8f-793d-4740-b61f-7b3921dc6ceb", "createdAt": "2025-03-07T10:24:25.743Z", "id": "7d978dc6-fdf4-42f4-89cf-d4a5d08db110", "monitor": {"controlUrl": "https://phone-call-websocket.aws-us-west-2-backend-production1.vapi.ai/7d978dc6-fdf4-42f4-89cf-d4a5d08db110/control", "listenUrl": "wss://[phone-call-websocket.aws-us-west-2-backend-production1.vapi.ai/7d978dc6-fdf4-42f4-89cf-d4a5d08db110/listen](http://phone-call-websocket.aws-us-west-2-backend-production1.vapi.ai/7d978dc6-fdf4-42f4-89cf-d4a5d08db110/listen)"}, "orgId": "1800131d-cfe1-4775-923b-ca4ce90296c7", "status": "queued", "transport": {"assistantVideoEnabled": false}, "type": "webCall", "updatedAt": "2025-03-07T10:24:25.743Z", "webCallUrl": "https://vapi.daily.co/lGm4bybRg9WWMKx06bMK"}.

But also the call never actually starts. I know this because my vapi.on("call-start") event listener is not firing. When I look for the call log on my VAPI dashboard, it says "No Microphone Permission". But I don't understand how this is happening, because as you can see in the recording I attached, audio permission is clearly given to the app. The code I attached from the repository also indicates this because when I console.log the result of requesting the permission it says "granted".

Simulator.Screen.Recording.-.iPhone.15.Plus.-.2025-03-07.at.15.29.57.mp4

Here is a GitHub repo where I replicated the issue: https://github.com/akatergi/apptest2. I usually follow these steps to get the app running:

1. npm install --force, 2. npx pod install, 3. npx expo prebuild, 4. npx expo start:ios
   Upon running it, you will see the call button and the interactionState identifier in blue. Pressing the red button should turn the blue text from "inactive" to "started", and you should be able to hear an assistant that you can speak to, but that is not the case.

[akatergi]

Update: I emailed support about this and they told me to switch to the package to version 0.2.0

It now leads to this new error:
(NOBRIDGE) ERROR [TypeError: this.nativeUtils().setKeepDeviceAwake is not a function (it is undefined)]
[apptest.debug.dylib] [TypeError: this.nativeUtils().setKeepDeviceAwake is not a function (it is undefined)]
[apptest.debug.dylib] [TypeError: this.nativeUtils().setKeepDeviceAwake is not a function (it is undefined)]
(NOBRIDGE) LOG [TypeError: this.nativeUtils().setKeepDeviceAwake is not a function (it is undefined)]
(NOBRIDGE) ERROR [TypeError: this.nativeUtils().setKeepDeviceAwake is not a function (it is undefined)]

[AdiSai]

@akatergi Can you please set "newArchEnabled" to be false in app.json? Our underlying WebRTC provider (daily.co) doesn't support this flag.

[akatergi]

Hello, thank you for your reply. I changed it, and then ran 1. npm install --force, 2. npx pod install, 3. npx expo prebuild, 4. npx expo start:ios. And i got the same error as the comment above.

[AdiSai]

@akatergi what does your app.json look like in terms of plugins? this is how mine looks like for a sample app:

{
  "expo": {
    "name": "Simple",
    "slug": "Simple",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": false,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "co.vapi.DailyPlayground",
      "infoPlist": {
        "UIBackgroundModes": [
          "voip"
        ],
        "NSMicrophoneUsageDescription": "This app needs access to your microphone to make voice calls.",
        "NSCameraUsageDescription": "This app needs access to your camera for video calls."
      },
      "bitcode": false
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "permissions": [
        "android.permission.RECORD_AUDIO",
        "android.permission.MODIFY_AUDIO_SETTINGS",
        "android.permission.INTERNET",
        "android.permission.ACCESS_NETWORK_STATE",
        "android.permission.CAMERA",
        "android.permission.SYSTEM_ALERT_WINDOW",
        "android.permission.WAKE_LOCK",
        "android.permission.BLUETOOTH",
        "android.permission.FOREGROUND_SERVICE",
        "android.permission.FOREGROUND_SERVICE_CAMERA",
        "android.permission.FOREGROUND_SERVICE_MICROPHONE",
        "android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION",
        "android.permission.POST_NOTIFICATIONS"
      ],
      "package": "co.vapi.DailyPlayground"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],
      [
        "@config-plugins/react-native-webrtc",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
        }
      ],
      [
        "@daily-co/config-plugin-rn-daily-js",
        {
          "android": {
            "enableBackgroundMode": true,
            "enableForegroundService": true,
            "enableMediaDevicesEventMonitor": true,
            "enableMediaDevicesEventMonitorInterval": 1000
          }
        }
      ],
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 24,
            "compileSdkVersion": 35,
            "targetSdkVersion": 35,
            "buildToolsVersion": "35.0.0"
          },
          "ios": {
            "deploymentTarget": "14.0"
          }
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

[akatergi]

Below is my app.json:
{ "expo": { "name": "apptest", "slug": "apptest", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/images/icon.png", "scheme": "myapp", "userInterfaceStyle": "automatic", "newArchEnabled": false, "ios": { "supportsTablet": true, "bundleIdentifier": "co.vapi.DailyPlayground", "infoPlist": { "UIBackgroundModes": [ "voip" ], "NSCameraUsageDescription": "This app needs access to your camera to capture images and videos.", "NSMicrophoneUsageDescription": "This app needs access to your microphone to capture audio." }, "bitcode": false }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/images/adaptive-icon.png", "backgroundColor": "#ffffff" }, "permissions": [ "android.permission.ACCESS_NETWORK_STATE", "android.permission.BLUETOOTH", "android.permission.CAMERA", "android.permission.INTERNET", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.RECORD_AUDIO", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WAKE_LOCK", "android.permission.FOREGROUND_SERVICE", "android.permission.ACCESS_NETWORK_STATE", "android.permission.BLUETOOTH", "android.permission.CAMERA", "android.permission.INTERNET", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.RECORD_AUDIO", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WAKE_LOCK", "android.permission.FOREGROUND_SERVICE" ], "package": "co.vapi.DailyPlayground" }, "web": { "bundler": "metro", "output": "static", "favicon": "./assets/images/favicon.png" }, "plugins": [ "expo-router", [ "expo-splash-screen", { "image": "./assets/images/splash-icon.png", "imageWidth": 200, "resizeMode": "contain", "backgroundColor": "#ffffff" } ], "@config-plugins/react-native-webrtc", "@daily-co/config-plugin-rn-daily-js", [ "expo-build-properties", { "android": { "minSdkVersion": 24 }, "ios": { "deploymentTarget": "15.1" } } ] ], "experiments": { "typedRoutes": true } } }

You can see all my files here: https://github.com/akatergi/apptest2

[akatergi]

@AdiSai I even used this app.json which is almost indentical to yours:
{ "expo": { "name": "apptest", "slug": "apptest", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/images/icon.png", "scheme": "myapp", "userInterfaceStyle": "automatic", "newArchEnabled": false, "ios": { "supportsTablet": true, "bundleIdentifier": "co.vapi.DailyPlayground", "infoPlist": { "UIBackgroundModes": [ "voip" ], "NSMicrophoneUsageDescription": "This app needs access to your microphone to make voice calls.", "NSCameraUsageDescription": "This app needs access to your camera for video calls." }, "bitcode": false }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/images/adaptive-icon.png", "backgroundColor": "#ffffff" }, "permissions": [ "android.permission.RECORD_AUDIO", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.CAMERA", "android.permission.SYSTEM_ALERT_WINDOW", "android.permission.WAKE_LOCK", "android.permission.BLUETOOTH", "android.permission.FOREGROUND_SERVICE", "android.permission.FOREGROUND_SERVICE_CAMERA", "android.permission.FOREGROUND_SERVICE_MICROPHONE", "android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION", "android.permission.POST_NOTIFICATIONS" ], "package": "co.vapi.DailyPlayground" }, "web": { "bundler": "metro", "output": "static", "favicon": "./assets/images/favicon.png" }, "plugins": [ "expo-router", [ "expo-splash-screen", { "image": "./assets/images/splash-icon.png", "imageWidth": 200, "resizeMode": "contain", "backgroundColor": "#ffffff" } ], [ "@config-plugins/react-native-webrtc", { "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera", "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone" } ], [ "@daily-co/config-plugin-rn-daily-js", { "android": { "enableBackgroundMode": true, "enableForegroundService": true, "enableMediaDevicesEventMonitor": true, "enableMediaDevicesEventMonitorInterval": 1000 } } ], [ "expo-build-properties", { "android": { "minSdkVersion": 24, "compileSdkVersion": 35, "targetSdkVersion": 35, "buildToolsVersion": "35.0.0" }, "ios": { "deploymentTarget": "15.1" } } ] ], "experiments": { "typedRoutes": true } } }

and I tried both 0.2.0 and 0.1.9. Both are still not working. 0.2 still throws the same error I attached in my first reply and 0.1.9 still gives me the microphone permission error.

[AdiSai]

@akatergi Version 0.2.0 is the correct version to use. I'll need to do a bit of debugging with iOS as I had mainly tested this with Android on Expo. Can you please commit your current project to that GitHub repo so I can replicate your setup?

Also, can you try running rm -rf node_modules before any of the other commands?

[akatergi]

@AdiSai I just pushed my most recent changes. And yes I will try that.

[akatergi]

@AdiSai any updates?

[AdiSai]

@akatergi I haven't gotten a chance to try out your app yet, but I just did some tests with my sample app using an iOS Simulator and it did work once I updated the iOS deploymentTarget to 16.0 for expo-build-properties in app.json. Here's the current version of my file:

{
  "expo": {
    "name": "Simple",
    "slug": "Simple",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": false,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "co.vapi.DailyPlayground",
      "infoPlist": {
        "UIBackgroundModes": [
          "voip"
        ],
        "NSMicrophoneUsageDescription": "This app needs access to your microphone to make voice calls.",
        "NSCameraUsageDescription": "This app needs access to your camera for video calls."
      },
      "bitcode": false
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "permissions": [
        "android.permission.RECORD_AUDIO",
        "android.permission.MODIFY_AUDIO_SETTINGS",
        "android.permission.INTERNET",
        "android.permission.ACCESS_NETWORK_STATE",
        "android.permission.CAMERA",
        "android.permission.SYSTEM_ALERT_WINDOW",
        "android.permission.WAKE_LOCK",
        "android.permission.BLUETOOTH",
        "android.permission.FOREGROUND_SERVICE",
        "android.permission.FOREGROUND_SERVICE_CAMERA",
        "android.permission.FOREGROUND_SERVICE_MICROPHONE",
        "android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION",
        "android.permission.POST_NOTIFICATIONS"
      ],
      "package": "co.vapi.DailyPlayground"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],
      [
        "@config-plugins/react-native-webrtc",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
        }
      ],
      [
        "@daily-co/config-plugin-rn-daily-js",
        {
          "android": {
            "enableBackgroundMode": true,
            "enableForegroundService": true,
            "enableMediaDevicesEventMonitor": true,
            "enableMediaDevicesEventMonitorInterval": 1000
          }
        }
      ],
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 24,
            "compileSdkVersion": 35,
            "targetSdkVersion": 35,
            "buildToolsVersion": "35.0.0"
          },
          "ios": {
            "deploymentTarget": "16.0"
          }
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

Can you try using this setup exactly?

[akatergi]

@AdiSai can you show me your package.json and Podfile as well?

[AdiSai]

@AdiSai can you show me your package.json and Podfile as well?

package.json

app.json

[AdiSai]

@akatergi podfile:

require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")

require 'json'
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}

ENV['RCT_NEW_ARCH_ENABLED'] = podfile_properties['newArchEnabled'] == 'true' ? '1' : '0'
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] = podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']

def node_require(script)
  require Pod::Executable.execute_command('node', ['-p',
    "require.resolve(
      '#{script}',
      {paths: [process.argv[1]]},
    )", __dir__]).strip
end
  
# Use it to require both react-native's and this package's scripts:
node_require('react-native/scripts/react_native_pods.rb')
node_require('react-native-permissions/scripts/setup.rb')

platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
install! 'cocoapods',
  :deterministic_uuids => false

prepare_react_native_project!

setup_permissions([
  # 'AppTrackingTransparency',
  # 'Bluetooth',
  # 'Calendars',
  # 'CalendarsWriteOnly',
  # 'Camera',
  # 'Contacts',
  # 'FaceID',
  # 'LocationAccuracy',
  # 'LocationAlways',
  # 'LocationWhenInUse',
  # 'MediaLibrary',
  'Microphone',
  # 'Motion',
  # 'Notifications',
  # 'PhotoLibrary',
  # 'PhotoLibraryAddOnly',
  # 'Reminders',
  # 'Siri',
  # 'SpeechRecognition',
  # 'StoreKit',
])

target 'Simple' do
  use_expo_modules!

  if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
    config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
  else
    config_command = [
      'node',
      '--no-warnings',
      '--eval',
      'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
      'react-native-config',
      '--json',
      '--platform',
      'ios'
    ]
  end

  config = use_native_modules!(config_command)

  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/..",
    :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
  )

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      :ccache_enabled => podfile_properties['apple.ccacheEnabled'] == 'true',
    )

    # This is necessary for Xcode 14, because it signs resource bundles by default
    # when building for devices.
    installer.target_installation_results.pod_target_installation_results
      .each do |pod_name, target_installation_result|
      target_installation_result.resource_bundle_targets.each do |resource_bundle_target|
        resource_bundle_target.build_configurations.each do |config|
          config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
        end
      end
    end
  end
end

[akatergi]

@AdiSai I've copied your Podfile, package.json, and app.json over. I'm now getting this error when I try to "npx expo prebuild":

akatergi@Adels-MacBook-Pro apptest % npx expo prebuild PluginError: Failed to resolve plugin for module "expo-build-properties" relative to "/Users/akatergi/Desktop/Projects/apptest" PluginError: Failed to resolve plugin for module "expo-build-properties" relative to "/Users/akatergi/Desktop/Projects/apptest" at resolvePluginForModule (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config-plugins/build/utils/plugin-resolver.js:96:9) at resolveConfigPluginFunctionWithInfo (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config-plugins/build/utils/plugin-resolver.js:145:7) at resolveConfigPluginFunction (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config-plugins/build/utils/plugin-resolver.js:136:7) at withStaticPlugin (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config-plugins/build/plugins/withStaticPlugin.js:85:70) at /Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config-plugins/build/plugins/withPlugins.js:30:84 at Array.reduce (<anonymous>) at withPlugins (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config-plugins/build/plugins/withPlugins.js:30:18) at withConfigPlugins (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config/build/plugins/withConfigPlugins.js:35:47) at fillAndReturnConfig (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config/build/Config.js:236:78) at getConfig (/Users/akatergi/Desktop/Projects/apptest/node_modules/@expo/config/build/Config.js:293:10)

When I try to just run npx expo build it gives me this error:
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:A4F40905-44B0-47D6-838A-25FA661D4926, OS:18.3.1, name:iPhone 16 Pro }
{ platform:iOS Simulator, id:A4F40905-44B0-47D6-838A-25FA661D4926, OS:18.3.1, name:iPhone 16 Pro }
** BUILD FAILED **

The following build commands failed:
PhaseScriptExecution [CP-User]\ Generate\ app.config\ for\ prebuilt\ Constants.manifest /Users/akatergi/Library/Developer/Xcode/DerivedData/apptest-atujcrtbyejvexfqwzsfzmivaffg/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/EXConstants.build/Script-46EB2E000218D0.sh (in target 'EXConstants' from project 'Pods')
Building workspace apptest with scheme apptest and configuration Debug
(2 failures)
Build logs written to /Users/akatergi/Desktop/Projects/apptest/.expo/xcodebuild.log

Would you mind getting on a call to debug this faster?

[akatergi]

@AdiSai any updates? Are you willing to get on a call? I'm willing to pay if I need to, I wasted too much time on this and I need to ship this soon.