Change App Name In React Native

React Native Problem Overview

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

React Native Solutions

Solution 1 - React Native

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

Solution 2 - React Native

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)

Solution 3 - React Native

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>

Solution 4 - React Native

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.

Solution 5 - React Native

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.

Solution 6 - React Native

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>

Solution 7 - React Native

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.

Solution 8 - React Native

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

Solution 9 - React Native

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)

Solution 10 - React Native

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.

Solution 11 - React Native

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!

Solution 12 - React Native

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

Solution 13 - React Native

Simply way

PROJECT >android > app > main > res > style

Then change the app name

Solution 14 - React Native

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

Solution 15 - React Native

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

Solution 16 - React Native

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

Solution 17 - React Native

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

<String name="app_name">NEW APP NAME</String>

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

4.For clean android project run following command

cd android &&./gradlew clean

Content Type	Original Author	Original Content on Stackoverflow
Question	Overload119	View Question on Stackoverflow
Solution 1 - React Native	diedu	View Answer on Stackoverflow
Solution 2 - React Native	Chhay Rith Hy	View Answer on Stackoverflow
Solution 3 - React Native	Paul Nyondo	View Answer on Stackoverflow
Solution 4 - React Native	Rahul Rastogi	View Answer on Stackoverflow
Solution 5 - React Native	Steve Phuc	View Answer on Stackoverflow
Solution 6 - React Native	Charitha Goonewardena	View Answer on Stackoverflow
Solution 7 - React Native	KlaasNotFound	View Answer on Stackoverflow
Solution 8 - React Native	Salman Saleem	View Answer on Stackoverflow
Solution 9 - React Native	Green	View Answer on Stackoverflow
Solution 10 - React Native	Biswajit	View Answer on Stackoverflow
Solution 11 - React Native	saeed eivazi	View Answer on Stackoverflow
Solution 12 - React Native	Sarath Ak	View Answer on Stackoverflow
Solution 13 - React Native	Chaurasia	View Answer on Stackoverflow
Solution 14 - React Native	gauravsbagul	View Answer on Stackoverflow
Solution 15 - React Native	Hussain Abu Alamal	View Answer on Stackoverflow
Solution 16 - React Native	kalyan	View Answer on Stackoverflow
Solution 17 - React Native	Ganesh Moorthy A	View Answer on Stackoverflow