How to Rename A React Native App

Caution: I’m not sure that this is the best approach to the task. If you do want to try it make sure you’re using source control

Renaming your React Native project is something you’ll rarely have to do, if ever. I’ve had to do it in the past and I struggled quite a bit. I don’t have much/any native development experience so I felt out of my element when I was trying to work there.

Fortunately renaming a React Native project has gotten much easier for those of us without native experience. I’m not sure if this was made possible as a necessity for create-react-native-app or if CRNA is simply using it but there is now (since v0.41 I believe) an app.json file and a react-native eject command. These tools have made creating a React Native app incredibly easy but for those that already have React Native apps we can still leverage them in renaming the application.

tl;dr

Copy your icons from iOS and Android
Update displayName in app.json to the new name
Delete ios/ and android/ directories
Run react-native eject
Replace the icons you copied earlier
Run react-native link
Start your app and hope it worked! Or read the rest of this tutorial.

Prefer Video?

Setup

As a demo for this tutorial I’ll be using the completed project from my course, Create Your First React Native App. It’s a basic React Native application with a horrible name, YFRNAppSource. It’s a contact management app so we’ll be renaming it to Contact Manager.

Something else to note is that this app has native dependencies due to react-native-vector-icons. It’s also got icons for the home screen. The primary thing we’ll be updating is the display name used on the home screen for the app and maintaining our native dependencies & icons. Here’s what our app currently looks like on the screen.

Preparation

There might be a better way to do this but this is what I’ve found worked for me. Knowing that I’ve got icons set up for my app, which live in the ios/ and android/ directory I’m going to make a copy of them because those directories will be completely overwritten.

For iOS we’ll copy the Images.xcassets which can be found at ios/YFRNAppSource/. For my app that’s all I need — if you’ve added other assets (such as splash screens) you may need to get a copy of those as well.

For Android we’ll copy the mipmap-*files which can be found at android/app/src/main/res/ . For my app that’s all I need — if you’ve added other assets (such as splash screens) you may need to get a copy of those as well.

If you’ve worked on this application for a long time and have made a lot of updates to the android and ios directories make sure to review everything you’ve added and copy the appropriate files/directories.

Making the Name Change

To change the application name you’ll want to open the app.json file in the root of your project. Mine looks like this

app.json

{
  "name": "YFRNAppSource",
  "displayName": "YFRNAppSource"
}

To simply change the name displayed to the user on their home screen all you’ll likely need to change is the displayName property. That’s all I’ll be doing — this way, when we check out our git diff after upgrading not everything inside the ios/ and android/ directory will change, making it easier to look at.

To make the change I’ll update displayName.

app.json

{
  "name": "YFRNAppSource",
  "displayName": "Contacts Manager"
}

Now I’ll delete the ios/ and android/ directories from my project.

With those gone I can run react-native eject which will recreate the files — you’ll see an output similar to this in your console.

➜ YFRNAppSource git:(master) react-native eject
Scanning 644 folders for symlinks in /Users/spencer/dev/YFRNAppSource/node_modules (4ms)
Generating the iOS folder.
Generating the Android folder.

If you run git status at this point you’ll see that a lot has changed. A large portion of that is from our icons being deleted. Copy and paste those directories you copied earlier to their appropriate spots.

If you run git status at this point there are a lot less changes. In my case the next largest cause of changes is a result of react-native-vector-icons no longer being linked.

Fortunately, we can use react-native link to fix this problem so I’ll use that command to link the native dependencies. If you’ve got native dependencies you have to manually set up (meaning they don’t work with react-native link) you’ll want to do that now as well.

This leaves me with a much smaller set of changes when running git status.

modified: android/app/src/main/res/values/strings.xml
modified: app.json
modified: ios/YFRNAppSource.xcodeproj/project.pbxproj
modified: ios/YFRNAppSource/Info.plist

The changes in strings.xml and app.json are simply name changes, checking out the git diff makes that clear.

The diff to the project.pbxproj file may seem intimidating but really nothing has changed except the string that prefixes each line. There isn’t anything we need to do here.

The last file is Info.plist which, for me, is exactly as I need it. Your project may be different — you might have requested certain permissions or other things. You’ll want to check all of that out and make sure things are set up as you need it.

Testing It Out

First, make sure to kill the React Native packager. Then you can go ahead and run the app however you normally do (for me it will be via react-native run-ios and react-native run-android).

You can now see that the app has a new name and the icon remains the same.

In Conclusion

For something so simple it’s a lot of steps and it’s mostly running a handful of commands and then making sure you don’t break anything in the process. If you know what to change on the native side then that may be the better choice for you as it will touch less code. If you’re going to change the name of your app I suggest you do so as early as possible to reduce any headache.