Change App Name In React Native

Question

I'm trying to figure out how to change a ReactNative app name. The installed APK on my device is simply "App", with the Android icon. How can I change this?

I've tried changing package.json and re-running react-native upgrade but it didn't update AndroidManifest.xml

Answer 1

The generator does not override the strings.xml file located in android/app/src/main/res/values/, so you have to change the app_name variable manually

Answer 2

Try react-native-rename this npm package will ease the process

This package assumes that you created your react-native project 
using react-native init.

Note: This package does not attempt to properly rename build artifacts such as ios/build or Cocoa Pod installation targets. After renaming your project you should clean, build, and reinstall third party dependencies to get it running properly with the new name.

// in project directory

   npx react-native-rename <newName>

Answer 3

For Android

Modify displayName in app.json file

Modify app_name in android/app/src/main/res/values/strings.xml

then Run these commands one by one

cd android
./gradlew clean
cd ..
react-native run-android

For iOS

Modify Display Name in Project target (General Tab)

Select your application project as Host Application in Project target for testing (General Tab)

Answer 4

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.

Answer 5

First of all: Open app.json file in your react-native project directory. And, just replace displayName json property's value in this file. e.g.:

{
    "name": "SomethingSomething",
    "displayName": "My New App Name"
}

For Android app: Open strings.xml file, replace the <string name="app_name"> tag's value to your new app name. e.g.:

<string name="app_name">My New App Name</string>

For iOS: Open info.plist, replace the value after <key>CFBundleDisplayName</key> to your app name. e.g.:

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

Uninstall your previous app installed on your device. Use npm install in project main directory, in ios folder directory run pod install commands. Now, simply install app in your device.

Answer 6

I find that, 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.

Answer 7

If you are asking only for Android here is solution

Modify displayName in /app.json file

Modify app_name in android/app/src/main/res/values/strings.xml

then Run these commands one by one

cd android
gradlew clean
cd ..
react-native run-android

Answer 8

If you don't have any thing precious in your android folder, you can delete the folder then run react-native upgrade then react-native android. These will recreate AndroidManifest.xml along with necessary files and folders. (Tried on 0.18 in Windows 10)

Answer 9

for android android/app/src/main/res/values/strings.xml My Android App

for ios Just open it in xCode select project tab general just rename it.

Answer 10

simply change <string name="app_name"> 'NEW_APP_NAME' </string> located in

[project_dir]/android/app/src/main/res/values/strings.xml

NOTE: recommended

react-native-rename

by Paul Nyondo maybe affect MainApplication.java file, DON'T USE IT!

Answer 11

You can try this

1. Update displayName in app.json to the new name
2. Delete ios/ and android/ directories
3. Run react-native eject
4. Run react-native link

Answer 12

before changing the app name get your code's backup and then , Go to following path in and replace your app name with new app name and change i one more file app.json E:***\android\app\src\main\res\values\strings.xml

<resources>
    <string name="app_name">New Name</string>
</resources>

app.json

{
  "name": "oldName",
  "displayName": "New Name"
}

Answer 13

Simply way

PROJECT >android > app > main > res > style

Then change the app name

Answer 14

first of all create a whole backup of the project including node modules (in order to restore icons/phots ..etc in the future)

1. Update name and displayName in app.json to the new name
2. rename app folder the same as app name
3. Delete ios/ and android/ directories
4. delete ndoe modules
5. update name in package.json (you must use new name for import & require() in your code. eg : import {x} from 'NewAppName/src/api')
6. watchman watch-del-all
7. rm -rf /tmp/haste-map-react-native-packager-*
8. rm -rf /tmp/metro-bundler-cache-*
9. restart pc
10. sudo npm install
11. react-native eject
12. restore icons/images
13. react-native link
14. restart pc
15. run app caution : you may have to setup things manually. in my case SplashScreen

Answer 15

Changed my app name in android/app/src/main/res/values/strings.xml as:

<resources>
    <string name="app_name">My App</string>
</resources>

and re-run using npx react-native run-android

Answer 16

Working steps 2021.

• Delete /ios /android
• Change the app name to new name in /app.json and package.json
• Run npx react-native upgrade - this is important even if platform files are not generated.
• Create a separate directory and run npx react-native init NewProjectName there.
• Copy ios and android folders from generated project to the old project
• For IOS - Run pod install in /ios in old project and Run cd .. && npx react-native run-ios
• For Android - run npx react-native run-android