How to change bundle identifier of iOS app and package name of android app within react native app

When we create a new react native app, by default it’s android app package name set as “com.project_name”, for example if we create a new project called “HelloWorld” using react native CLI, by default package name for android project will be “com.helloworld” and default bundle identifier for iOS app will be “org.reactjs.native.example.HelloWorld”. Changing bundle identifier for iOS app is quite easy, but changing android app package name bit cumbersome.

In this tutorial we want to go through step by step how to change both iOS bundle identifier and android package name. I am going to demo it by creating one dummy project called “HelloWorld”.

System Information:

Let’s create a new react native app using react native CLI. Open your terminal or command prompt and use below command —

react-native init HelloWorld

create react native app

One folder created with app name HelloWorld

In earlier version of react native there was an option to specify package name while creating your app by using command like this -

react-native init HelloWorld -package “com.paachu.helloworld”

*** this option does not work anymore

Once our app is created, we can start setting up the package name and bundle identifier. Let’s start with the easy one first i.e. iOS bundle identifier change.

iOS Bundle Identifier setup

From command prompt go inside your project folder. you can see there is a folder called ios. Go inside ios folder and execute this command —

open HelloWorld.xcodeproj

it will open ios project in Xcode application (if Xcode application is installed in you machine).

Here change bundle identifier as per your own choice and exit Xcode application.

Android package name setup

To modify package name of android app open your project in any of your favourite editor application. Visual Studio Code is one of my favourite editor, I am going to use that.

• Update folder structure inside “java” folder. Navigate inside folder “/android/app/src/main /java/” from vs-code app and right click on folder “java” and choose option “reveal in finder”. it will open that folder in finder. You can also use finder or explorer to open that folder. We need to structure folder inside java folder based on our new package name, see the example below —

folder structure before

new folder structure based on new package name

new folder structure

Now we need to update new package name inside few files.

• Update package name inside “MainActivity.java”

• Update package name inside “MainApplication.java”

• Update package name inside “/android/app/src/main/AndroidManifest.xml”

• Update package name inside “/android/app/BUCK” file

• Update package name inside “/android/app/build.gradle” file

That’s all, we are good to go now. In command prompt, from your project’s root folder run command “npm install”. Once installation of all modules are done then you can test your app by running “react-native run-ios” or “react-native run-android” command.

Final Note

To change your android package name you also can use react-native-rename npm package. This package can help you to rename your project as well as you can modify your package name like this —

react-native-rename <New App Name> -b <new package name>

But with this package you can’t rename your package name without changing your app name. And it only works for your android project does not change your iOS app bundle identifier.

Another available npm package is react-native-ci-tools. I have not tired this package, you may give it a try.

For sure any npm package make our life easier, but when you do something manually step by step for sure it will grow your knowledge base.

happy coding …