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

score 235 · Accepted Answer · edited Jan 13 '20 at 15:09

235

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

edited Jan 13 '20 at 15:09

Mufaddal Hamid

281
3
12

answered Jan 14 '16 at 19:43

diedu

19,277
4
32
49

8

Also make sure that the getMainComponentName() in your MainActivity returns your react native app name. i.e. name in app.json – John Muraguri Mar 25 '19 at 11:15
10

what about IOS ? – Abd Rmdn May 27 '19 at 13:48
3

react-native-rename is apparently [unmaintained and unuseable at this point.](https://github.com/junedomingo/react-native-rename/issues/76) – rt_ Jun 20 '19 at 17:55
1

What about iOS ? – Muhammad Ashfaq Aug 21 '19 at 05:58
12

to change react-native IOS App display name you can change 'Bundle display name' property from info.plist – Hassan Raza Dec 19 '19 at 08:43
Thanks @JohnMuraguri. That was needed. The MainActivity.java file is found in android\app\src\main\java\com\[your folder name\ – trevorhpittman Jun 25 '22 at 18:28

score 115 · Answer 2 · answered Nov 13 '19 at 01:58

115

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)

answered Nov 13 '19 at 01:58

Chhay Rith Hy

1,359
1
7
4

1

its not showing my `display name` in Host Application drop down – Zeeshan Ahmad Khalil Mar 18 '21 at 07:07
2

`displayName` is corresponding to key `name` in `app.json` – GuillaumeRZ Aug 02 '21 at 07:54

Paul Nyondo · Answer 3 · 2020-12-16T07:31:18.860

72

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>

edited Dec 16 '20 at 07:31

answered Jun 22 '17 at 11:12

Paul Nyondo

2,126
2
23
30

7

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](/review/low-quality-posts/16498360) – m_callens Jun 22 '17 at 13:38
2

issue addressed – Paul Nyondo Jun 22 '17 at 15:30
The command should be `react-native-rename`. I couldn't edit because edits have to be > 6 characters :( – mchandleraz Sep 22 '17 at 20:09
Rename command says-"Directory should be created using react-native init"! – Rahul Rastogi Oct 24 '17 at 06:45
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." – Mike S. Jun 13 '18 at 18:40
2

@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 – Gustavo Topete Jul 24 '18 at 18:43
1

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' – DevAS Mar 23 '19 at 01:47
36

WARNING: Do not use this library. it will ruine your project. Never use this. – M.R.Safari Apr 17 '19 at 10:56
This package is DOPE. Saved my bacon – bobber205 Apr 29 '19 at 22:21
42

DO NOT USE. As of this writing, this package is deprecated / unmaintained and will make your project unusable. – SQueryL May 12 '19 at 13:16
It is not a project dependency and worked fine for me anyway. I will update my feedback in case it causes any issue – cherucole Jul 20 '20 at 12:17
@SQueryL did it caused any problem yet? It's working for me. – Zeeshan Ahmad Khalil Feb 09 '21 at 11:52
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. – Amin Dannak Feb 20 '21 at 06:29
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 – wisenickel Feb 24 '22 at 01:44
1

Gosh an npm package just to rename an app name? – user5305519 May 15 '22 at 08:57

score 58 · Answer 4 · answered Jun 18 '20 at 11:06

58

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.

answered Jun 18 '20 at 11:06

Rahul Rastogi

4,486
5
32
51

If i want to change the Bundle Identifier? – Oliver D Oct 12 '20 at 16:35
@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. – Rahul Rastogi Oct 14 '20 at 08:54
1

If you want everything clean you need also to open xcode and rename your app from there. – Oussama Bouthouri Feb 24 '21 at 04:39
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? – Green Jan 20 '23 at 00:36

score 40 · Answer 5 · answered Aug 03 '21 at 18:20

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>

score 36 · Answer 6 · edited Sep 20 '21 at 01:30

36

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.

edited Sep 20 '21 at 01:30

Eduardo Cuomo

17,828
6
117
94

answered Sep 08 '16 at 02:42

Steve Phuc

1,168
2
11
12

2

I tried this method, but it didnt solve my problem. When app run in my mobile its says with an error "Application has not been registered" – NIKHIL C M Nov 07 '18 at 07:08
1

Tried @KlaasNotFound method. Successfully got new build uprunning – NIKHIL C M Nov 07 '18 at 07:17
I got same problem like @NIKHILCM with react-native 0.56 – Marecky Dec 03 '18 at 22:22

score 17 · Answer 7 · answered Jun 22 '17 at 10:32

17

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.

answered Jun 22 '17 at 10:32

KlaasNotFound

1,035
10
15

10

Just a note: I think step #1 should be `create a repo test branch first`. – Mike S. Jun 13 '18 at 14:54
1

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 – Mike S. Jun 13 '18 at 17:12
1

thanks a lot for you steps I followed some and it worked – Greco Jonathan Mar 04 '19 at 16:35
1

Also have to do a debug keystore https://stackoverflow.com/a/57438549/5900793 – Steffo Dimfelt Oct 27 '19 at 07:00
5

`react-native upgrade` does not generate platform subfolders anymore. – Dogu Deniz Ugur Jun 16 '20 at 11:15
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. – mikasa Apr 11 '22 at 03:44

score 13 · Answer 8 · edited Feb 21 '20 at 11:00

13

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

edited Feb 21 '20 at 11:00

Mufaddal Hamid

281
3
12

answered Dec 05 '18 at 13:14

Salman Saleem

223
2
9

how come i cant run react-native eject and it says i `name` must be defined in the `app.json` but i have it? – Mr-Programs Jan 08 '19 at 21:23
2

this will cause error: Invariant vilation: xxxAPP has not been registered. ( xxxAPP was the older app name) – tess hsu Dec 05 '19 at 10:37
If youre running on windows gradlew should be run using ./gradlew – Devorein Apr 20 '21 at 03:06
1

@tesshsu Before install the APP with the new name, you should uninstall the previous APP. – Eduardo Cuomo Sep 20 '21 at 11:31

score 11 · Answer 9 · answered Jan 21 '16 at 10:11

11

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)

answered Jan 21 '16 at 10:11

Green

4,950
3
27
34

Works on macOS Sierra as well. – Prashant Ghimire Jul 18 '17 at 05:04

score 8 · Answer 10 · answered Aug 30 '18 at 09:53

8

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.

answered Aug 30 '18 at 09:53

Biswajit

85
2
7

score 6 · Answer 11 · answered Jun 11 '19 at 10:19

6

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!

answered Jun 11 '19 at 10:19

saeed eivazi

818
1
7
14

Agreed, I had isntall react-native-rename and it does another problem in APP – tess hsu Dec 18 '19 at 14:52

Soumik Chakraborty · Answer 12 · 2022-09-13T09:50:30.727

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

score 3 · Answer 13 · answered Oct 17 '19 at 07:34

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

amboji alur · Answer 14 · 2022-09-08T14:34:14.757

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

score 2 · Answer 15 · answered Oct 09 '18 at 03:15

2

You can try this

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

answered Oct 09 '18 at 03:15

Sarath Ak

7,903
2
47
48

2

eject seems not working if over React 0.6 upper, so the command show error: error Unrecognized command "eject". – tess hsu Dec 05 '19 at 10:31

Chaurasia · Answer 16 · 2019-12-02T06:39:42.877

2

Simply way

PROJECT >android > app > main > res > style

Then change the app name

edited Dec 02 '19 at 06:39

answered Jul 07 '19 at 00:01

Chaurasia

494
1
6
22

score 2 · Answer 17 · answered Mar 24 '22 at 06:57

2

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

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

NEW APP NAME
Change Name in App.json and package.json.

4.For clean android project run following command

cd android &&./gradlew clean

answered Mar 24 '22 at 06:57

Ganesh Moorthy A

129
1
3

After trying everything on the internet, this (step #1) was the thing that made everything work. – Svetoslav Stefanov Mar 20 '23 at 09:31

Amin Jafarlou · Answer 18 · 2023-01-23T11:13:22.787

2

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:

delete ios and android folders from the root directory

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

add react native eject package

yarn add react-native-eject

change the name of app in package.json and app.json to your desired new name
regenrate ios and android folders

npx react-native eject

link installed modules in ios

cd ios && pod install

create a new android build (root directory)

react-native run-android

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.

edited Jan 23 '23 at 11:13

answered Jan 02 '23 at 10:37

Amin Jafarlou

336
1
10

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? – Will Jan 20 '23 at 07:38
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. – Amin Jafarlou Jan 21 '23 at 09:53
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. – Will Jan 22 '23 at 17:38
Fixed, thanks for mentioning – Amin Jafarlou Jan 23 '23 at 11:13
It works perfectly. A very safe way to do it. – iarroyo Mar 02 '23 at 11:49

score 1 · Answer 19 · answered Oct 06 '19 at 21:17

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

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

very complicated not simple – Arif Hidayat Apr 04 '20 at 13:44 — Arif Hidayat, Apr 04 '20 at 13:44

score 1 · Answer 20 · answered Jun 28 '21 at 21:25

1

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

answered Jun 28 '21 at 21:25

kalyan

135
1
4

score 1 · Answer 21 · answered Mar 21 '23 at 14:09

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

And then run this command in android of root directory.

Mac

.\gradlew clean
Window

gradlew clean

and run in root direcoty > npm run android

answered Mar 21 '23 at 14:09

HardCoding

51
3

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](/help/how-to-answer). – devpolo Mar 28 '23 at 16:52

Lima · Answer 22 · 2022-07-29T20:29:27.530

0

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

edited Jul 29 '22 at 20:29

answered Jul 26 '22 at 12:22

Lima

3
4

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](/help/how-to-answer). – Community Jul 28 '22 at 04:55

Change App Name In React Native

22 Answers22

Linked