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

Doorframe

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

Oech

Also make sure that the getMainComponentName() in your MainActivity returns your react native app name. i.e. name in app.json – Mangle

what about IOS ? – Enfilade

react-native-rename is apparently unmaintained and unuseable at this point. – Alb

What about iOS ? – Decare

to change react-native IOS App display name you can change 'Bundle display name' property from info.plist – Delicatessen

Thanks @JohnMuraguri. That was needed. The MainActivity.java file is found in android\app\src\main\java\com[your folder name\ – Empiricism

Answer 2

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)

Graviton

its not showing my display name in Host Application drop down – Wanitawanneeickel

displayName is corresponding to key name in app.json – Woolcott

As per https://mcmap.net/q/142228/-change-app-name-in-react-native, you need to put   instead of spaces in the Info.plist file. – Extravasation

Answer 3

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>

Refrigerate

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Openhanded

issue addressed – Refrigerate

The command should be react-native-rename. I couldn't edit because edits have to be > 6 characters :( – Malposition

Rename command says-"Directory should be created using react-native init"! – Psychotechnology

Adding anything globally with yarn is a poor practice. I would advise against it. As noted in their doc "For the vast majority of packages it is considered a bad practice to have global dependencies because they are implicit." – Carrick

@MikeS. this is not a bad practice since it is NOT a project dependency but a tool, and having them as project dependencies is indeed a bad practice. Is like CRNA, you should have it as a global tool – Around

i have some issue with a package name ! i'm using firebase in my app and say > Execution failed for task ':app:processDebugGoogleServices'. > No matching client found for package name 'com.myapp' – Synergy

WARNING: Do not use this library. it will ruine your project. Never use this. – Halstead

This package is DOPE. Saved my bacon – Molest

DO NOT USE. As of this writing, this package is deprecated / unmaintained and will make your project unusable. – Rudder

It is not a project dependency and worked fine for me anyway. I will update my feedback in case it causes any issue – Rubyeruch

@Rudder did it caused any problem yet? It's working for me. – Wanitawanneeickel

I'm not sure if it's an issue with Persian names or it ignores spaces in the name in general. Any way, it did not handle sth like "اسم اپ" very well. – Hylozoism

This package works wonders. Note that if you have already manually renamed certain parts of your project before running the react-native-rename command, it will not work and you'll have to revert those changes – Luiseluiza

Gosh an npm package just to rename an app name? – Commissioner

Answer 4

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.

Psychotechnology

If i want to change the Bundle Identifier? – Mustang

@OliverD For Android, change application ID in android/app/build.gradle file and for iOS, change the Bundle Identifier in iOS project. Don't forget to re-configure your third-party accounts in case of google sign in, facebook sign in etc. – Psychotechnology

If you want everything clean you need also to open xcode and rename your app from there. – Ike

This fixes the app name for iOS, thanks! But the Splash Screen still has the old app name. How do I update the app name on the Splash Screen? – Servomotor

Answer 5

UPDATE 2021

React native version: 0.64.0

Android

Find and open following files and change as required.
\android\app\src\main\res\values\strings.xml

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

app.json

{
  "name": "MyApp",
  "displayName": "My App"
}

iOS

Find and open the \ios\YourAppName\Info.plist and change as required.
NOTE: if your name has spaces use   instead of spaces.

<key>CFBundleDisplayName</key>
<string>My&#x2007;App</string>

Carabao

Fantastic! Thank you! – Break

You're a life-saver! It took a long time to find the trick with the spaces! – Extravasation

Answer 6

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.

Amianthus

I tried this method, but it didnt solve my problem. When app run in my mobile its says with an error "Application <prev appname> has not been registered" – India

Tried @KlaasNotFound method. Successfully got new build uprunning – India

I got same problem like @NIKHILCM with react-native 0.56 – Timi

Answer 7

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.

Regurgitation

Just a note: I think step #1 should be create a repo test branch first. – Carrick

As of today, there's a new npm package that alleges to minimize these issues, react-native-git-upgrade. But I can't get it to run using yarn. My project doesn't use npm, nor do I want to install it globally. So, trying to figure out my options. So far, react-native-git-upgrade fails from CLI – Carrick

thanks a lot for you steps I followed some and it worked – Balkanize

Also have to do a debug keystore https://mcmap.net/q/144426/-react-native-task-app-validatesigningdebug-failed – Fugger

react-native upgrade does not generate platform subfolders anymore. – Teshatesla

This answer should no longer be valid since react-native upgrade does not create the subfolders anymore. I just followed these steps and now I'm left without these folders. – Triplane

Answer 8

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

Kesha

how come i cant run react-native eject and it says i name must be defined in the app.json but i have it? – Fondea

this will cause error: Invariant vilation: xxxAPP has not been registered. ( xxxAPP was the older app name) – Renny

If youre running on windows gradlew should be run using ./gradlew – Amando

@tesshsu Before install the APP with the new name, you should uninstall the previous APP. – Misstate

Answer 9

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)

Servomotor

Works on macOS Sierra as well. – Muldoon

Answer 10

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.

Monitory

Answer 11

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!

Narrow

Agreed, I had isntall react-native-rename and it does another problem in APP – Renny

Answer 12

Change the name at \android\app\src\main\res\values\strings.xml,  
app.jon, and ./android/app/src/main/java/MainActivity.java

    **strings.xml**
    <resources>
        <string name="app_name">NewAppName</string>
    </resources>
    
    **app.json**
    {
      "name": "NewAppName",
      "displayName": "NewAppName"
    }
    
    **MainActivity.java**
      @Override
      protected String getMainComponentName() {
        return "NewAppName";
      }

Then run these commands on terminal

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

Voltaic

Answer 13

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"
}

Resurrectionism

Answer 14

Change the app name in

• \android\app\src\main\res\values\strings.xml

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

-app.json

{
  "name": "MyApp",
  "displayName": "My App"
}

-package.json

 "name": "My App",

-also have to change return "appName" from android/app/src/main/java/com/companyName/appName/MainActivity.java

@Override
  protected String getMainComponentName() {
    return "My App"
  }

Dogwood

Answer 15

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

Emerson

eject seems not working if over React 0.6 upper, so the command show error: error Unrecognized command "eject". – Renny

Answer 16

Simply way

PROJECT >android > app > main > res > style

Then change the app name

Housebreaking

Answer 17

To change the name of the react-native Application

1 . Open ./android/app/src/main/java/[multiple folders]/MainActivity.java

 @Override
  protected String getMainComponentName() {
    return "NameOfTheApp";
  }

2. Open android/app/src/main/res/values/strings.xml

   NEW APP NAME

3. Change Name in App.json and package.json.

4.For clean android project run following command

cd android &&./gradlew clean

Fauman

After trying everything on the internet, this (step #1) was the thing that made everything work. – Bozo

Answer 18

Update 2023 (React Native Version > 0.69)

The accepted answer works fine. However, there is a problem: all the built files are still based on the old name, which will cause unpredicted issues. So my suggestion is to delete ios and android folders and regenerate them. Here are the steps to do so:

1. delete ios and android folders from the root directory

sudo rm -rf android/ ios/ (on Windows delete manually)

2. add react native eject package

yarn add react-native-eject

3. change the name of app in package.json and app.json to your desired new name

4. regenrate ios and android folders

npx react-native eject

5. link installed modules in ios

cd ios && pod install

6. create a new android build (root directory)

react-native run-android

7. create a new ios build (root directory)

react-native run-ios

NOTE: By following this approach you will lose icons and fonts that are already added to your project! However, in my opinion it totally worth it, because you solve this issue once and for all.

Discoid

Worked for me building for Android. In step 3 I also updated package-lock.json. I didn’t need step 5 but please could you clarify what this involves in case I need to build for iOS? – Orphism

Some libraries rely on native code, in that case you'll have to add these files to your app, otherwise the app will throw an error as soon as you try to use the library. "pod install" makes sure these native modules are linked to your react-native app. – Discoid

Oh I see now what you meant. There needs to be a semi colon after cd ios; I thought you meant to cd into three directories and do something, but now I see that pod install is the second command. Would be better to have the two commands on two separate lines perhaps. – Orphism

It works perfectly. A very safe way to do it. – Threadbare

Answer 19

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

Axiomatic

very complicated not simple – Cirillo

Answer 20

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

Macleod

Answer 21

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

And then run this command in android of root directory.

• Mac

  .\gradlew clean

• Window

  gradlew clean

and run in root direcoty > npm run android

Tatary

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Inutility

Answer 22

Just adding to Chhay Rith Hy answer

If you are using Windows, you should use backslash or else you'll get an error "'.' is not recognized as internal or external command(...)"

So, instead of doing:

./gradlew clean

You should do:

.\gradlew clean

Haswell

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Apterygial