181

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

Improve this question
0

25 Answers 25

Reset to default
250

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Also make sure that the getMainComponentName() in your MainActivity returns your react native app name. i.e. name in app.json
what about IOS ?
react-native-rename is apparently unmaintained and unuseable at this point.
What about iOS ?
to change react-native IOS App display name you can change 'Bundle display name' property from info.plist
|
123

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)enter image description here

Improve this answer

3 Comments

its not showing my display name in Host Application drop down
displayName is corresponding to key name in app.json
As per stackoverflow.com/a/68641035/9383288, you need to put   instead of spaces in the Info.plist file.
75

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>
Improve this answer

15 Comments

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
issue addressed
@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
WARNING: Do not use this library. it will ruine your project. Never use this.
DO NOT USE. As of this writing, this package is deprecated / unmaintained and will make your project unusable.
|
69

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.

Improve this answer

4 Comments

If i want to change the Bundle Identifier?
@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.
If you want everything clean you need also to open xcode and rename your app from there.
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?
49

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 &#x2007; instead of spaces.

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

1 Comment

You're a life-saver! It took a long time to find the trick with the spaces!
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.

Improve this answer

3 Comments

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"
Tried @KlaasNotFound method. Successfully got new build uprunning
I got same problem like @NIKHILCM with react-native 0.56
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.

Improve this answer

6 Comments

Just a note: I think step #1 should be create a repo test branch first.
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
thanks a lot for you steps I followed some and it worked
Also have to do a debug keystore stackoverflow.com/a/57438549/5900793
react-native upgrade does not generate platform subfolders anymore.
|
14

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
Improve this answer

4 Comments

how come i cant run react-native eject and it says i name must be defined in the app.json but i have it?
this will cause error: Invariant vilation: xxxAPP has not been registered. ( xxxAPP was the older app name)
If youre running on windows gradlew should be run using ./gradlew
@tesshsu Before install the APP with the new name, you should uninstall the previous APP.
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)

Improve this answer

1 Comment

Works on macOS Sierra as well.
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.

Improve this answer

Comments

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!

Improve this answer

1 Comment

Agreed, I had isntall react-native-rename and it does another problem in APP
5 
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
Improve this answer

Comments

3

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" }
Improve this answer

Comments

3

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" }
Improve this answer

Comments

2

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
Improve this answer

1 Comment

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

Simply way

PROJECT >android > app > main > res > style

Then change the app name

Improve this answer

Comments

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

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

    NEW APP NAME

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

4.For clean android project run following command

cd android &&./gradlew clean

Improve this answer

1 Comment

After trying everything on the internet, this (step #1) was the thing that made everything work.
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:

  1. delete ios and android folders from the root directory

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

  1. add react native eject package

yarn add react-native-eject

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

  2. regenrate ios and android folders

npx react-native eject

  1. link installed modules in ios

cd ios && pod install

  1. create a new android build (root directory)

react-native run-android

  1. 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.

Improve this answer

4 Comments

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?
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.
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.
It works perfectly. A very safe way to do it.
1

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
Improve this answer

1 Comment

very complicated not simple
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

Improve this answer

Comments

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

Improve this answer

1 Comment

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.
1

Common changes:

package.json

"name": "My App"

app.json

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

iOS

Info.plist

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

and AppDelagate.mm

self.moduleName = @"My App";

Android

MainActivity.kt getMainComponentName(): String = @""

app/src/main/res/values/strings.xml name="app_name"

settings.gradle rootProject.name = "My App"

Improve this answer

Comments

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

Improve this answer

1 Comment

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.
0

There are 7 different files the project/packagename is written at the begining

If you edit all files it will be installed as new application.

  • android/app/build.gradle applicationId:

  • app.json name and displayName

  • package.json name

  • package-lock.json name

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

  • android\app\src\main\java\com\ project name

  • in MainActivty.kt and MainApplication.kt (or java files) you will see "package projectname" and at override fun getMainComponentName(): String : projectname

    Then cd android &&./gradlew clean
Improve this answer

Comments

0

After a long research i fixed it on IOS: My project name was called restoReel but wanted to rename it to RestoReel

Steps you need to take:

1: change name in app.json

// old { "name": "restoReel", "displayName": "restoReel" } // new "name": "RestoReel", "displayName": "RestoReel" } 
2: inside ios folder PodFile => ios/Podfile // old code target 'restoReel' do // new code target 'RestoReel' do 
3: inside package.json //old code "name": "restoReel", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, // new code "name": "RestoReel", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, 
4: inside info.plist // old code <key>CFBundleDisplayName</key> <string>restoReel</string> // new code <key>CFBundleDisplayName</key> <string>RestoReel</string> 
5: inside AppDelegate.swift //old code factory.startReactNative( withModuleName: "restoReel", // r small letter in: window, launchOptions: launchOptions ) // new code factory.startReactNative( withModuleName: "RestoReel", // now R capital letter in: window, launchOptions: launchOptions )

6: Change folders name with your new name, e.g. screenshots.

6.1: Inside xcode go to top product -> schema -> manage schema and change the value that is selected in below screen shot

enter image description here

6.2: Change folders name in xcode highlighted with the red color

enter image description here

*Final and main Note

change every folder name that is old in your project inside IOS folder then uninstall node modules and then cd ios inside ios directory run below

pod deintegrate pod install

delete drived data and clean build

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.