Renaming your React Native project after it has been initialized is a hassle. React Native has a default way of being initialized which allows you to name your project from the start. This is achieved because the CLI uses the name you specify to create your Xcode and Android projects during setup. That’s a very handy feature, but what if you need to change the name of your project down the road? What’s the best way to rename your React Native project?
Without the right tool, you will quickly find yourself in a rabbit-hole of find-and-replace activity. Xcode and Android Studio errors can arise and cost you more time than you’re willing to spend investigating. Whether you began with
react-native init or a starter kit you found online, read on to learn how to rename your React Native project the easy way.
Using a starter kit
When working with React Native, you have many options to help get you started. We have the default
npx react-native init AwesomeProject which is the most basic form of initialization (https://reactnative.dev/docs/getting-started), but we also have many other ways to get the ball rolling.
There are many options available on https://codecanyon.com, https://code.market/, and other marketplaces as well as individual teams working on boilerplate templates. One of the most popular is https://infinite.red/ignite, but my personal favorite is React Native Starter from the Flat Logic team. Not only do they have React Native templates, they also Vue, React, and Angular templates for desktop apps.
Code templates that help you bootstrap your app code-wise can really benefit you in terms of time and money saved. These templates come with features like i18n (internationalization), testing setups, code formatting configurations, a pre-filled .gitignore file, and more. These are boilerplate items that we typically end up adding to our app anyway.
These kits can come with lots of features that you may not need and you can obviously strip those out. As for the parts that must stay we need a good approach to updating them. Code aside, I’m talking about configuration tasks like bundleID, package.json entries, and the name of the app.
Bootstrapping with a starter kit is one of the main reasons you may find yourself needing to rename your app.
Renaming your app
When you’re ready to rename your React Native project, there are quite a few updates you’ll need to make. The init step named the proper components, but now you need to find and change them all.
For starters, there’s your
package.json file “name” entry and
app.json if you have one. Next your ios project needs to have the following updated:
- test schemas
- AppDelegate.m module name
- more configurations in Xcode
Then there’s the Android side of the house:
- gradle settings
- package name
- main component name
- and more…
This may not seem like many updates to make, but there are several more changes you’ll need to chase down. Even when you do find them, making sure everything is in sync can quickly get out of hand. I can safely assume that if you’ve made it this far in the article you’ve already experienced enough strife. You get my point.
In walks https://www.npmjs.com/package/react-native-rename to save the day. With one command, this package will sweep through your iOS and Android directories performing most of these changes for you! It makes it effortless to rename your React Native project.
The first step is to add the package globally:
yarn global add react-native-rename or
npm install react-native-rename -g
This makes sure that it’s available for use no matter which project you need to rename. Due to the nature of its utility, there’s no need to install this as a dependency of any particular project.
Next, switch to a new branch in case anything goes awry:
git checkout -b rename-app
You can of course merge this branch back into the main stream once you verify everything works.
Lastly, run the react-native-rename command to set the rename in motion. For example if your want to rename your project “JS Tuts” and your bundle ID is “io.neroscript.jstuts” you’d execute:
react-native-rename "JS Tuts" -b io.neroscript.jstuts
It provides feedback on all of the items it could or couldn’t change.
Note that the bundleID will change automatically for Android, but for iOS you’ll have to update it manually in Xcode.