React Native Android app not connecting to Metro Bundler

I'm trying to run my React Native app on Android using installDevDebug, and then starting Metro with:
npx react-native-start
Metro seems to bundle the app correctly (I can see in the console that the bundling is done), but when it finishes, the app stays on a white screen. If I don’t run Metro, the app works fine.

It rarely works sometimes though, but I can't seem to find what's different when it does. When it is working, if I refresh something that’s not a component, the app closes, and when I open it again, it comes back to the white screen after bundling as before.

If I try to pen the developer menu, it says:
No target connected

I also tried running:

npx react-native log-android

But it only outputs:

info starting logkitty

and nothing else.

I also tried reversing the port with:

adb reverse tcp:8081 tcp:8081
but it didn't solve the problem.

Has anyone experienced a similar issue where the app bundles successfully but cannot connect to Metro? How can I solve or debug this white screen and the "No target connected" issue?

Additional info:

React Native: 0.83.1, newArch and hermes enabled

Node 24.13.0 (Also tried Node 20.19.4)

And this is my metro.config.js:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); const path = require('node:path'); /** * Metro configuration * https://reactnative.dev/docs/metro * * @type {import('@react-native/metro-config').MetroConfig} */ const defaultConfig = getDefaultConfig(__dirname); const { assetExts, sourceExts } = defaultConfig.resolver; const config = { transformer: { ...defaultConfig.transformer, babelTransformerPath: require.resolve('react-native-svg-transformer'), }, resolver: { ...defaultConfig.resolver, assetExts: assetExts.filter(ext => ext !== 'svg'), sourceExts: [...sourceExts, 'svg'], extraNodeModules: { '@': path.resolve(__dirname, 'src'), }, }, watchFolders: [path.resolve(__dirname, 'src')], }; module.exports = mergeConfig(defaultConfig, config);