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

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 e.g "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

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

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)

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.

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

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