title: Vscode breakpoints in TypeScript files not hit in React Native
body: <p>I have a React Native 0.61 project, TypeScript 3.6.2 and Vscode 1.38.1.</p>
  
  <p>Here is my launch config:</p>
  
  <pre><code>{
      "name": "Debug iOS",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios"  
  },
  </code></pre>
  
  <p><code>tsconfig.json</code>:</p>
  
  <pre><code>  {
      "compilerOptions": {
        // Target latest version of ECMAScript.
        "target": "esnext",
        // Search under node_modules for non-relative imports.
        "moduleResolution": "node",
        // Process &amp; infer types from .js files.
        "allowJs": true,
        // Don't emit; allow Babel to transform files.
        "noEmit": true,
        // Enable strictest settings like strictNullChecks &amp; noImplicitAny.
        "strict": true,
        // Disallow features that require cross-file information for emit.
        "isolatedModules": true,
        // Import non-ES modules as default imports.
        "esModuleInterop": true,
        "baseUrl": "./src",
        "jsx": "react-native",
      }
    }
  </code></pre>
  
  <p><code>babel.config.js</code>:</p>
  
  <pre><code>module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
  };
  </code></pre>
  
  <p>I start debugging in Vscode, I see the following outputs:</p>
  
  <pre><code>Starting debugger app worker.
  Established a connection with the Proxy (Packager) to the React Native application
  Debugger worker loaded runtime on port 4021
  </code></pre>
  
  <p>However, my breakpoints won't get hit. They are left as blank, gray, "unverified breakpoint"s in Vscode when I start debugging. If I put any <code>debugger</code> statement into the code itself, it gets hit in the generated/transpiled <code>.bundle</code> file:</p>
  
  <p><a href="https://i.stack.imgur.com/fq6vC.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/fq6vC.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/RFgq1.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/RFgq1.jpg" alt="enter image description here"></a></p>
  
  <p>Here are a few things that I've tried (none of them work):</p>
  
  <ul>
  <li>Added <code>"sourceMaps": true,</code> to my launch config</li>
  <li>Added <code>"outDir": "${workspaceRoot}/.vscode/.react"</code> to my launch config (I've tried it even though it says "Property outDir is not allowed"</li>
  <li>Added <code>"sourceMap": true</code> to my tsconfig</li>
  <li>Added <code>"outDir": "build"</code> to my tsconfig</li>
  <li>Added <code>"module": "commonjs"</code> to my tsconfig</li>
  <li>Added <code>"inlineSourceMap": true</code> to my tsconfig</li>
  </ul>
  
  <p>Obviously, I've tried them one by one, adding one at a time, not at once. I've also closed Vscode, deleted any Metro cache files (haste module map etc) and reopened Vscode in each step.</p>
  
  <p>I've read the possibly related questions and answers at:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/43565301/vscode-reacttypescript-mocha-breakpoints-not-hit">vscode react+typescript + mocha: breakpoints not hit</a></li>
  <li><a href="https://stackoverflow.com/questions/49372339/vscode-react-native-typescript-breakpoint-not-hit-source-map">vscode react-native typescript breakpoint not hit: source map</a></li>
  <li><a href="https://stackoverflow.com/questions/32162969/setting-the-outdir-attribute-in-visual-studio-code">Setting the &#39;outDir&#39; attribute in Visual Studio Code</a></li>
  <li><a href="https://stackoverflow.com/questions/45661027/typescript-outdir-setting-in-tsconfig-json-not-working">typescript outDir setting in tsconfig.json not working</a></li>
  <li><a href="https://stackoverflow.com/questions/54045447/react-native-typescript-cant-see-ts-in-chrome-debugger">React native + typescript can&#39;t see ts in chrome debugger</a></li>
  <li><a href="https://stackoverflow.com/questions/31169259/how-to-debug-typescript-files-in-visual-studio-code">how to debug typescript files in visual studio code</a></li>
  <li><a href="https://github.com/Microsoft/vscode-react-native/issues/405" rel="noreferrer">https://github.com/Microsoft/vscode-react-native/issues/405</a></li>
  <li><a href="https://gist.github.com/frogcjn/3bb47ce01a5168d8cd570a46cc71bb02" rel="noreferrer">https://gist.github.com/frogcjn/3bb47ce01a5168d8cd570a46cc71bb02</a></li>
  <li><a href="https://hackernoon.com/debugging-javascript-typescript-node-apps-with-chrome-devtools-vs-code-and-webstorm-97b882aee0ad" rel="noreferrer">https://hackernoon.com/debugging-javascript-typescript-node-apps-with-chrome-devtools-vs-code-and-webstorm-97b882aee0ad</a></li>
  <li><a href="https://stackoverflow.com/questions/49393419/typescript-sourcemap-not-working-in-vscode">Typescript sourcemap not working in vscode</a></li>
  </ul>
  
  <p>Also, here is the output from my <code>react-native info</code>, if it helps:</p>
  
  <pre><code>System:
      OS: macOS 10.15
      CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
      Memory: 3.69 GB / 16.00 GB
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.10.0 - /usr/local/bin/node
      Yarn: 1.19.0 - /usr/local/bin/yarn
      npm: 6.11.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
      Android SDK:
        Android NDK: 17.2.4988734
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.9.0 =&gt; 16.9.0 
      react-native: ^0.61.1 =&gt; 0.61.1 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-gesture-handler: 1.0.16
  </code></pre>
  
  <p>What am I doing wrong?</p>