Change package name for Android in React Native
AndroidReact NativeReact Native-AndroidAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
I've renamed the project' subfolder 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"
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
Solution 2 - Android
I use the react-native-rename* npm package. Install it via
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
Solution 3 - Android
To change the package name from com.myapp
to: com.mycompany.myapp
(for example),
- For iOS app of the react app, use xcode - under general.
- 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.
Solution 4 - Android
you can simply use 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
but notice that, this lib remove your MainActivity.java
and MainApplication.java
.
before changing your package name, give a backup from this two file and, after changing package name just put it back to their place. this solution work for me
more info: react-native-rename
Solution 5 - Android
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.
Solution 6 - Android
The simplest one:
npx react-native-rename YourNewAppName -b com.YourCompanyName.YourNewAppName
Solution 7 - Android
If you are using Android Studio-
changing com.myapp
to com.mycompany.myapp
-
create a new package hierarchy com.mycompany.myapp under
android/app/src/main/java
-
Copy all classes from
com.myapp
tocom.mycompany.myapp
using Android studio GUI -
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.
-
Update
android/app/src/main/AndroidManifest.xml
andandroid/app/build.gradle
(replacecom.myapp
tocom.mycompany.myapp
-
Sync the project (gradle build)
Solution 8 - Android
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/
Solution 9 - Android
In VS Code, press Ctrl + Shift + F
and enter your old package name in 'Find' and enter your new package in 'Replace'. Then press 'Replace all occurrences'.
Definitely not the pragmatic way. But, it's done the trick for me.
Solution 10 - Android
REACT 0.64 | 2021 NO EXPO
Let original App name be: com.myApp
Let New App Name: 'com.newname.myApp`
android\app\src\main\AndroidManifest.xml
Rename xml attribute: `package="com.newname.myApp"
android\app\src\main\java\com\[yourAppName]\MainActivity.java
Rename first line from package com.myApp;
To package com.newname.myApp;
android\app\src\main\java\com\[yourAppName]\MainApplication.java
Rename first line To package com.newname.myApp;
In class private static void initializeFlipper
reneme this line:
Class<?> aClass = Class.forName("com.myApp.ReactNativeFlipper");
To
Class<?> aClass = Class.forName("com.newname.myApp.ReactNativeFlipper");
android\app\build.gradle
On the defaultConfig
rename applicationId
to "com.newname.myApp"
-
Run on command line:
$ npx react-native start $ npx react-native run-android
Solution 11 - Android
react-native-rename worked perfectly for renaming the app and the bundle identifier for my project as of the day of writing this answer.
-
To update app name:
npx react-native-rename "New App Label"
-
To update the bundle identifier:
npx react-native-rename -b "appname.example.com"
Solution 12 - Android
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)
Solution 13 - Android
Use
npx react-native-rename <newName>
With custom Bundle Identifier (Android only. For iOS, please use Xcode)
$ npx react-native-rename <newName> -b <bundleIdentifier>
First, Switch to new branch (optional but recommended)
$ git checkout -b rename-app
Then, Rename your app $ npx react-native-rename "Travel App"
With custom Bundle Identifier
$ npx react-native-rename "Travel App" -b com.junedomingo.travelapp
After you change the name, please make sure you go to the android folder and run gradlew clean
. then go back to the main project and run npx react-native run-android
.
Also If you have google-services.json file in your previous project, change accordingly with the new one ... then you are good to go :)
See More here https://github.com/junedomingo/react-native-rename#readme
Solution 14 - Android
I've used the react-native-rename package.
In terminal run the command to install:
npm install react-native-rename -g
In the root of your React Native project, run the following command:
react-native-rename "NewNameOfApp" -b com.companyname.newnameofapp
Solution 15 - Android
If you are using VSCode
and Windows
.
1.Press Control + Shift + F
.
2.Find Your Package Name
and Replace All
with your new Package Name
.
-
type
"cd android"
-
type
"./gradlew clean"
Solution 16 - Android
To change the Package name you have to edit four files in your project :
1. android/app/src/main/java/com/reactNativeSampleApp/MainActivity.java
2. android/app/src/main/java/com/reactNativeSampleApp/MainApplication.java
3. android/app/src/main/AndroidManifest.xml
4. android/app/build.gradle
The first 2 files have the package name as something like below.
package com.WHATEVER_YOUR_PACKAGE_NAME_IS;
Change it to your desired package name.
package com.YOUR_DESIRED_PACKAGE_NAME;
You have to also edit the package name in 2 other files.
android/app/build.gradle
android/app/src/main/AndroidManifest.xml
Note if you have a google-services.json file in your project then you have to also change your package name in that file.
After this, you have to ./gradlew clean your project.
Solution 17 - Android
Follow the simple steps to rename your app name
and Package name
in case you have not made any custom changes in android folder(ie. scenario where u just initialized the project)
- Simply change the
name
in thepackage.json
file as you need and save it. - Remove the folder named android
- run the command
react-native upgrade
Note:As ivoteje50 mentioned in comment,Don't remove the android folder if you have already followed the official instructions to generate a keystore, since it will remove the keystore and you cannot sign a new app again.
Solution 18 - Android
Go to Android Studio, open app, right click on java and choose New and then Package.
Give the name you want (e.g. com.something).
Move the files from the other package (you want to rename) to the new Package. Delete the old package.
Go to your project in your editor and use the shortcut for searching in all the files (on mac is shift cmd F). Type in the name of your old package. Change all the references to the new package name.
Go to Android Studio, Build, Clean Project, Rebuild Project.
Done!
Happy coding :)
Solution 19 - Android
I fixed this by manually updating package name in following places
1) app.json | ./
2) index.js | ./
3) package.json | ./
4) settings.gradle | ./android/
5) BUCK | ./android/app/
6) build.gradle | ./android/app/
7) AndroidManifest.xml | ./android/app/src/main/
8) MainActivity.java | ./android/app/src/main/java/**
9) MainApplication.java | ./android/app/src/main/java/**
10)strings.xml | ./android/app/src/main/res/values
11)ReactNativeFlipper.java| ./android/app/src/debug/java/com/<package-name>/
Solution 20 - Android
After running this:
react-native-rename "MyApp" -b com.mycompany.myapp
Make sure to also goto Build.gradle
under android/app/...
and rename the application Id as shown below:
defaultConfig {
applicationId:com.appname.xxx
........
}
Solution 21 - Android
Before changing your react native package name! please make a backup of MainActivity.java and MainApplication.java file. Because this lib remove your MainActivity.java and MainApplication.java.
after doing this you can simply use react-native-rename npm package.
Install
npm install react-native-rename -g
Then from the root of your React Native project execute the following
react-native-rename "new_project_name" -b com.mycompany.newprojectname
finally you can check it out your new package name in your AndroidManifest.xml. Don't forgot to rename the package name in your MainActivity.java and MainApplication.java .
Thank you.
Solution 22 - Android
I will provide you step by step procedure.
First of all, we need to understand why we need to rename a package? Mostly for uniquely identifying App right? So React Native is a cross-platform to develop an app that runs on both iOS and Android. So What I recommended is to need the same identifier in both the platforms. In case Android Package Name is a unique identifier of your App and for iOS its bundle ID.
Steps:
- Firstly close all editors/studio eg: xcode android studio vscode and then Install package "react-native-rename" in the terminal by running the command (Keep your project folder copy in another folder for backup if you don't feel this safe):
> npm install react-native-rename -g
- After sucessfully installing package open your project folder in the terminal and hit the below command where "Your app name Within double quotes" is app name and
is replaced with package/bundle name/id:
> react-native-rename "< Your app name Within double quotes >" -b
Example: react-native-rename "Aptitude Test App" -b com.vaibhavmojidra.aptitudetestapp
Note Make sure the package/bundle name/id is all in small case
-
This is not yet done yet now every file will change where the it had bundle/package names except one in ios project which we manually need to do for that open the xcode>open a project or file> choose file from projectfolder/ios/projectname.xcodeproj and click open
-
Click on your projectname.xcodeproj that is first file in the project navigator then in field of Bundle identifier enter the package name/Bundle ID as below:
- After that run in the terminal
> cd ios
- Then run
> pod install
- Then run
> cd ..
-
Now you are done for all the changes for ios just last step is to open Android Studio>Open an Existing Project> select projectfolder/android folder > Click on open
-
Let it load and complete all the process and then in the Build Menu click "Clean Project" and the in File Menu > Close Project
-
Close All editors and Now You can try the commands to run project on ios and android it will run with renamed packaged just while start server add extra flag --reset-cache:
> npm start --reset-cache
Enjoy it will work now
Solution 23 - Android
You can use react-native-rename package which will take of all the necessary changes of package name under
app/mainapplication.java
AndroidManifest.xml
but make sure to manually change the package name of all files under the java/com folder. because when i created an splash screen activity the old package name is not updated.
Solution 24 - Android
Simply using the search and replace tool of my IDE did the trick.
Solution 25 - Android
very simple way :
cd /your/project/dir
run this command :
grep -rl "com.your.app" . | xargs sed -i 's/com.your.app/com.yournew.newapp/g'
rename your folder
android/app/src/main/java/com/your/app
change to
android/app/src/main/java/com/yournew/newapp
Solution 26 - Android
To change package I have searched and tried many methods but some are very hard and some are outdated. While searching I found a website that discuss a very simple method that are tested and personally i have also used this. Link : https://www.geoclassifieds.in/2021/02/change-package-name-react-native.html
Solution 27 - Android
After renaming package name everywhere, from android studio. File -> Invalidate caches/Restart may fix this type of errors
this worked for me
Solution 28 - Android
One simplest way I found when I tried to change the package name is using the "Search" option and replacing everything in VS Code.
In search use (com.yourprojectname) And replace it with (com.newProjectName)
The "react-native-rename" npm package does the same thing so you may try the above one if you don't want to install any packages.
But if you are using firebase the steps are a little different
Solution 29 - Android
This information can be helpful for you so listen properly...
After updating package name and changing files, don't forget to change in
package.json and app.json file at the root directory of your react native project
Otherwise you will get this error below
Invariant Violation: "Your new package name" has not been registered
Solution 30 - Android
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.