Renaming Your React Native App: A Step-by-Step Guide

If you’ve ever needed to change the name of your React Native app, whether due to a rebranding effort or a change in project focus, you’re not alone. Renaming an existing React Native app involves several steps, and in this guide, we’ll walk through the process manually. By following these steps, you can ensure a smooth transition without relying on external packages.

Step 1: Update package.json

The first step is to open your package.json file and locate the name field. This field serves as the unique identifier for your app. Replace the current name with the desired new name for your application.

{  
  "name": "newAppName",  
  // other fields...  
}

Step 2: Update App Display Name in app.json

In the app.json file, locate the displayName field. This field represents the name displayed when the app is installed on a device. Update it with the new app name.

{  
  "name": "newAppName",  
  "displayName": "New App Name"  
}

Step 3: Update AndroidManifest.xml

For Android, open android/app/src/main/AndroidManifest.xml and find the package attribute. Update it to match the new app name.

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

Step 4: Update iOS Bundle Identifier in Info.plist

For iOS, navigate to the ios/<newAppName>/Info.plist file and locate the CFBundleIdentifier. Update it to match the new app name.

<key>CFBundleIdentifier</key>  
<string>com.newAppName</string>

Step 5: Clean and Rebuild

Cleaning the project is essential to apply the changes effectively. For Android, run the following commands:

cd android && ./gradlew clean  
cd ..

For iOS, open the ios directory in Xcode and clean the project.

Step 6: Update App References

Manually search and replace the old app name in your codebase with the new one. This step is crucial to avoid any runtime issues.

Step 7: Verify Changes

Finally, run your app to verify that everything is working correctly. Use the following commands:

npx react-native run-android

npx react-native run-ios

By following these steps, you’ve successfully renamed your React Native app. This manual approach ensures control and understanding of the changes made to your project. Remember to commit your changes to version control to track the renaming process.

I hope this guide has been helpful in navigating the process of renaming your React Native app manually. If you have any questions or encounter issues, feel free to reach out. Happy coding!

• 👏 Clap for the Story and Follow the Author
• Show your appreciation for the author’s insightful content.
• Follow Abhishek Kumar.
• 📰 Explore More in the Abhishek Kumar Publication
• 🔔 Stay Connected on Social Media
• Stay updated on the latest discussions and content by following on Twitter and connecting on LinkedIn.