DEV Community

Karan Pratap Singh
Karan Pratap Singh

Posted on • Updated on

Quick guide for updating package name in React Native

#javascript #reactnative #android #ios

Quick guide for updating package name in React Native

Hey, React Native community, in this short article let's see how to change the package name and bundle Ids in our React Native application.

List of files to edit to change/rename your react-native android project.
The following constants are used in the files to denote what kind of value should be placed.

  • APPLICATION_NAME - this will be used by react-native to identify your application.
  • APPLICATION_DISPLAY_NAME - Display name on the Home Screen.
  • ANDROID_PACKAGE_NAME - A valid android package name.
  • IOS_BUNDLE_ID - A valid iOS bundle identifier.

Please note that this is only to show what files to modify, the contents of the files are omitted in order to emphasize the parts to change.

Android

Files to modify 

---------------------------------------------------
FILE                  |  PATH
---------------------------------------------------
app.json              |  ./
index.js              |  ./
package.json          |  ./
settings.gradle       |  ./android/
BUCK                  |  ./android/app/
build.gradle          |  ./android/app/
AndroidManifest.xml   |  ./android/app/src/main/
MainActivity.java     |  ./android/app/src/main/java/**
MainApplication.java  |  ./android/app/src/main/java/**
strings.xml           |  ./android/app/src/main/res/values
Enter fullscreen mode Exit fullscreen mode

AndroidManifest.xml 

<!-- ./android/app/src/main/AndroidManifest.xml -->
<!-- change the value of 'package' -->

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ANDROID_PACKAGE_NAME">   
</manifest>
Enter fullscreen mode Exit fullscreen mode

BUCK 

# ./android/app/BUCK

# find 'android_build_config' and 'android_resource'
# ANDROID_PACKAGE_NAME = com.mycompany.whaterver.app

android_build_config(
    name = "build_config",
    package = "ANDROID_PACKAGE_NAME",
)

android_resource(
    name = "res",
    package = "ANDROID_PACKAGE_NAME",
    res = "src/main/res",
)
Enter fullscreen mode Exit fullscreen mode

MainActivity.java 

// ./android/app/src/main/java/

/* NOTE: create a directory according to your package name
 * example: An android package name like, 'com.mycompany.sub.app'
 * will turn into 'com/mycompany/sub/app'
 * Now, manually create/put MainActivity.java under './android/app/src/main/java/com/mycompany/sub/app/'
*/

package ANDROID_PACKAGE_NAME;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "APPLICATION_NAME";
    }
}
Enter fullscreen mode Exit fullscreen mode

MainApplication.java 

// ./android/app/src/main/java/

// Similar to MainActivity.java
/* NOTE: create a directory according to your package name
 * example: An android package name like, 'com.mycompany.sub.app'
 * will turn into 'com/mycompany/sub/app'
 * Now, manually create/put MainActivity.java under './android/app/src/main/java/com/mycompany/sub/app/'
*/

package ANDROID_PACKAGE_NAME;

import android.app.Application;

import com.facebook.react.ReactApplication;
Enter fullscreen mode Exit fullscreen mode

app.json 

{
  "name": "APPLICATION_NAME",
  "displayName": "APPLICATION_DISPLAY_NAME"
}
Enter fullscreen mode Exit fullscreen mode

build.gradle 

# ./android/app/build.gradle

# find 'applicationId' under 'android.defaultConfig'
# android.defaultConfig.applicationId


android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "ANDROID_PACKAGE_NAME"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
Enter fullscreen mode Exit fullscreen mode

index.js 

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('APPLICATION_NAME', () => App);
Enter fullscreen mode Exit fullscreen mode

package.json 

{
  "name": "APPLICATION_NAME",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

settings.gradle 

// ./android/settings.gradle

rootProject.name = 'APPLICATION_NAME'
include ':app'
Enter fullscreen mode Exit fullscreen mode

strings.xml 

<!-- ./android/app/src/main/res/values/strings.xml -->
<resources>
    <!-- NOTE: 
      This will be the name visible in the Android Home screen
    -->
    <string name="app_name">APPLICATION_NAME/APPLICATION_DISPLAY_NAME</string>
</resources>
Enter fullscreen mode Exit fullscreen mode

iOS

Files to modify 

---------------------------------------------------
FILE                  |  PATH
---------------------------------------------------
info.plist            |  ./ios/APPLICATION_NAME/**
Enter fullscreen mode Exit fullscreen mode
info.plist 
<dict>
  ...
  <key>CFBundleDisplayName</key>
  <string>APPLICATION_NAME</string>
  <key>CFBundleIdentifier</key>
  <string>IOS_BUNDLE_ID</string>
  ...
</dict>
Enter fullscreen mode Exit fullscreen mode

I hope you were able to update the package name of your app, as always don't forget to run a clean build after these changes.

If you liked this article, or faced any issues, feel free to reach out via Twitter or Email 🚀

Happy Coding 🎉

Top comments (16)

Collapse
 
gautham495 profile image
Gautham Vijayan •

You sir a legend!!

Collapse
 
gautham495 profile image
Gautham Vijayan •

You saved me as google play store is saying "App package name already exists" and I have to do all the steps mentioned here!!

Thanks a lot!

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh •

Glad it helped!

Thread Thread
 
gautham495 profile image
Gautham Vijayan •

Please add two more things here.

  1. For Splash Screen we have to change the name from old to new.
  2. And in MainApplication.java we have to change package name at class as shown below. 
 private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */

        Class<?> aClass = 
Class.forName("com.<New_Package_name>.ReactNativeFlipper");


        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
gautham495 profile image
Gautham Vijayan •

I ran into errors because of these ones.

Collapse
 
paulg0614 profile image
paulg0614 •

Thanks!
Worked for most part, but I keep getting a weird warning which I can't seem to figure out.
I am able to get it loaded in Android emulator too.
The warning I get is:
Invalid applications's package name "com.domain.testMe" in AndroidManifest.xml. Read guidelines for setting package name here:.......
Prior to making this change, I didn't get the warning.
Any ideas?

Collapse
 
andrefedev profile image
Andres Osorio •

Excellent it helped me a lot, I have a question, after executing "npx react-native run-android" on my android device I get the name of the application "app_name", it does not appear as I put it in app.json displayName: 'App Name', any suggestions?

Collapse
 
xafm profile image
Faruk Mollaoğlu •

Great post! Thanks a lot!

Collapse
 
karanpratapsingh profile image
Karan Pratap Singh •

Glad it helped

Collapse
 
salmanpixarsart profile image
salman-pixarsart •

We also need to update moduleName in appDelegate.m file with our package name. RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"new_name"
initialProperties:nil];
And make sure you add exact name as you added in app.json file.

Collapse
 
sivaleo profile image
Siva •

Thank you its helped well....and simple....Goto VSCode -> search & replace(ctrl+shift+h) ->Enter Search for "OLD_PACKAGE_NAME" enter Replace to "NEW_PACKAGE_NAME" press replace all.....

Collapse
 
pedrohenriquerissato profile image
Pedro Henrique Rissato • • Edited

I'm going add to the list to rename inside ios/project_name/AppDelegate.m, since AppName is hard coded.

Collapse
 
adwidianjaya profile image
Adhe Widianjaya •

This is the most helpful so far. Thank you so much!

Collapse
 
srinirg profile image
srini-rg •

You saved my life. Thanks :-)

Collapse
 
ashackq profile image
Akash Patel •

Saved

View full discussion (16 comments)

Read next

ridoy_hasan profile image

How to Set Up Your JavaScript Development Environment

Ridoy Hasan -

codenameone profile image

Front End Debugging Part 1: Not just Console Log

Shai Almog -

sonaykara profile image

React : Keeping Components Pure

Sonay Kara -

miguelaeh profile image

Offload - A unified javascript SDK that enables in-browser AI

Miguel Ángel Cabrera Miñagorri -