How to Rename App and Change Package Name in React Native for Android
Renaming React Native app for Android:-
Locate your app code base, we need to edit only 2 files.
app.json (in root folder of your (app)
strings.xml (in app/android/app/src/main/res/strings.xml)
Currently the app looks like this in emulator:
We will fix the name by modifying the above 2 listed files. Here goes the changes to be made:
Step 1: Modify app.json Do NOT modify the value of “name”. Modify the value of “displayName” with a string value, use a value here that you want to display as the application name
Step 2: strings.xml Modify 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.
Step 4: Open command prompt in your root directory of the app and fire following command:
Note: If you already have command prompts and emulators open, please close them. Open new command prompt window, navigate to your app code base and run the command.
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 playstore listing and some believe it is also important from the App Store Optimization (ASO) perspective.
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
Let’s start with the modifications:
1. MainActivity.java
Change package name on first line of the file:
2. MainApplication.java
Change the package name on first line of the file here as well.
Also change the flipper application ID in case you are using React Native 0.60+
3. AndroidManifest.xml
In manifest tag, change the value of package attribute here
4. _BUCK
Change package value in android_build_config and android_resource as following:
5. build.gradle
Change applicationID under defaultConfig in build.gradle as follows:
Once above steps are done, we also need to restructure folders in /android/app/src/main/java folder. Currently they are as follows:
We will change this structure based on what package name we have decided for our app. In my case I am choosing “com.nimishprabhu.jdejulian” as my package name, hence I will restructure the folders accordingly. Here’s how my folder structure looks after restructuring.
Since we went from com.app to com.nimishprabhu.jdejulian, we have created folder structure likewise. Now my MainActivity.java and MainApplication.java resides in “/android/app/src/main/java/com/nimishprabhu/jdejulian” folder.
We are all set now, one final thing to do is to cleanup the android build and here’s how you do it from command line.
Open command prompt in android folder (not your application root folder, but android folder inside your application root folder) and fire following command:
You will see following message on successful execution
You will see this message in command prompt indicating the change of package name:
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.
Last updated