Renaming a React Native project?

Question

Are there instructions for what needs to be changed in order to rename a React Native project? I have an app called something along the lines of MyAppIOS and I want to rename it to simply MyApp (now that Android support is out)

Answer 1

The way I did this for android (hacky, but it works) is just changed the string app_name field in

android/app/src/main/res/values/strings.xml

It will change the name of your installed android app to whatever you put as the value.

Answer 2

You can change the name attribute in package.json, run react-native upgrade, and just let react overwrite the android/ios files. Don't overwrite your index files if there is unsaved code, however.

Then change your Appregistry line from

AppRegistry.registerComponent('MyAppIOS', () => MyAppIOS);

To:

AppRegistry.registerComponent('MyApp', () => MyApp);

Answer 3

What simply works for me several times is instructed below;

• First copy the directory which your to-be-name-changed application exists. And go to your newly cloned directory.
• Change the name at index.ios/android.js file which is given as a parameter to AppRegistry.
• Change the name and version accordingly on package.json
• delete /ios and /android folders which are remaining from your older app as well as the app.json file if you have.
• run $react-native upgrade to generate /ios and /android folders again.
• run $react-native link for any external dependency.
• finally run $react-native run-ios or anything you want.

Answer 4

For iOS, the way to change xcodeproj settings is also available.

Show <your app name> -> Info.plist and add Bundle display name.

changing iOS app name:

Answer 5

I am probably a bit late, but for the people looking for a solid solution, there is a react-native-rename npm package which can do the magic.

Answer 6

1. Update displayName in app.json to the new name
2. Delete ios/ and android/ directories in root project

3. At command line Run:

   react-native eject
   react-native link 
   

Answer 7

You might also want to check out npm package (react-native-rename):

Usage:

react-native-rename < newName >

It works fine for my project.

Answer 8

You can use react-native-rename npm package.

npm install react-native-rename
react-native-rename [newName]

https://www.npmjs.com/package/react-native-rename

Answer 9

Try to use react-native-rename library from npm. Works like a charm

Answer 10

1. For IOS app, change in xcodeproj settings is also available.

Open Info.plist file from your project directory/ios/{appname} directory and change Bundle display name.

<key>CFBundleDisplayName</key>
<string>NEW APP NAME</string>

2. For android app, you can change in android folder of your project directory.

   cd android/app/src/main/res/values/

open strings.xml file and change you app name in

 <string name="app_name">NEW APP NAME</string>

Answer 11

As mentioned here (https://github.com/facebook/react-native/issues/4227), you don't need to add a Bundle display name key, as said by @janus_wel.

You can simply update Bundle name from $(PRODUCT_NAME) to My App.

Answer 12

In-Case None of solution worked for you or trying something broke your app. This is going to basics.

1. Init a new react-native project with whatever name you want to change your app to.
2. Copy Dependency list from your previous project to new one's package.json
3. Copy old project files, make sure of keeping the same structure.
4. Run npm install
5. Run react-native run-android

This should get you back on track

Answer 13

• First of all copy the address which your want to-be-name-changed application exists. And go to your newly cloned directory.

• Replace the name at the index.ios/android.js file which is given as a parameter to AppRegistry.

• update the name and version accordingly on package.json remove /ios and /android folders which are remaining from your older app and from the

• run $react-native upgrade to generate /ios and /android folders again. and run $react-native link for any external dependency.

• finally, run $react-native run-ios or else.

Answer 14

Solution worked for me is first change the name of the folder of your react-native project then

npm install react-native-rename

react-native-rename newName

It works for me

Answer 15

Rename react-native app with just one command react-native-rename

Installation

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

Usage run the below command in the project's directory.

react-native-rename <newName>

Example:

react-native-rename "Travel App"

Answer 16

The following steps must be followed while renaming Project/app in react Native 1. create a new folder test

2. Copy and paste all files from demo to test folder

3. Change the name in package.json file

4. Change the name in package-lock.json file

5. Change the name in App.json file

6. Delete /ios and /android folders

7. Run react-native eject command to create /ios and /android folders again

8. run react-native link for any external dependency.

9. finally run your app by using react-native run-android command.

Form more information visit https://youtu.be/_lgH9LXf818