Introduction

In React Native, the display name shown under the app icon is a native-platform setting, not just a JavaScript one. That means changing it usually requires updating the iOS app metadata and the Android app label, then rebuilding the app so the launcher reads the new value.

Understand Which Name You Are Changing

React Native projects often have several different names:

• the JavaScript app registration name
• the package or bundle identifier
• the display name shown on the device home screen

These are related, but they are not the same field. The launcher label is what most people mean by "display name", and that lives in the native project files.

Change the iOS Display Name

On iOS, the visible app name usually comes from CFBundleDisplayName or the app target settings in Xcode.

One direct way is to edit:

ios/YourApp/Info.plist

and set:

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

If that key is missing, iOS may fall back to CFBundleName.

After the change, rebuild the app from Xcode or the CLI so the simulator or device picks up the updated metadata.

Change the Android Display Name

On Android, the launcher label usually comes from the app name string resource rather than a hard-coded manifest value.

A common place to update is:

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

with:

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

Then check AndroidManifest.xml to make sure the application label points at that string:

<application
    android:label="@string/app_name"
    ... />

That keeps the visible Android name centralized and easier to localize later.

Rebuild After the Change

Changing these files is not enough by itself. You need a rebuild so the new native resources are packaged into the app.

For Android:

npx react-native run-android

For iOS:

npx react-native run-ios

If the old name still appears, clean the build artifacts or uninstall the old app from the simulator or device before reinstalling.

App Registration Name Is a Different Setting

React Native also has a JavaScript app registration name in files such as:

AppRegistry.registerComponent(appName, () => App);

or a related project config value. Changing that is not usually how you change the launcher name. It affects how React Native boots the JS app, not what the home screen icon label says.

This distinction matters because many developers update the JavaScript name and then wonder why the visible device name did not change.

Think About Localization

If the app supports multiple languages, do not stop at a single hard-coded display name. The platform-specific localization systems are the right place to provide translated launcher names.

That is another reason the change belongs in the native project files rather than only in JavaScript.

Common Pitfalls

• Changing only the JavaScript registration name and expecting the device launcher label to change.
• Updating Android strings.xml but leaving the manifest label hard-coded somewhere else.
• Editing iOS metadata and forgetting to rebuild or reinstall the app.
• Confusing display name changes with package name or bundle identifier changes.
• Hard-coding the visible app name in one language when the app should really use native localization files.

Summary

• In React Native, the home-screen display name is controlled by native iOS and Android metadata.
• On iOS, update CFBundleDisplayName or the corresponding target setting.
• On Android, update the app name string and make sure the manifest label references it.
• Rebuild the app after making the native changes.
• Do not confuse the visible display name with the JavaScript app registration name or the bundle identifier.