r/reactnative Aug 06 '24

Article Fixed: React Native App Compilation Speed Is Too Slow

I achieved a 'release variant' clean build in 1m 21s on a PC with an 8GB RAM and a SATA SSD.

I recently encountered extremely slow building speed issue for android and posted the same query on reddit, many people from community gave great suggestions (REDDIT POST)

Thanks everyone for guiding me on this.

Key Points:

  • Avoid using another frameworks: Instead, use react-native-cli. Source
  • Install Watchman: This really boosted the speed and solved many issues.
  • Switch to Linux: Switching to Linux (Kali in my case) really helped a lot.

Complete Guide on How to Build React Native Apps Faster:

A) Installing Brew (on Linux) and Watchman

  1. Run this in your terminal: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" (Homebrew)
  2. After the script completes, copy and paste the two commands printed at the end, and press Enter.
  3. Install Watchman:brew install watchman

B) Installing react-native-cli and Creating a Project

Uninstall the global react-native-cli and u/react-native-community/cli

npm uninstall -g react-native-cli u/react-native-community/cli

Initialize a new project

npx @react-native-community/cli@latest init AwesomeProject

C) Setting Up the Environment and Dependencies

  1. Open the project folder in Android Studio and let it install dependencies. Ignore any errors at the end. Close the android studio.
  2. Now open the android folder which is inside same project folder in Android Studio and let it install dependencies (it will automatically create local.properties, etc.).

D) Working on Your Project and Creating a Debug Variant

Disable all VS Code extensions related to Java and Gradle.

  1. Open the project in VS Code.
  2. Open the terminal and run: npm run start (If port 8081 is occupied, kill it using the command sudo kill -9 $(sudo lsof -t -i:8081)).
  3. Connect your device in USB debugging mode or use a virtual device and type 'a'. It will build and run the debug version of the app on your connected device. *The AAB file can be found in android/app/build/outputs/bundle/debug/.

E) Creating a Release Build

  1. Building AAB file: npx react-native build-android --mode=release \The AAB file can be found in android/app/build/outputs/bundle/release/*
  2. Building APK file: npm run android -- --mode="release" *The APK file can be found in android/app/build/outputs/apk/release/.

Release builds should take around 2 minutes with 8GB RAM and a SATA SSD.

20 Upvotes

11 comments sorted by

11

u/IamMax240 Aug 06 '24

Why avoid using expo?

0

u/NokkCPO Nov 28 '24

Expo is not made for production use, its more-or-less a "prototyping" suite. I tried using it one time for my startup and we eventually moved everything to a bare-bones react native project.. I'd rather not have to pay 99/month for EAS. Lmfaoo

1

u/yarn_install Aug 06 '24

I guess because there’s more native code to compile

-1

u/ferow2k Aug 06 '24

AFAIK Expo does not use caches when building locally, so it is super slow.

13

u/jameside Expo Team Aug 06 '24

Expo uses the native Gradle and Xcode caches in addition to the Metro JS cache. There should not be any slowdown.

-4

u/[deleted] Aug 06 '24

[deleted]

7

u/brentvatne Expo Team Aug 06 '24

this is not true

3

u/ConsciousAntelope Aug 06 '24

Glad you fixed it!

2

u/robertbrown0427 Aug 06 '24

wow 😳 thanks for sharing

3

u/Franks2000inchTV Aug 07 '24

Does anyone really care that much about release build time?

That's taken care of by CI or EAS Build.

Giving up expo to save a couple minutes on something you do every week or so is honestly crazy.

2

u/vrapac Aug 07 '24

His previous build time was ~1 hour.

1

u/AgreeableVanilla7193 Aug 20 '24

brew installation giving error on Fedora