Horrible experience starting a project

[JeanPSF]

Description

I tried to start a new project, on a clean computer and i gave up.

There is a gradle problem with the latest react native version in the date i am writing this, which the tutorial from the official website does not support and it is impossible to run the project on it, i had to waste 4 hours around the internet searching for how to fix even tho i did not change a single line of code and my enviroment according to react-native doctor was 100% (gradle/gradle#27844 (comment))

Solution:
distributionUrl=https://services.gradle.org/distributions/gradle-8.5-bin.zip

I cleaned all my vscode configuration, installed all official plugins according to package.json (babel, react-native, eslint, react native esling, typescript, typescript eslint, eslint, prettier)

Added a settings.json and also configured my global and workspace setting according to multiple configurations found around the git issues and the formatting of the files simply do not work.

Whereas the formatting works perfect with reactjs, nextjs, nestjs, flutter, java, typescript and javascript files on any other project besides the react native.

It was a pain just to run the hello world project on the emulator and when it finally runs, i can't code because of configuration files unless i disable all the lints. It is extremelly frustrating (not even going to talk about the java configuration needed which i already knew it was going to be a pain, and honestly, nothing has improved from 2.5 years ago when i last worked with react native detecting the java and jdk configuration).

So, my suggestion is to improve, not sure how, the Enviroment Setup section (https://reactnative.dev/docs/environment-setup) so it helps people understand all the base configuration needed to properly run everything the starting project has to offer.
Also, make the project configuration of the starting project a little smarter on the setup, so it warn developers on missing extensions or configuration (flutter does an awesome job on this aspect, just add a flutter project on a brand new computer with vscode, vscode will give you tons of modals to install everything you need).

Some good examples which has never failed me, neither on windows or on macbooks.

https://docs.flutter.dev/get-started/install/windows/mobile
https://spring.io/quickstart
https://docs.nestjs.com/
https://nextjs.org/docs/getting-started/installation

Steps to reproduce

1. https://reactnative.dev/docs/environment-setup
2. React Native CLI
3. Windows
4. Android or IOS
5. Follow all the steps

React Native Version

0.74.0

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.19045
  CPU: "(16) x64 AMD Ryzen 7 3700X 8-Core Processor             "
  Memory: 14.88 GB / 31.93 GB
Binaries:
  Node:
    version: 20.12.2
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.5.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "32"
      - "34"
    Build Tools:
      - 34.0.0
    System Images:
      - android-34 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Disabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-233.14808.21.2331.11709847
  Visual Studio:
    - 17.9.34616.47 (Visual Studio Community 2022)
    - 17.10.34607.79 (Visual Studio Community 2022)
Languages:
  Java: 17.0.5
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.0
    wanted: 0.74.0
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.74.1 is now available (your project is running on v0.74.0).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.74.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Stacktrace or Logs

> npx react-native run-android

info Installing the app...

> Configure project :react-native-vision-camera    
[VisionCamera] Thank you for using VisionCamera ?? 
[VisionCamera] If you enjoy using VisionCamera, please consider sponsoring this project: http://github.com/sponsors/mrousavy
[VisionCamera] node_modules found at E:\msc_rn_poc\node_modules
[VisionCamera] VisionCamera_enableFrameProcessors is set to true!
[VisionCamera] react-native-worklets-core not found, Frame Processors are disabled!
[VisionCamera] VisionCamera_enableCodeScanner is set to false!

> Task :app:checkDebugAarMetadata FAILED
12 actionable tasks: 8 executed, 4 up-to-date      

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor  


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform hermes-android-0.74.0-debug.aar (com.facebook.react:hermes-android:0.74.0) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}.
      > Execution failed for JetifyTransform: C:\Users\User\.gradle\caches\modules-2\files-2.1\com.facebook.react\hermes-android\0.74.0\d60b409dd038152531d9601cb213ef5faa2ddc58\hermes-android-0.74.0-debug.aar.
         > Java heap space

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.        

BUILD FAILED in 42s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Execution failed 
for task ':app:checkDebugAarMetadata'. > Could not 
resolve all files for configuration ':app:debugRuntimeClasspath'. > Failed to transform hermes-android-0.74.0-debug.aar (com.facebook.react:hermes-android:0.74.0) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}. > Execution failed for JetifyTransform: C:\Users\User\.gradle\caches\modules-2\files-2.1\com.facebook.react\hermes-android\0.74.0\d60b409dd038152531d9601cb213ef5faa2ddc58\hermes-android-0.74.0-debug.aar. > Java heap space * Try: 
> Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 42s.
info Run CLI with --verbose flag for more details.

Reproducer

https://github.com/facebook/react-native

Screenshots and Videos

No response

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.1. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

This has already been discussed a number of times:
#36685 (comment)
#41310 (comment)

Solution: You need to increase the amount of memory that Gradle can use.

Also have you considered using Expo instead?

[mrkesu]

Changing to distributionUrl=https://services.gradle.org/distributions/gradle-8.5-bin.zip worked. Changing memory settings as suggested did absolutely nothing for me.

Cheers mate, I was about to tear my hair out.

This was actually a more frustrating start than setting up a flutter dev environment on Arch. Impressive.

[JeanPSF]

Gradle memory was not the problem. Which means this was not discussed a number of times, but since it is closed, there is no point in keep discussing.

I am glad i was able to help you @mrkesu

This has already been discussed a number of times: #36685 (comment) #41310 (comment)

Solution: You need to increase the amount of memory that Gradle can use.

Also have you considered using Expo instead?

[dkrish]

Changing to distributionUrl=https://services.gradle.org/distributions/gradle-8.5-bin.zip worked. Changing memory settings as suggested did absolutely nothing for me.

Cheers mate, I was about to tear my hair out.

This was actually a more frustrating start than setting up a flutter dev environment on Arch. Impressive.

worked for me too, thanks!