Renaming a React Native project?
React NativeReact Native Problem Overview
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)
React Native Solutions
Solution 1 - React Native
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);
Solution 2 - React Native
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.
Solution 3 - React Native
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.
Solution 4 - React Native
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:
Solution 5 - React Native
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.
Solution 6 - React Native
-
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
Solution 7 - React Native
You might also want to check out npm package (react-native-rename):
> Usage: > react-native-rename < newName >
It works fine for my project.
Solution 8 - React Native
- 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>
Solution 9 - React Native
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
.
Solution 10 - React Native
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
Solution 11 - React Native
-
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.
Solution 12 - React Native
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"
Solution 13 - React Native
The following steps must be followed while renaming Project/app in react Native
-
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