Gradle Essentials für React Native Entwickler

Einleitung

Gradle ist für die Entwicklung von React Native Apps auf Android ein unverzichtbares Tool. Dennoch ist es vor allem für React Native-Entwickler ein Buch mit sieben Siegeln, da ein Großteil einen Web-Background hat und somit eher mit JavaScript vertraut ist. In diesem Artikel werden die Essentials behandelt, mit denen man als React Native-Entwickler vertraut sein sollte, um effektiv mit Gradle zu arbeiten.

Grundlagen von Gradle

Gradle ist ein mächtiges Build-Automatisierungstool, das vor allem in der Entwicklung von Android-Anwendungen verwendet wird. Es nutzt eine Domain-Specific Language (DSL) basierend auf Groovy oder Kotlin, um die Build-Konfiguration zu definieren. In React Native wird Groovy verwendet und die wichtigsten Dateien für Entwickler sind die beiden build.gradle Dateien.

Syntax

Ein Gradle-Build besteht aus einem oder mehreren Projekten. Jedes Projekt repräsentiert eine Komponente des Gesamtbuilds (z.B. eine App, ein Library-Modul, ...). Die grundlegenden Aktionseinheiten in einem Gradle-Build sind Tasks. Ein Task repräsentiert eine atomare Build-Aktion (Kompilieren von Quellcode, das Erstellen von Paketen, ...). Über Plugins oder externe Repositories können zusätzliche Funktionen bereitgestellt werden.

Build Gradle Dateien in React Native Projekten

In React Native Projekten gibt es zwei unterschiedliche build.gradle Dateien. Eine im android Ordner (Projektebene), sowie Eine unter android/app (Modulebene).

Projektweite build.gradle Datei

Die Datei direkt im android Ordner dient der Konfiguration des gesamten Projekts. In der Theorie könnte es zusätzlich zu android/app/build.gradle noch weitere verschiedene Module mit jeweils eigenen build.gradle-Dateien geben. In einem frischen React Native Projekt hat sie in der Regel folgendes Format:

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext {
        kotlinVersion = "1.8.0"
        buildToolsVersion = "33.0.0"
        minSdkVersion = 24
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

• buildscript definiert die Umgebung in der das Script ausgeführt wird. Es legt fest, welche Plugins und Dependencies für die Ausführung des Gradle-Build-Scripts selbst benötigt werden.
• ext ist zuständig dafür Versionsnummern für Dependencies zu definieren sowie die SDK-Zielversionen festzulegen.
• repositories definiert Repositories, von denen Gradle die Plugins und Dependencies herunterladen soll, die für das Build-Script benötigt werden.
• dependencies listet die Abhängigkeiten auf, die zum Bauen der App benötigt werden, z.B. das React Native Plugin oder das Kotlin Plugin.

Appweite build.gradle Datei

Die Datei im android/app Ordner ist spezifisch für das verwendete Modul:

• Am Anfang der Datei werden die verwendeten Plugins definiert, z.B. apply plugin: 'kotlin-android', welches dafür sorgt dass in der App Kotlin verwendet werden kann.
• Der Key android definiert Android-spezifische Einstellungen, wie z.B. die compileSdkVersion, welche auf die in der projektweiten build.gradle definierte Version via rootProject.ext.compileSdkVersion zugreift.
• dependences definiert die in diesem Modul verwendeten Abhängigkeiten, wie z.B. das React Native Plugin via implementation("com.facebook.react:react-android").
• apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) bezieht sich auf das Einbinden sowie Aufrufen einer Gradle Script - Datei.

Weitere Gradle Dateien

Neben den beiden build.gradle-Dateien, die sicherlich am wichtigsten sind, gibt es noch folgende Dateien:

settings.gradle

In dieser Datei werden alle Module/Subprojekte aufgelistet, die zum Gesamtprojekt gehören, sowie die Pfade zu den nativen Modulen definiert:

rootProject.name = 'ReactNativeDemo'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')

gradle.properties

Hier werden Konfigurationsoptionen und Eigenschaften festgelegt, die sowohl von Gradle als auch von React Native verwendet werden können:

# Project-wide Gradle settings.

# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.

# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html

# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m

# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true

# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.182.0

# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=false

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true

gradle-wrapper.properties

Diese Datei definiert die verwendete Gradle-Version und verwaltet weitere Optionen wie z.B. Downloadort:

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
networkTimeout=10000
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

Schlusswort

Zusammenfassend lässt sich sagen, dass es für fortgeschrittene React Native-Entwickler unverzichtbar ist, ein zumindest grundlegendes Verständnis von Gradle aufzubauen, auch wenn es zunächst komplex erscheinen mag. Durch das Verständnis der verschiedenen Gradle-Dateien und ihrer spezifischen Rollen kann die Konfiguration des Projekts effektiver verwaltet und angepasst werden. Es ist eine Investition, die sich langfristig auszahlt, denn ein tiefgreifendes Verständnis von Gradle ermöglicht eine flexiblere und leistungsfähigere App-Entwicklung auf Android.