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?
Add a comment
|
6 Answers
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>
5 Comments
Obromios
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?
Sriraman
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.
Nunchucks
Worked for me. Remember to uninstall the app from the device and rebuild it to see the name change (android).
Mujtaba Fadhil
On Android .. the path exactly is
android/app/src/main/res/values/strings.xmltudor
On iOS I had both
CFBundleName and CFBundleDisplayName, so it only worked after changing each of them.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>
Comments
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.
1 Comment
Lashae
Please note that the full path for the
strings.xml relative the project root is: android/app/src/main/res/values/strings.xml.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".
2 Comments
Ghani
please warning before you're
ejecting from react nativefile path : /android/app/src/main/res/values/strings.xml
replace My App with your app name.
Comments
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.
2 Comments
justdan0227
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
Bart Verkoeijen
There's also an additional
--package-name flag, which allows to specify a reverse domain name that is not .com based by default.