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)

denixtry · Answer 1 · 2016-01-30T06:40:13.453

91

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);

edited Jan 30 '16 at 06:40

answered Dec 13 '15 at 06:02

denixtry

2,787
22
19

1

I also had to rename the main class correspondingly: class MyApp extends Component { .... etc. – Per Quested Aronsson Feb 03 '16 at 16:11
4

this doesn't delete the old MyAppIOS files, so you'll also want to do: ```$ rm -rf android/app/src/main/java/com/myappios && rm -rf ios/MyAppIOS*``` – Neil Sarkar Oct 07 '16 at 02:19
6

I think that `react-native upgrade` will upgrade your react-native too, be careful because this could broken something with your dependencies. – Herlon Aguiar Nov 26 '16 at 20:29
1

We found a number of additional steps scattered around the web - posted a complete list (and accepting pull requests!) at: https://github.com/2MR/renaming-a-react-native-project – Freewalker Aug 18 '17 at 14:40

score 69 · Accepted Answer · answered Sep 29 '15 at 05:34

69

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.

answered Sep 29 '15 at 05:34

httpNick

2,440
1
21
34

2

Most should pick up on this but just FYI this answer is for _ANDROID ONLY_. – chapeljuice Jun 19 '17 at 17:11
for both iOS and Android follow this answer: https://stackoverflow.com/a/68641035/6363952 – Charitha Goonewardena Aug 03 '21 at 18:25

milkersarac · Answer 3 · 2017-06-09T23:37:55.980

44

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.

edited Jun 09 '17 at 23:37

answered Nov 22 '16 at 11:47

milkersarac

3,253
3
28
30

1

Newer versions of react native have you also change the values in app.json if I remember correctly. – Christopher Bradshaw Mar 31 '17 at 19:34
4

Yes, it seems that after 0.41 react-native offer an official way to re-generate native folders `/ios` and `/android`. For more one could check [`react-native eject`](https://gist.github.com/ndejesus1227/0eb673452c34e085b3f04fd5c1cbcc9f) – milkersarac Apr 04 '17 at 06:34
Good source: https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35 – gusgard May 31 '17 at 22:34

janus_wel · Answer 4 · 2016-06-24T07:51:17.067

27

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:

enter image description here

edited Jun 24 '16 at 07:51

answered Jun 22 '16 at 05:56

janus_wel

271
3
4

score 16 · Answer 5 · answered Mar 29 '17 at 17:22

16

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.

answered Mar 29 '17 at 17:22

Denys Mikhalenko

3,476
2
13
17

Do not use this package. See the many other warning comments in this thread. – Mike S. Oct 02 '21 at 21:04

score 8 · Answer 6 · edited Oct 17 '17 at 03:29

8

Update displayName in app.json to the new name
Delete ios/ and android/ directories in root project
At command line Run:
```
react-native eject
react-native link 
```

edited Oct 17 '17 at 03:29

Stephen Rauch

44,696
30
102
125

answered Oct 17 '17 at 03:12

Mohammadreza Zandi

179
2
4

1

This is an expo-specific answer. It doesn't apply to standard CRNA or `react-native init` workflows. – Mike S. Oct 02 '21 at 21:03

CTiPKA · Answer 7 · 2017-10-05T14:15:12.697

6

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

Usage:

react-native-rename < newName >

It works fine for my project.

edited Oct 05 '17 at 14:15

answered Oct 05 '17 at 12:14

CTiPKA

2,868
1
22
26

In my app, this command deletes my java files under android/app/src/main/java/com/appname! – Johncy Oct 09 '18 at 07:32
1

WARNING: Do not use this library. it will ruine your project. Never use this. – M.R.Safari Apr 17 '19 at 10:56

score 6 · Answer 8 · edited Oct 22 '19 at 09:02

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>

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>

score 4 · Answer 9 · answered Sep 07 '16 at 09:37

4

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.

answered Sep 07 '16 at 09:37

Shivek Khurana

1,810
1
19
16

This is the only solution that worked for me. I added a build setting called CUSTOM_DISPLAY_NAME (to support different app names for debug and release), then simply updated `Bundle name` to be `$(CUSTOM_DISPLAY_NAME)` – Kevin Cooper Sep 22 '16 at 21:29

score 2 · Answer 10 · answered Jan 09 '20 at 02:20

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

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

This should get you back on track

score 1 · Answer 11 · answered Sep 07 '18 at 11:27

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.

score 1 · Answer 12 · answered Apr 25 '20 at 00:06

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"

score 0 · Answer 13 · answered May 05 '20 at 13:25

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

Copy and paste all files from demo to test folder
Change the name in package.json file
Change the name in package-lock.json file
Change the name in App.json file
Delete /ios and /android folders
Run react-native eject command to create /ios and /android folders again
run react-native link for any external dependency.
finally run your app by using react-native run-android command.

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

Renaming a React Native project?

13 Answers13

Linked