How can I change the project and app name of ReactNative project with react-native 0.60

Question

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.

Answer 1

If you're using the Expo Bare Workflow, and you want to change the app display name without changing the project or package name, you'll need to modify the native Android and iOS configurations directly in their respective native files.

TLDR
iOS: Modify CFBundleDisplayName in Info.plist
Android: Modify android:label in AndroidManifest.xml

---

1. iOS:
   In the Expo Bare Workflow, you can directly modify the iOS project settings in the Info.plist file.

   • Navigate to your iOS project folder: ios/<your-project-name>/Info.plist
   • Look for the key CFBundleDisplayName in the Info.plist file. If it's not there, add it:

   <key>CFBundleDisplayName</key>
   <string>Your New App Name</string>
   

   This change will update the app's display name as it appears on users' iOS devices.

2. Android:
   For Android, you need to modify the android:label attribute in the AndroidManifest.xml file.

   • Navigate to your Android project folder: android/app/src/main/AndroidManifest.xml
   • Find or add the android:label attribute inside the <application> tag:

   <application
     android:name=".MainApplication"
     android:label="Your New App Name"
     android:icon="@mipmap/ic_launcher">
     <!-- other configurations -->
   </application>
   

   This will change the name that appears under the app icon on Android devices.

These changes will not affect your project or package names and will only modify the display name that users see under the app icon. After making these changes, just rebuild your project.

Answer 2

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

Answer 3

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

string name="app_name">APP_NAME</string

Answer 4

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