Renew the app’s icon and name in React Native

First of all .. Congratulations! You’ve successfully built your app and installed it on your device. However, you might find that you want to give your app a new name and icon to make it stand out or better represent its functionality.

In this guide, we’ll walk you through the steps to change your app’s name and icon on your device. I assume you have already released the apk if not, check out my prev article for a step by step guide on how you can get your newly built app running in your own phone!

This article covers the android developers for now.. will be posting soon about ios too! So, stay tuned..

Why Change the Name and Icon?
Before we dive into the steps, let’s briefly discuss why you might want to change your app’s name and icon:

Branding: A fresh name and icon can rebrand your app, making it more appealing to users.

Clarity: A new name and icon can better reflect your app’s purpose, helping users understand what it does.

Updates: After significant updates or changes in your app’s functionality, a new name and icon can signal the improvements.

Steps to Change Your App’s Name and Icon:

Replace the icon image in the “res” directory (usually under “res/mipmap”) with your new icon. You can choose an online icon generator tool or website. Some popular options include “App Icon Generator” and “Android Asset Studio.”

• Upload your source icon image or select a base design from the tool.
• Customize the icon by adjusting its size, shape, color, and other attributes to match your preferences.
• Once you’re satisfied with the generated icons, download them in a ZIP or a compressed format provided by the tool.
• Extract the downloaded ZIP file to access the generated icon images. You should have multiple image files representing different sizes and densities.
• Now, in your Android project, navigate to the “res” directory.
• Inside “res,” locate the “mipmap” directory. This directory contains various subdirectories such as “mipmap-mdpi,” “mipmap-hdpi,” “mipmap-xhdpi,” and so on. Each subdirectory corresponds to a different screen density.
• Identify the appropriate subdirectory that matches the screen density you want to target. For example, if you want to replace the launcher icon for a medium-density screen, navigate to “res/mipmap-mdpi.”
• Copy the new icon image files from the generated icons you downloaded in step 2.
• Paste these new icon image files into the directory that matches the screen density you want to target (e.g., “res/mipmap-mdpi”).

Remember to rebuild and clean your project so always use these few commands (from your project’s directory):

cd android
./gradlew clean
cd..
npx react-native run-android

Now to test your app in your own physical device:

cd android
./gradlew assembleRelease

That’s it, Voilaaa!! You just changed your icon from the dull android default logo!

Note: If you do not see the updated icon, uninstall the prev installed version and install the new built apk file again and do not forget to restart your phone to see the updated changes!!

Let us now see how to rename the application itself:

These steps are essential to ensure that the new app name is correctly reflected in both your project configuration and the app’s user interface.

1. Modify displayName in app.json File:

The app.json file is a configuration file used in React Native projects. To change your app's name, you should modify the displayName property within this file.

• Open the app.json file in the root directory of your React Native project.
• Locate the "displayName" field and change its value to your desired app name. For example:

{
  "name": "YourAppName",
  "displayName": "My New App Name",
  // Other app configuration settings
}

Certainly, let’s elaborate on the steps to rename your Android app by modifying the displayName in the app.json file and the app_name in the strings.xml file. These steps are essential to ensure that the new app name is correctly reflected in both your project configuration and the app's user interface.

1. Modify displayName in app.json File:

The app.json file is a configuration file used in React Native projects. To change your app's name, you should modify the displayName property within this file.

• Open the app.json file in the root directory of your React Native project.
• Locate the "displayName" field and change its value to your desired app name. For example:

{
  "name": "YourAppName",
  "displayName": "My New App Name",
  // Other app configuration settings
}

• Save the changes to the app.json file.

2. Modify app_name in strings.xml File:

The strings.xml file is used to store string resources for your Android app, including the app name displayed to users.

• Navigate to the following directory within your Android project: android/app/src/main/res/values/.
• In this directory, you’ll find the strings.xml file.
• Open the strings.xml file in a text editor or code editor.
• Locate the <string name="app_name"> element, which defines the app's name.
• Change the value within this element to match the new app name:

<string name="app_name">My New App Name</string>

• Save the changes to the strings.xml file.

3. Run the Following Commands:

After making the changes to both the app.json and strings.xml files, you'll need to rebuild and run your Android app to apply the new app name.

• Open your terminal or command prompt.
• Change the working directory to the “android” folder of your React Native project using the cd command:

cd android

• Clean the project using the Gradle wrapper script gradlew with the clean task:

./gradlew clean

• Return to the root directory of your React Native project using the cd command:

cd ..

• Finally, rebuild and run your Android app using the following React Native command:

npx react-native run-android

These commands ensure that the changes you made to the app name are propagated throughout your Android project, and the app is built and launched with the updated name.

After running these commands, you should see your app displayed with the new name on your Android device or emulator’s home screen and within the app itself.

Now to test your app in your own physical device:

cd android
./gradlew assembleRelease

That’s it!! You just changed your display name!

If you found this React Native guide helpful, please give it a round of applause 👏 and follow us for more insightful articles on app development!