React Native — Changer le PackageName de l’app Android et le BundleId de l’app iOS

À l’initialisation d’une application, React Native attribue un PackageName et un BundleId par défaut. Le PackageName et le BundleId sont les identifiants uniques de votre application. Ils se construisent comme une adresse web “inversée”.

Pour iOS, le BundleId est créé avec la structure suivante : org.reactjs.native.example.nomduprojet

Pour Android, le PackageName est crée avec la structure suivante : com.nomduprojet

Ce court article décrit les quelques étapes vous permettant de rapidement changer ces deux valeurs pour les personnalisés à votre projet.

Nous allons initier notre projet que nous appellerons changemonid.

react-native init changemonid

Changer le BundleId sur iOS

Nous allons commencer par ouvrir notre projet sur Xcode

open ios/changemonid.xcworkspace

Dans Xcode, nous allons cliquer sur l’élément changemonid, dans la colonne de gauche, et l’onglet General doit être sélectionné par défaut (si non, sélectionnez le).

Dans cet onglet, trouver le champs texte intitulé Bundle Identifier dans lequel nous allons trouver la valeur : org.reactjs.native.example.changemonid.

La manipulation est très simple. Il nous suffit de supprimer cette valeur et de la remplacer par notre BundleId. Dans mon cas fr.onthebeachdev.changemonid.

Changement du BundleId de l’app iOS

Et voilà pour iOS, nous avons terminé. Je vous invite à toujours relancer votre projet après chaque modification pour vous assurer que tout fonctionne.

react-native run-ios

Attention, si vous aviez déjà lancé votre application avec le BundleId d’origine, vous avez maintenant 2 applications sur votre simulateur. L’une correspondant à votre ancien BundleId et la seconde au nouveau. Avant de continuer à travailler, je vous invite à faire du ménage sur votre simulateur.

Changer le PackageName sur Android

Pour Android, c’est une autre histoire. Il va falloir changer le valeur com.changemonid dans plusieurs fichiers, mais également changer la structure des dossiers de l’application. Pour les modifications à apporter, vous pouvez utiliser Android Studio ou votre éditeur de code habituel, ça ne change rien.

Nous allons tout d’abord changer la structure du dossier /android/app/src/main/java/. Dans ce dossier, nous avons la structure suivante :

java
|_com
  |_changemonid

Comme vous pouvez le voir les noms des sous-dossiers correspondes au PackageName de l’application com.changemonid. Comme vous l’avez compris, il y a autant de sous-dossier que d’éléments du PackageName séparés par un point. Nous souhaitons avoir le PackageName suivant fr.onthebeachdev.changemonid, il faut donc créer la structure suivante :

java
|_fr
  |_onthebeachdev
    |_changemonid

Pour se faire, modifiez le nom du dossier com en fr, changemonid en onthebeachdev, et dans ce dossier créez un nouveau dossier changemonid. Pour finir, il faut déplacer les fichiers MainActivity.java et MainApplication.java du dossier onthebeachdev vers le dossier changemonid.

Maintenant nous allons modifier le fichier java/fr/onthebeachdev/changemonid/MainActivity.java.

La première ligne de ce fichier est la suivante :

package com.changemonid;

Comme vous pouvez le voir, elle fait référence à l’ancien PackageName. Nous allons donc remplacer com.devschool par fr.onthebeachdev.changemonid. Notre première ligne est maintenant la suivante :

package fr.onthebeachdev.changemonid;

De la même manière nous allons modifier le fichier java/fr/onthebeachdev/changemonid/MainApplication.java. Comme pour MainActivity.java, changez la première ligne pour passer de :

package com.changemonid;

à

package fr.onthebeachdev.changemonid;

Nous allons maintenant nous intéresser au fichier android/app/src/main/AndroidMainfest.xml. La première ligne de votre fichier doit être similaire à celle-ci.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.changemonid">

Encore une fois, nous allons modifier la valeur com.changemonid par fr.onthebeachdev.changemonid, pour obtenir :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="fr.onthebeachdev.changemonid">

Ouvrons maintenant le fichier android/app/src/BUCK. Dans ce fichier, il y a 2 iterations du PackageName com.changemonid. La première dans l’objet android_build_config et la seconde dans l’objet android_resource.

android_build_config(
 name = "build_config",
 package = "com.changemonid",
)
android_resource(
 name = "res",
 package = "com.changemonid",
 res = "src/main/res",
)

Comme vous l’avez compris maintenant, nous allons changer ces deux itérations par fr.onthebeachdev.changemonid.

android_build_config(
 name = "build_config",
 package = "fr.onthebeachdev.changemonid",
)
android_resource(
 name = "res",
 package = "fr.onthebeachdev.changemonid",
 res = "src/main/res",
)

C’est bientôt fini je vous rassure. Maintenant, intéressons-nous au fichier android/app/src/build.gradle. Dans l’objet defaultConfig, nous allons trouver la valeur com.changemonid pour la clé applicationId.

defaultConfig {
   applicationId "com.changemonid"
   minSdkVersion rootProject.ext.minSdkVersion
   targetSdkVersion rootProject.ext.targetSdkVersion
   versionCode 1
   versionName "1.0"
}

Qui va devenir :

defaultConfig {
   applicationId "fr.onthebeachdev.changemonid"
   minSdkVersion rootProject.ext.minSdkVersion
   targetSdkVersion rootProject.ext.targetSdkVersion
   versionCode 1
   versionName "1.0"
}

Et voilà, le PackageName de votre application a été correctement modifié.

Comme pour iOS, nous allons nous assurer que tout fonctionne correctement en relançant l’application Android :

react-native run-android

Comme pour iOS également, si vous aviez déjà lancé votre application avec le PackageName d’origine, vous avez maintenant 2 applications sur votre émulateur. L’une correspondant à votre ancien PackageName et la seconde au nouveau. Avant de continuer à travailler, je vous invite à faire du ménage sur votre émulateur.