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
How to Rename A React Native App
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.
- Copy your icons from iOS and Android
app.jsonto the new name
- Replace the icons you copied earlier
- Start your app and hope it worked! Or read the rest of this tutorial.
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.
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
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
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
android/ directory will change, making it easier to look at.
To make the change I’ll update
"displayName": "Contacts Manager"
Now I’ll delete the
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
The changes in
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
You can now see that the app has a new name and the icon remains the same.
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.
I hope you enjoyed this and if you’re interested in learning more tips & tricks about React Native sign up for my email list!