How to rename your React Native project

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:

  • .xcodeproj or .xcworkspace file
  • schemas
  • test schemas
  • AppDelegate.m module name
  • more configurations in Xcode
VS Code screen capture highlighting "AwesomeApp" naming set by npm react-native init (iOS)

Then there’s the Android side of the house:

  • gradle settings
  • applicationId
  • package name
  • main component name
  • and more…
VS Code screen capture highlighting "AwesomeApp" naming set by npm react-native init (Android)

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.

React-native-rename

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.

Make sure you select the correct target, then the “General” header to find and update your Bundle Identifier

One thought on “How to rename your React Native project

Leave a Reply

Your email address will not be published. Required fields are marked *