How to change the “Bundle Identifier” within React

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

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 2

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 3

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 4

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 5

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.

Answer 6

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