Change package name for Android in React Native

I used react-native init MyApp to initialise a new React Native app. This created among others an Android project with the package com.myapp.

What's the best way to change this package name, for example to: com.mycompany.myapp?

I tried changing it in AndroidManifest.xml but it created other errors, so I'm assuming it's not the way.

Any idea?

I've changed project' subfolder name from: "android/app/src/main/java/MY/APP/OLD_ID/" to: "android/app/src/main/java/MY/APP/NEW_ID/"

Then manually switched the old and new package ids:

In: android/app/src/main/java/MY/APP/NEW_ID/MainActivity.java:

package MY.APP.NEW_ID;

In android/app/src/main/java/MY/APP/NEW_ID/MainApplication.java:

package MY.APP.NEW_ID;

In android/app/src/main/AndroidManifest.xml:

package="MY.APP.NEW_ID"

And in android/app/build.gradle:

applicationId "MY.APP.NEW_ID"

(Optional) In android/app/BUCK:

android_build_config(
  package="MY.APP.NEW_ID"
)
android_resource(
  package="MY.APP.NEW_ID"
)

Gradle' cleaning in the end (in /android folder):

./gradlew clean

I use the react-native-rename npm package.

Install using

npm install react-native-rename -g

Then from the root of your React Native project execute the following

react-native-rename "MyApp" -b com.mycompany.myapp

react-native-rename on npm

Goto Android studio

Right click your package (most probably com)-> Refractor -> Rename -> Enter new package name in the dialog -> Do Refractor

It will rename your package name everywhere.

If you are using Android Studio-

changing com.myapp to com.mycompany.myapp

  1. create a new package hierarchy com.mycompany.myapp under android/app/src/main/java

  2. Copy all classes from com.myapp to com.mycompany.myapp using Android studio GUI

  3. Android studio will take care of putting suitable package name for all copied classes. This is useful if you have some custom modules and don't want to manually replace in all the .java files.

  4. Update android/app/src/main/AndroidManifest.xml and android/app/build.gradle (replace com.myapp to com.mycompany.myapp

  5. Sync the project (gradle build)

To change the package name from com.myapp to: com.mycompany.myapp (for example),

  1. For iOS app of the react app, use xcode - under general.
  2. For the android app, open the build.gradle at module level. The one in the android/app folder. You will find

    ... defaultConfig { applicationId com.myapp ... } ...

Change the "com.myapp" to whatever you need.

Hope this helps.

I have a solution based on @Cherniv's answer (works on macOS for me). Two differences: I have a Main2Activity.java in the java folder that I do the same thing to, and I don't bother calling ./gradlew clean since it seems like the react-native packager does that automatically anyways.

Anyways, my solution does what Cherniv's does, except I made a bash shell script for it since I'm building multiple apps using one set of code and want to be able to easily change the package name whenever I run my npm scripts.

Here is the bash script I used. You'll need to modify the packageName you want to use, and add anything else you want to it... but here are the basics. You can create a .sh file, give permission, and then run it from the same folder you run react-native from:

rm -rf ./android/app/src/main/java


mkdir -p ./android/app/src/main/java/com/MyWebsite/MyAppName
    packageName="com.MyWebsite.MyAppName"
    sed -i '' -e "s/.*package.*/package "$packageName";/" ./android/app/src/main/javaFiles/Main2Activity.java
    sed -i '' -e "s/.*package.*/package "$packageName";/" ./android/app/src/main/javaFiles/MainActivity.java
    sed -i '' -e "s/.*package.*/package "$packageName";/" ./android/app/src/main/javaFiles/MainApplication.java
    sed -i '' -e "s/.*package=\".*/    package=\""$packageName"\"/" ./android/app/src/main/AndroidManifest.xml
    sed -i '' -e "s/.*package = '.*/  package = '"$packageName"',/" ./android/app/BUCK
    sed -i '' -e "s/.*applicationId.*/    applicationId \""$packageName"\"/" ./android/app/build.gradle

    cp -R ./android/app/src/main/javaFiles/ ./android/app/src/main/java/com/MyWebsite/MyAppName

DISCLAIMER: You'll need to edit MainApplication.java's comment near the bottom of the java file first. It has the word 'package' in the comment. Because of how the script works, it takes any line with the word 'package' in it and replaces it. Because of this, this script may not be future proofed as there might be that same word used somewhere else.

Second Disclaimer: the first 3 sed commands edit the java files from a directory called javaFiles. I created this directory myself since I want to have one set of java files that are copied from there (as I might add new packages to it in the future). You will probably want to do the same thing. So copy all the files from the java folder (go through its subfolders to find the actual java files) and put them in a new folder called javaFiles.

Third Disclaimer: You'll need to edit the packageName variable to be in line with the paths at the top of the script and bottom (com.MyWebsite.MyAppName to com/MyWebsite/MyAppName)

The init script generates a unique identifier for Android based on the name you gave it (e.g. com.acmeapp for AcmeApp).

You can see what name was generated by looking for the applicationId key in android/app/build.gradle.

If you need to change that unique identifier, do it now as described below:

In the /android folder, replace all occurrences of com.acmeapp by com.acme.app

Then change the directory structure with the following commands:

mkdir android/app/src/main/java/com/acme

mv android/app/src/main/java/com/acmeapp android/app/src/main/java/com/acme/app

You need a folder level for each dot in the app identifier.

Source: https://blog.elao.com/en/dev/from-react-native-init-to-app-stores-real-quick/

Follow the simple steps to rename your app name and Package name

  1. Simply change the name in the package.json file as you need and save it.
  2. Remove the folder named android
  3. run the command react-native upgrade

Go to file android/app/src/main/AndroidManifest.xml -

Update :

attr android:label of Element application as :

Old value - android:label="@string/app_name"

New Value - android:label="(string you want to put)"

and

attr android:label of Element activity as :

Old value - android:label="@string/app_name"

New Value - android:label="(string you want to put)"

Worked for me, hopefully it will help.

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue