8

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?

pnizzle
  • 6,243
  • 4
  • 52
  • 81

3 Answers3

5

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".

Johannes
  • 1,370
  • 16
  • 15
3

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\""
        ],
    }
Kishan Mundha
  • 2,989
  • 18
  • 26
  • This does not seem to work, Kishan. I've went with the default style for the configuration, got it to work, see my answer. – pnizzle Jul 03 '17 at 23:52
2

This is what I eventually had and managed to get it to install and launch on the connected device. The value for key name does not seem to uniquely identify a connected device. Its just the name that shows in Device Debug drop down.

    {
        "name": "My iPad",
        "program": "${workspaceRoot}/.vscode/launchReactNative.js",
        "type": "reactnative",
        "request": "launch",
        "platform": "ios",
        "target": "device",
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/.vscode/.react"
    },
pnizzle
  • 6,243
  • 4
  • 52
  • 81