How to rename app and change package name in React Native for Android

In this tutorial we will see how to rename/update an app and change/update package name in React Native app for Android. We need to approach this in 2 steps.

Change or update the display name (rename the app).
Change or update the package name.

Renaming React Native app for Android

To rename app name, locate app.json & string.xml files in your app code base.

In app.json (in root folder of your app i.e. PROJECT_HOME\) update displayName to your desired name. Kindly do not change/update name string.

In string.xml (PROJECT_HOME\android\app\src\main\res\values\strings.xml) update the xml to include value for string with attribute key as app_name to the desired application name that you want to be displayed under your application icon.

Note: If you already running app on emulator or device, please close them and if required uninstall.

Run this app again using command

npx react-native run-android

Voila! Your app name would have been changed.

Change Package name in React Native for Android application

Now we will change the package name for the application.

Why is this required?

Package name shows up in your Google PlayStore listing and it helps App Store Optimization (ASO). Also you might want to include your company name in package name.

We will be modifying quite a few files for this, but it is pretty straight forward. Note: Please experiment these steps on a dummy app before you do it on your main app or atleast take backup of your current app directory before making changes to the files.

So, lets get started with the list of files we will be modifying:

MainActivity.java
MainApplication.java
AndroidManifest.xml
_BUCK
build.gradle

1. MainActivity.java
Change package name on first line of the file.

package com.demo;

package com.companyName.demo;

2. MainApplication.java
Change the package name on first line of the file here as well.

package com.demo;

package com.companyName.demo;

Also change the flipper application ID in case you are using React Native 0.60+

Class.forName("com.demo.ReactNativeFlipper");

Class.forName("com.companyName.demo.ReactNativeFlipper");

3. AndroidManifest.xml
In manifest tag, change the value of package attribute here

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

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

4. _BUCK
Change package value in android_build_config and android_resource as following:

android_build_config(
    name = "build_config",
    package = "com.demo",
)

and

android_resource(
    name = "res",
    package = "com.companyName.demo",
    res = "src/main/res",
)

5. build.gradle
Change applicationID under defaultConfig in build.gradle as follows:

defaultConfig {
    applicationId "com.companyName.demo"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "0.0.1"
}

Once above steps are done, we need to update structure of folders in /android/app/src/main/java/com folder. Structure is based on what package name have decided for app. We used package name as com.companyName.demo, hence need to restructure the folders accordingly.

Now updated structure becomes /android/app/src/main/java/com/companyName/demo

package name updated from com.demo to com.companyName.demo, we have created folder structure likewise. Now MainActivity.java and MainApplication.java resides in /android/app/src/main/java/com/companyName/demo folder.

Now one final step is to cleanup the android build using below command. Open command prompt in android folder (NOT in root folder, but android folder inside application root folder).

gradlew clean

Once you see BUILD SUCCESSFUL message on execution completion, its time to test our changes. Close any open command prompts, node JS or android emulator windows.

npx react-native run-android

You will see this message in command prompt indicating the change of package name:

Starting: Intent { cmp=com.companyName.demo/.MainActivity }

That’s all for this tutorial. Hope it was helpful. Let me know in comments if you liked this tutorial or in case you face any issues. I will try to help you out with the same. We will see more app tweaking in upcoming tutorials. Follow this page and website for amazing development tutorials on react native and other programming languages.