React Native Tools VSCode Debugging Issue

Hope someone could help me out a little. I am trying to do some mobile development using react native, I am a C# web/software developer. I am developing using VSCode and installed the react native tools extension on Windows 10.

I created my solution using create-react-native-app, Everything is working great and I have done a decent amount of development using AVD emulator to view the app.

So firstly to get the debugger to show up in VSCode I added the following to launch.json :

{
        "name": "Attach to packager",
        "program": "${workspaceRoot}/.vscode/launchReactNative.js",
        "type": "reactnative",
        "request": "attach",
        "port": 19001, // change this with your port
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/.vscode/.react"
 }

It seems like the port number did not work properly so in addition to this I added the following to settings.json:

{
  "react-native" : {
    "packager": {
        "port":19001
    }
  }
}

Folder structure is: -> APP ->.vscode ->setting.json and launch.json

Now doing this seems to do the trick. All I have to do is enable remote js debug with ctrl + M as I can then debug my application.

The moment I make any changes in VSCode and save it, it shows the changes on my emulator, but it no longers hits any of my breakpoints. I need to reload my debugger using the menu in VSCode, this then requires me to re-add my breakpoint making it impossible to debug methods that are not set on a button click.

Am I doing something wrong cause this makes debugging pretty much useless? There are no errors in any consoles.

Please, any advice would be greatly appreciated and please let me know if I can add any additional information.

Ok so months away from react native i decided to try it again.

Running node.js v8.12.0 and VS Code. It seems like it is just easier to use Chrome js debugging. Not really what I wanted but it beats my previous work around.