How to set the Display Name when creating a React Native project from a template?

According to the documentation the way to create a React Native project from the default template is as follows:

npx react-native init NewcoFrameDesign

This will set NewcoFrameDesign as the app name in several places in the project including app.json as name and displayName, which is used as the basis for app naming inside the iOS and Android projects.

I want my Display Name to be "Newco Frame Design" (with the spaces) in all relevant locations, as this is used for example in android/app/src/main/res/values/strings.xml as well as ios/NewcoFrameDesign/Info.plist and thereby possibly shown to the user. Using a name with spaces with react-native init is not an option, as it will lead to errors.

Having to rename the Display Name in several places after creating the project from a template should not be necessary.

Therefore, what is the correct way to create a React Native project from a template with a name such as NewcoFrameDesign and a different displayName such as Newco Frame Design?

I encountered the answer when learning how to make my own sample template.

TL;DR The answer is:

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

Unexpectedly --title corresponds to displayName in app.json:

{
  "name": "NewcoFrameDesign",
  "displayName": "Newco Frame Design"
}

This should have been very easy to find, but the terminology used by React Native is not consistent, so I missed it at first when checking: npx react-native init --help:

Options:
  --version <string>    Shortcut for `--template react-native@version`
  --template <string>   Uses a custom template. Valid arguments are the ones supported by `yarn add [package]` or `npm install [package]`, if you are using `--npm` option
  --npm                 Forces using npm for initialization
  --directory <string>  Uses a custom directory instead of `<projectName>`.
  --title <string>      Uses a custom app title name for application
  --skip-install        Skips dependencies installation step
  -h, --help            output usage information

The use of "a custom app title" is not explained in the official documentation and a Google search will not yield helpful results either. Even the react-native-community/cli source code is confusing as terms like placeholderName, placeholderTitle, projectTitle and displayNameare used with unclear differentiation. The React Native templating source code does provide a clue:

placeholderName: 'HelloWorld',
titlePlaceholder: 'Hello App Display Name'

The official React Native templates update the displayName as specified by title in android/app/src/main/res/values/strings.xml as well as ios/NewcoFrameDesign/Info.plist and possibly other places. These determine the app name shown to the user.

Each template should properly specify the titlePlaceholder in template.config.js, but many templates fail to do this

module.exports = {
  // Placeholder name that will be replaced in package.json, index.json, android/, ios/ for a project name.
  placeholderName: 'CustomReactNativeTemplate',

  // Placeholder title that will be replaced in values.xml and Info.plist with title provided by the user.
  titlePlaceholder: 'Custom React Native Template',
};

Not specifying titlePlaceholder leads to the wrong displayName in app.json. It's a minor issue though as the displayName in app.json is only used by the eject command. Even if titlePlaceholder is missing in the template config, the react-native init --title option will still be properly applied to the ios and android projects.

Recommended topics

Hot tags