How to change the "Bundle Identifier" within React Native?

Question

Starting a new react-native project, the xcode-project gots the bundle-identifier "org.reactjs.native.example.XYZApp". XYZ is the placeholder here for my real project name.

Is there any way to change this bundle identifier on react-native side? Sure, I can change it in XCode. But this is not safe because it can be overriden when react-native will recreate the xcode-project, which could happen at any time, as well es when rebuilding the project.

Answer 1

Based on the react-native version you are using there are bunch of files that have to be changed on both platforms (android and ios)

List of files to edit:

IOS

1. [application_build_scheem] .plist (this is a dict/xml file that contains keys that are used by default if no changes added to project (react-native-cli init type of project)

ANDROID

1. strings.xml (change app_name key value)
2. manifest.xml (change package attribute)
3. build.gradle (change applicationId value)
4. MainActivity.java (change java class package )
5. MainApplication.java (change java class package )

It's worth mentioning that there is an an npm module ( https://www.npmjs.com/package/react-native-ci-tools ) that does all of the above; use it and make life easy.

Update (6/Mar/2019)

Update Folder Paths:

We also need to change the folder paths to match new name -- change com.oldName to com.newname.mobile , then change folder paths from app/src/java/com/oldName/ to app/src/java/com/newname/mobile/ .

Answer 2

For those who want a simple way to do exactly this I create react-native-app-id, It'll basically edit the files mentioned. react-native-ci-tools actually forked my code to produce a now outdated react-native-app-id-fixed , which won't work with the latest react native. Mine however will..

https://github.com/kyle-ssg/react-native-app-id

usage is as easy as react-native-app-id com.foo.bar

Answer 3

To update iOS bundle id -

• From terminal or command prompt navigate to react-native project folder and then go inside iOS folder.
• enter command Open ProjectName.xcodeproj

This command will open the project in Xcode where you need to update bundle identifier information of the app

To update android package name follow below steps -

• Update folder structure inside “android/app/src/main/java/” folder based on your new package name eg "com/companyName/appName"
• Update package name inside MainActivity.java file
• Update package name inside MainApplication.java file
• Update package name inside /android/app/src/main/AndroidManifest.xml file
• Update package name inside /android/app/BUCK file
• Update package name inside /android/app/build.gradle file

Answer 4

If you want to change bundle identifier in react-native project. You must have to change app identifier separately for both side android and ios.

ios

Select root project in xcode, select General tab, You can see Bundle identifier into identity section and change your new bundle identifier for ios application

android

1. Goto your AndroidManifest.xml.
2. Just place your cursor in the package name, don't select it just place it.
3. Then press shift+F6(window)/F6 (mac) you will get a popup window, fill new identifier and select Rename package. It will change from everywhere in android studio.

Answer 5

Even with react-native-app-id you must move the files to the new folder

I ended using a npm task for upgrading, first upgrade then run the command for rename, move the android files to the correct path and re-link just in case

Answer 6

Edit the PRODUCT_BUNDLE_IDENTIFIER associated with the project in ios/project.pbxproj . It is much safer to use XCode.

I know that the question asked to do it without XCode, for people keen on using Xcode , when inside your react native project:

1. xed ios Open the ios folder in xcode
2. Click the top left icon ( project navigator )
3. Click the root item in the left panel ProjectName
4. In the center view, click General
5. Under identity , change the Bundle identifier

Answer 7

I have a more lowkey solution that I have been using. This is not a replacement for the above solutions, but simply, one more way to do it. I have only tested this on iOS but I assume it would work for Android as well.

I noticed that in most cases, the project created would have a com.xyz.something which is something like this.

org.reactjs.native.example.abcyourprojectname-extras

I realised, instead of checking each and every folder (and not having to use Xcode), I simply do a search for (in Visual Studio Code, with the project folder open)

org.reactjs.native.example

This would list all the files with the bundle identifier. Just change it your preferred bundle identifier, and thats about it. This way, even if tomorrow, there are any file changes or format changes or whatever, searching will still be consistent way of doing things.

(again, this is a low key solution, but it seems to work for me)

Answer 8

Here's my solution without adding some external packages. Just run npx react-native-rename <newName> -b <bundleIdentifier> inside your project root directory. https://github.com/junedomingo/react-native-rename

Answer 9

Unfortunately not. In fact we were just discussing this today in the react Native Facebook group. https://m.facebook.com/groups/586400221495560?view=permalink&id=738954276240153&comment_id=739065029562411&notif_t=group_comment_reply&ref=m_notif

The best plan right now is to choose the 'd' option when upgrading to verify the files before allowing then to be overridden.