74

Apple have clear instructions on how to change the display name of an IOS app, but they are not useful for a react-native app because the folder structure is different. How do you change the display name if you have a react-native app?

Obromios
  • 15,408
  • 15
  • 72
  • 127

6 Answers6

188

iOS

Goto ios/<Appname>/Info.plist and edit the $(PRODUCT_NAME) to change the display name

<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>

Android

Goto android/app/src/main/res/values/strings.xml and edit the APP_NAME to change the name

<string name="app_name">APP_NAME</string>
sinisavukovic
  • 3
  • 4
Sriraman
  • 7,658
  • 4
  • 40
  • 60
  • 10
    Hi, In the Apple documentation I cited, it tells you to change the ```CFBundleDisplayName ```, whereas your instructions are changing the ```CFBundleName```. What is the difference between these? – Obromios Jul 27 '16 at 03:28
  • 4
    If you are not having `CFBundleDisplayName` in the `Info.plist`, Apple will take the `CFBundleName` as the name of your app. `CFBundleDisplayName` is used in the grid of apps on iOS devices. `CFBundleName` is used in the list of apps stored in iTunes library. – Sriraman Jul 27 '16 at 07:51
  • 1
    Worked for me. Remember to uninstall the app from the device and rebuild it to see the name change (android). – Nunchucks Jun 01 '18 at 21:21
  • 4
    On Android .. the path exactly is `android/app/src/main/res/values/strings.xml` – MujtabaFR Jun 16 '18 at 10:17
  • 2
    On iOS I had both `CFBundleName` and `CFBundleDisplayName`, so it only worked after changing each of them. – tudor Oct 19 '19 at 19:13
43

for ios just add this to Info.plist

<key>CFBundleDisplayName</key>
<string>APP_NAME</string>

for android edit strings.xml file which located in res/values/

<string name="app_name">APP_NAME</string>
Ali Faris
  • 17,754
  • 10
  • 45
  • 70
8

res -> values -> strings.xml

<string name="app_name">YOUR APP NAME HERE</string>

Change that and you will have changed your display name of the app.

Inside the manifest file, inside the application tag you will find

android:label="@string/app_name"

You can change this too, if you want to change the display name of your app.

Note: It is always recommended to have values stored in the "values" folder instead of hardcoding the values directly.

Geet Choubey
  • 1,069
  • 7
  • 23
  • 4
    Please note that the full path for the `strings.xml` relative the project root is: `android/app/src/main/res/values/strings.xml`. – Lashae Apr 14 '17 at 09:29
5

There's a file called app.json in the root of your project. Just change the "displayName" then delete ios folder and run "react-native eject".

bandojulio
  • 129
  • 2
  • 5
4

file path : /android/app/src/main/res/values/strings.xml

replace My App with your app name.

Arvind
  • 41
  • 4
1

Instead of creating an app from a template with a Display Name which needs to be changed later, it would be preferable to create the app with the desired names from the start, as I explain here in my answer. For a new app use:

npx react-native init NewcoFrameDesign --title "Newco Frame Design"

The --title option corresponds to the display name in android/app/src/main/res/values/strings.xml and ios/NewcoFrameDesign/Info.plist as well as in app.json.

ChrisW
  • 880
  • 10
  • 16
  • That's great when you create, however with most developments you change the name during development. How do you update and have it reflect in both projects – justdan0227 Feb 24 '23 at 16:01