← Back to Chapters

React Native App Name & Bundle Identifier

? React Native App Name & Bundle Identifier

? Quick Overview

In React Native, the App Name is the visible name shown on the device home screen, while the Bundle Identifier (iOS) or Application ID (Android) uniquely identifies your app in the app stores and operating system.

? Key Concepts

  • App Name – User-facing name of the application
  • Bundle Identifier (iOS) – Reverse-domain unique ID (e.g. com.company.app)
  • Application ID (Android) – Same concept as bundle identifier
  • Immutability – Cannot be changed after publishing

? Syntax / Theory

React Native projects are generated with default names. These values are stored in platform-specific configuration files.

? Code Example(s)

? View Code Example 
// app.json - Controls the display name for the app
{
  "name": "MyAwesomeApp",
  "displayName": "My Awesome App"
}
? View Code Example 
// android/app/build.gradle - Android applicationId
defaultConfig {
  applicationId "com.mycompany.myawesomeapp"
  minSdkVersion 21
  targetSdkVersion 34
}
? View Code Example 
// ios/*.xcodeproj - iOS bundle identifier
PRODUCT_BUNDLE_IDENTIFIER = com.mycompany.myawesomeapp;

? Live Output / Explanation

What happens?

After updating these values and rebuilding the app:

  • The new app name appears on the device home screen
  • The OS treats it as a unique application
  • App Store / Play Store recognizes it as a distinct app

? Interactive Example

Use the simulator below to understand how the App Name (Display) and Company Domain combine to form the unique identifiers used by Android and iOS.

?
My Photo App
Home Screen
// Generated Identifier Preview
# Android (build.gradle) applicationId "com.studio.myphotoapp"
 
# iOS (project.pbxproj) BUNDLE_ID = com.studio.myphotoapp;
 
# app.json "displayName": "My Photo App"

? Use Cases

  • Publishing multiple apps from the same codebase
  • Creating staging and production builds
  • White-label applications for different clients

✅ Tips & Best Practices

  • Always decide the bundle identifier before publishing
  • Use reverse-domain naming convention
  • Never change bundle ID after store release
  • Keep app name short and user-friendly

? Try It Yourself

  1. Create a new React Native project
  2. Change displayName in app.json
  3. Update Android and iOS identifiers
  4. Rebuild and install the app