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.
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, create a backup in case anything goes awry:
Lastly, run the react-native-rename command to set the rename in motion. For example if your want to rename your project “My New Project Name” and your bundle ID is “com.myorg.newproject” you’d execute:
react-native-rename "My New Project Name" -b com.myorg.newproject
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
and finally globally search in your editor like VSCode ‘APP_NAME’ and replace with ‘NEW_APP_NAME’ as per your understanding.
Top comments (2)
did not work, react-native-rename isn't good. Just legit put your name in your explore searchbar and rename stuff copy&paste, way faster and actually works
Carefully using react Native rename will save tons of time. Worked for me though, with search and replace usage additionally.