Hello everyone, Welcome to this new article, where we are going to explore how to rename your react native app after you start with a boilerplate or a testing project.

A lot of us have faces this small but really important issue of starting a project through a github repository or from scratch just playing around, then deciding to publish that project.

Besides React Native, this is a real problem itself if you are working with Xcode or android studio, because you will have to manage the paths and hell of other things.

Let’s Get Started

To rename a react native app, we are going to use an React native-rename package Which will handle all the process for us with a single command.

Install React Native Rename globally

yarn global add react-native-rename
or using NPM
npm install react-native-rename -g

Then you can simply use the command 

react-native-rename <<newName>>

And if you want to change the Bundle Identifier

react-native-rename <<newName>> -b <<bundleIdentifier>>

Notice: This will only work for Android, to change the Bundle Identifier on an IOS project, you will have to use Xcode.

Example

react-native-rename "Weather App"

And with the Bundle identifier

react-native-rename "Weather App" -b "com.reactnativemaster.weatherapp"

react-native-rename

Notice: This package will not attempt to properly rename build artifacts such as ios/build or Cocoa Pod installation targets. After re-naming your project you probably should clean, then build, and reinstall your dependencies to get it running properly with the your new name.

Another Method For Expo Projects

The Library React Native Rename works mostly on React Native CLI projects and have problems with expo projects.

To rename you expo react native app, you can follow the instructions below

  1. Copy your icons from iOS and Android
  2. Update displayName in app.json to the new name
  3. Delete ios/ and android/ directories
  4. Run react-native eject
  5. Replace the icons you copied earlier
  6. Run react-native link

There you have it, now you can rename your react native project simply in few lines of code.

I hope you find it as informative as you have expected.

Feel free to share it with your friends, and comment out your questions and concerns.

Stay safe, and Happy coding