react-native plugin run-android fail with default install (metro/babel)

When using the instructions with android the app is installed on the device but metro ultimately fails at some point with the default App.tsx that comes with the plugin.

Current Behavior

Metro fails to bundle the js/ts with the default nrwl react-native app

Expected Behavior

App should load as expected

Steps to Reproduce

npx create-nx-workspace happynrwl \
--preset=react-native \
--appName=mobile

nx run-android mobile

Failure Logs

Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.

(Neither of the above plugins seem to be in use)

Environment

• node 16
• npm 8
• MacOS M1
• Android Nexus 10

[curthipster]

Even better, @xiongemi’s fix in 14.7.6 seems to work without my patch above. Thank you @xiongemi.

[mtzfactory]

I’ve got the app running with hot reload and nx test working with the following change.

Add the plugins section to apps/<your name>/babel.config.json:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

I can confirm too that @curthipster solution works. Test working properly as well.