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)
15 Answers
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);
-
1I also had to rename the main class correspondingly: class MyApp extends Component { .... etc. Feb 3, 2016 at 16:11
-
4this 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*
Oct 7, 2016 at 2:19 -
7I think that
react-native upgrade
will upgrade your react-native too, be careful because this could broken something with your dependencies. Nov 26, 2016 at 20:29 -
1We found a number of additional steps scattered around the web - posted a complete list (and accepting pull requests!) at: github.com/2MR/renaming-a-react-native-project Aug 18, 2017 at 14:40
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.
-
3Most should pick up on this but just FYI this answer is for ANDROID ONLY. Jun 19, 2017 at 17:11
-
1for both iOS and Android follow this answer: stackoverflow.com/a/68641035/6363952 Aug 3, 2021 at 18:25
-
This actually changes the display name not the name of the project. BTW for ios, to change the display name, goto info.plist file and change the value of CFBundleDisplayName key to your desired value. Nov 9, 2022 at 5:48
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 toAppRegistry
. - Change the name and version accordingly on
package.json
- delete
/ios
and/android
folders which are remaining from your older app as well as theapp.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.
-
1Newer versions of react native have you also change the values in app.json if I remember correctly. Mar 31, 2017 at 19:34
-
4Yes, it seems that after 0.41 react-native offer an official way to re-generate native folders
/ios
and/android
. For more one could checkreact-native eject
Apr 4, 2017 at 6:34 -
-
react-native upgrade
will actually upgrade your react-native version as well. keep that thing in mind– AbdullahSep 20, 2022 at 17:13
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:
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.
-
1Do not use this package. See the many other warning comments in this thread.– Mike S.Oct 2, 2021 at 21:04
- 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
-
2This is an expo-specific answer. It doesn't apply to standard CRNA or
react-native init
workflows.– Mike S.Oct 2, 2021 at 21:03
- 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>
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
.
-
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)
Sep 22, 2016 at 21:29
You might also want to check out npm package (react-native-rename):
Usage:
react-native-rename < newName >
It works fine for my project.
-
In my app, this command deletes my java files under android/app/src/main/java/com/appname!– JohncyOct 9, 2018 at 7:32
-
2WARNING: Do not use this library. it will ruine your project. Never use this. Apr 17, 2019 at 10:56
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"
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
If you are using vs code, then it is much easier and works really fine.
1)Open your project in vs code, goto search tab.There are two text inputs, first takes the input which you want to search in all the files in your project (some files and directories are excluded and you can manage them in settings, but that is not needed). The other text input takes the input with which you want to replace the first input in all the files (in simple words, change all occurences).
In the first input field, search for
com.<your_package_name>
. This is the older name of your project (current name of project which you want to change).In the second input field, enter
com.<new_package_name>
and press the replace button (small icon button on the right side of 2nd input field). It will replace all the occurences of the older package name thus renaming the project.
{Repeat the above two steps with <your_package_name> only too}
Now goto
android>app>src>main>java>com>older_package_name
.Rename theolder_package_name
to the new package name and you are done.cd android && ./gradlew clean && cd ..
.And you are done. Run
npx react-native run-android
to test the app.
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.
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
The easiest way for android application is to navigate to /android/app/src/main/res/values You will see file strings.xml
Inside the file you would see.
<resources>
<string name="app_name">{YOUR NEW NAME}</string>
</resources>