React Native: App-Namen, Version und Icon ändern

Was bisher geschah?

App-Name ändern

Beim Erstellen des Beispielprojektes wurde ein App-Name schon angegeben. Möchte man ihn nachträglich ändern dann sind die folgenden Schritte erforderlich.

Android

In der Datei app.json den displayName-Wert und in android/app/src/main/res/values/strings.xml den Resource-String app_name ändern.

Die App neu erstellen mit npx react-native run-android.

iOS

In der Datei ios/LNReactNativeDemo/Info.plist den Wert von CFBundleDisplayName ändern.

Die App neu erstellen mit npx react-native run-ios.

App-Version ändern

Android

Methode 1:

In der Datei android/app/build.gradle im Abschnitt defaultConfig. Den versionCode und versionName anpassen.

android {
    ...
    defaultConfig {
        ...
        versionCode 1
        versionName "1.0.5"
    }
    ...
}

Methode 2:

Eine andere Möglichkeit ist zwei Variablen in der app.json-Datei zu erstellen:

{
  "name": "LNReactNativeDemo",
  "displayName": "LN React Native Demo",
  "versionCode": 1,
  "versionName": "1.0.5"
}

In der android/app/build.gradle zwei Funktionen vor dem android-Block zum Auslesen der Variablen definieren:

/* Get App version from app.json file */
import groovy.json.JsonSlurper

def getAppVersionName() {
    def inputFile = new File("../app.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["versionName"]
}

def getAppVersionCode() {
    def inputFile = new File("../app.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["versionCode"]
}

In dem android-Block darunter die Werte der Variablen versionCode und versionName ersetzen mit den Funktionsaufrufen:

android {
    ...
    defaultConfig {
        ...
        versionCode getAppVersionCode()
        versionName getAppVersionName()
    }
    …
}

Jetzt wird die Version in der Datei app.json geändert.

iOS

🙄

App-Icon ändern

Android

Die App-Icons liegen in dem Ordner android/app/src/main/res/. Die mipmap-Unterordner enthalten die Icons in unterschiedlichen Größen. Diese werden mit neuen Icons ersetzt.

Ein Icon-Set kann mit diesem Online-Tool Android Asset Studio – Launcher icon generator erstellt werden.

Nach dem Austauschen der Icons die App neu erstellen mit npx react-native run-android.