React Native in VS Code: add configuration for iOS Device to launch.json

Question

I have a React Native project open in Visual Studio code, and Im trying to run the project on a physical connected iOS device. I successfully ran the app on the device directly from Xcode, but from Visual Studio Code I'm having issues. I believe I need to add a configuration for the device into launch.json. I have tried different entries in there but non seem to work. What is the proper way to add a configuration for a connected iOS device?

Answer 1

If you need to target a specific device, this is how it´s done:

{
  "name": "iOS Device",
  "program": "${workspaceRoot}/.vscode/launchReactNative.js",
  "type": "reactnative",
  "request": "launch",
  "platform": "ios",
  "sourceMaps": true,
  "target": "device",
  "outDir": "${workspaceRoot}/.vscode/.react",
  "runArguments": [
    "--device",
    "DEVICE NAME"
  ],
}

So you need to set "target": "device" to tell the debugger to run on a device, and then you set the device name through "runArguments".

Answer 2

Try with react-native run-ios --device "your device name"

Device name you can find in xcode

You can add this in package.json also

{
    start:ios: "node node_modules/react-native/local-cli/cli.js run-ios --device \"your device name\""
}

You may need to install ios-deploy

npm install -g ios-deploy

For vscode launch.json you can add these configuration node node_modules/react-native/local-cli/cli.js run-ios --device \"your device name\" in launch.json too

launch.json

{
        "type": "node",
        "request": "launch",
        "name": "Run app",
        "program": "${workspaceRoot}/node_modules/react-native/local-cli/cli.js",
        "cwd": "${workspaceRoot}",
        "runtimeArgs": [
            "run-ios",
            "--device",
            "\"your device name\""
        ],
    }