3

It's simple issue but I don't know how to do it. I'm looking for some references, but there are problems.

  1. I'm using react-native : 0.60.5. Hence there is no eject method or command.
  2. The project was not created with expo.

  3. After I referenced How to Rename A React Native App and error Unrecognized command "eject", then I follow the process below.

    • change the app.json's name and diplayName field to name which I want to change
    • remove android/ and ios/ directory
    • use react-native upgrade --legacy true

But there is no change on the project name and app name.

Is there any way to change the project and app name? Thanks.

George Pamfilis
  • 1,397
  • 2
  • 19
  • 37
wallah
  • 1,964
  • 5
  • 27
  • 48
  • Did you check https://stackoverflow.com/questions/38580858/how-to-change-display-name-of-an-app-in-react-native – SDushan Dec 24 '19 at 05:56
  • @SDushan Yes. I already check it. As I know, that is about **changing the app name(display name)**. I want to change **project name** also. By the way, if I change the **app name** only, the name is also displayed on released app ?? – wallah Dec 24 '19 at 06:00

3 Answers3

3

Please check the below steps :

if you want to change both the app name and the package name (i.e. rename the entire app), the following steps are necessary:

  • Make sure you don't have anything precious (non-generated, manually copied resources) in the android/ and ios/ subfolders.

  • Delete both the android/ and ios/ folder.

  • Change the "name" entry in your package.json to the new name.

  • Change the app name in both your index.android.js and index.ios.js: AppRegistry.registerComponent('NewAppName', () => App);

  • Run react-native upgrade to re-generate the platform subfolders.

  • If you have linked resources (like custom fonts etc.) run react-native link.

  • If you have other generated resources (like app icons) run the scripts to generate them (e.g. yo).

  • Finally, uninstall the old app on each device and run the new one.

Hope it helps. feel free for doubts

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
  • 2
    thanks ! it was big help!. The only difference was that I used `react-native upgrade --legacy true`. And the process of setting android was hell... but I changed the project and app name successfully. Thanks! – wallah Dec 24 '19 at 08:56
  • 2
    running react-native upgrade doesn't create ios and android folders – glushkina1 Mar 29 '22 at 21:51
2

for android edit strings.xml file which located in res/values/

string name="app_name">APP_NAME</string
Wai Ha Lee
  • 8,598
  • 83
  • 57
  • 92
savan patel
  • 254
  • 1
  • 5
1

I had a very hard time with this and this is what I did - hopefully it helps someone. Literally took me 15 minutes

  1. https://www.npmjs.com/package/react-native-rename install react-native-rename and rename your app to whatever you need using the instructions provided for the package Important part would be to use this: npx react-native-rename "YourProjectName" -b com.yourporjectnamehere - because this is needed for android to work correctly
  2. find in your project every file and folder name that will contain your previous name - for me it was mostly in ios folder. I had to rename all the folders and some of the files inside. just replace the part with your previous name with your current name
  3. find all occurrences of your previous name left inside the project with the whole project search in your editor and replace them with the new name.

To make it work for ios

  1. Delete Pods inside the ios folder
  2. Delete node_modules
  3. go to ios folder with your terminal and do pod install
  4. do npm install in your original directory again
  5. make sure all the caches are deleted for your ios simulator with yarn start --reset-cache

To make it work for android

  1. Make sure that under android/app/src/com/yourprojectnamehere/ the folder contains MainApplication.java and MainActivity.java files and that the project name inside are updated
  2. ./gradlew clean inside android folder in terminal
  3. Delete node_modules
  4. npm install
  5. react-native run-android and everything should be working

I know its a lot of steps, but from what I have found renaming react native app is not actually as easy as you might have thought

Nata Vacheishvili
  • 387
  • 1
  • 5
  • 18