Rename React-Native app’s Bundle Id and Package Name

Part ɪ: Creating new React-Native app│Story 02: Rename React-Native app’s Bundle Id and Package Name

Image source: SpaceRef

In the previous post, we initialized a new react-native app using React-Native CLI and tested it by running on iPhone/Android/emulators.

When react-native CLI scaffolds the app, it creates the default Bundle Id (for iOS) as org.react.native.example.rnTSgitlabCICDExample and Android Package name in the format com.<AppName> . i.e. com.rnTSgitlabCICDExample

I would like to change the app’s bundle/package name to be something like com.jsifiedbrains.rnTSgitlabCICDExample.

So let’s rename the default created Bundle Id/package name of the app.

Initial scaffolded folders/files by react-native CLI

Open the project in your code editor. Initial project files/folders scaffolded by above React-native init command should look like below:

Renaming App’s Bundle Id and Package Name

To 𝘴𝘦𝘦 𝘵𝘩𝘦 𝘢𝘱𝘱’𝘴 𝘪𝘖𝘚 𝘉𝘶𝘯𝘥𝘭𝘦 𝘐𝘥 𝘨𝘦𝘯𝘦𝘳𝘢𝘵𝘦𝘥 𝘣𝘺 𝘵𝘩𝘦 𝘳𝘦𝘢𝘤𝘵-𝘯𝘢𝘵𝘪𝘷𝘦 𝘪𝘯𝘪𝘵 𝘤𝘰𝘮𝘮𝘢𝘯𝘥, 𝘰𝘱𝘦𝘯 𝘵𝘩𝘦 𝘢𝘱𝘱’𝘴 𝘪𝘖𝘚 𝘷𝘦𝘳𝘴𝘪𝘰𝘯 (.𝘹𝘤𝘰𝘥𝘦𝘱𝘳𝘰𝘫) 𝘪𝘯 𝘟𝘤𝘰𝘥𝘦 𝘸𝘪𝘵𝘩 𝘣𝘦𝘭𝘰𝘸 𝘤𝘰𝘮𝘮𝘢𝘯𝘥.

$ open ios/rnTSgitlabCICDExample.xcodeproj

(click on image to zoom)

👆𝘕𝘰𝘵𝘦 𝘢𝘣𝘰𝘷𝘦 𝘵𝘩𝘦 𝘥𝘦𝘧𝘢𝘶𝘭𝘵 𝘨𝘦𝘯𝘦𝘳𝘢𝘵𝘦𝘥 𝘉𝘶𝘯𝘥𝘭𝘦 𝘐𝘥 (𝘰𝘳𝘨.𝘳𝘦𝘢𝘤𝘵.𝘯𝘢𝘵𝘪𝘷𝘦.𝘦𝘹𝘢𝘮𝘱𝘭𝘦.𝘳𝘯𝘛𝘚𝘨𝘪𝘵𝘭𝘢𝘣𝘊𝘐𝘊𝘋𝘌𝘹𝘢𝘮𝘱𝘭𝘦)𝘢𝘯𝘥 𝘢𝘭𝘴𝘰 𝘯𝘰𝘵𝘦 𝘵𝘩𝘢𝘵 𝘵𝘩𝘦 𝘢𝘱𝘱 𝘷𝘦𝘳𝘴𝘪𝘰𝘯 𝘪𝘴 𝘪𝘯 𝘵𝘩𝘦 𝘧𝘰𝘳𝘮 1.0

𝘚𝘪𝘮𝘪𝘭𝘢𝘳𝘭𝘺, 𝘵𝘰 𝘴𝘦𝘦 𝘵𝘩𝘦 𝘢𝘱𝘱’𝘴 𝘨𝘦𝘯𝘦𝘳𝘢𝘵𝘦𝘥 𝘈𝘯𝘥𝘳𝘰𝘪𝘥 𝘗𝘢𝘤𝘬𝘢𝘨𝘦 𝘯𝘢𝘮𝘦, 𝘰𝘱𝘦𝘯 𝘪𝘵𝘴 𝘈𝘯𝘥𝘳𝘰𝘪𝘥 𝘱𝘳𝘰𝘫𝘦𝘤𝘵 𝘪𝘯 𝘈𝘯𝘥𝘳𝘰𝘪𝘥 𝘴𝘵𝘶𝘥𝘪𝘰 𝘸𝘪𝘵𝘩 𝘣𝘦𝘭𝘰𝘸 𝘤𝘰𝘮𝘮𝘢𝘯𝘥:

$ open -a /Applications/Android\ Studio.app ./android

𝘛𝘩𝘪𝘴 𝘸𝘰𝘶𝘭𝘥 𝘰𝘱𝘦𝘯 𝘵𝘩𝘦 𝘢𝘯𝘥𝘳𝘰𝘪𝘥 𝘱𝘳𝘰𝘫𝘦𝘤𝘵 𝘰𝘧 𝘰𝘶𝘳 𝘢𝘱𝘱 𝘪𝘯 𝘈𝘯𝘥𝘳𝘰𝘪𝘥 𝘴𝘵𝘶𝘥𝘪𝘰. 𝘖𝘯𝘤𝘦 𝘵𝘩𝘦 𝘱𝘳𝘰𝘫𝘦𝘤𝘵 𝘪𝘴 𝘰𝘱𝘦𝘯𝘦𝘥, 𝘈𝘯𝘥𝘳𝘰𝘪𝘥 𝘚𝘵𝘶𝘥𝘪𝘰 𝘸𝘰𝘶𝘭𝘥 𝘴𝘵𝘢𝘳𝘵 𝘢 𝘣𝘶𝘪𝘭𝘥 𝘢𝘯𝘥 𝘨𝘳𝘢𝘥𝘭𝘦 𝘴𝘺𝘯𝘤 𝘧𝘰𝘳 𝘵𝘩𝘦 𝘢𝘱𝘱. 𝘓𝘦𝘵 𝘪𝘵 𝘧𝘪𝘯𝘪𝘴𝘩 𝘵𝘰 𝘴𝘺𝘯𝘤 𝘴𝘶𝘤𝘤𝘦𝘴𝘴𝘧𝘶𝘭𝘭𝘺.

𝘕𝘰𝘸 𝘰𝘱𝘦𝘯 𝘵𝘩𝘦 𝘫𝘢𝘷𝘢 𝘧𝘪𝘭𝘦𝘴 𝘔𝘢𝘪𝘯𝘈𝘱𝘱𝘭𝘪𝘤𝘢𝘵𝘪𝘰𝘯 𝘰𝘳 𝘔𝘢𝘪𝘯𝘈𝘤𝘵𝘪𝘷𝘪𝘵𝘺 𝘵𝘰 𝘴𝘦𝘦 𝘵𝘩𝘦 𝘢𝘱𝘱’𝘴 𝘱𝘢𝘤𝘬𝘢𝘨𝘦 𝘯𝘢𝘮𝘦 👇

👆𝘕𝘰𝘵𝘦 𝘢𝘣𝘰𝘷𝘦 𝘵𝘩𝘦 𝘥𝘦𝘧𝘢𝘶𝘭𝘵 𝘨𝘦𝘯𝘦𝘳𝘢𝘵𝘦𝘥 𝘈𝘯𝘥𝘳𝘰𝘪𝘥 𝘗𝘢𝘤𝘬𝘢𝘨𝘦 𝘯𝘢𝘮𝘦 𝘣𝘺 𝘳𝘦𝘢𝘤𝘵-𝘯𝘢𝘵𝘪𝘷𝘦-𝘤𝘭𝘪’𝘴 𝘪𝘯𝘪𝘵 𝘤𝘰𝘮𝘮𝘢𝘯𝘥.(𝘤𝘰𝘮.𝘳𝘯𝘛𝘚𝘨𝘪𝘵𝘭𝘢𝘣𝘊𝘐𝘊𝘋𝘌𝘹𝘢𝘮𝘱𝘭𝘦)

We don’t like these default Bundle Id/package name generated by React-native-cli’s init command, we want our app’s bundle/package name to be com.jsifiedbrains.rnTSgitlabCICDExample

Unfortunately the init command of react-native cli doesn’t provide an option to name the package any longer 😠.

That means now if we need to update Package name and Bundle Id, we have to do it manually.

iOS Setup - Rename Bundle Id and Code Signing Identity

If not already open, open our app’s iOS project in XCode by running below command:

$ open ios/rnTSgitlabCICDExample.xcodeproj

Open the project’s General settings and change the Bundle Identifier under Identities section to com.jsifiedbrains.rnTSgitlabCICDExample 👇

(click over image to zoom)

Also, while there, we would also like to set the Code Signing Identity as iOS Developer for Debug and iOS Distribution for Release version.
For this:
- select the project from Targets and go to Build Settings
- select All and Combined filters and search for “code signing”.
- select the Code Signing options for Debug and Release as below:

(click over image to zoom)

That’s it for iOS/xCode changes. Next we will rename the package name for Android version of the app.

Android Setup - Rename Package Name for Android

Open the rnTSgitlabCICDExample/android project in Android Studio. You can also open it in Android studio by running the below command from your terminal/command prompt with pwd being the project’s root folder.

$ open -a /Applications/Android\ Studio.app ./android

To rename package name, we have to change 4 files 👇

1.android/app/src/main/java/com/rnwithtypescript/MainActivity.java
2.android/app/src/main/java/com/rnwithtypescript/MainApplication.java
3. android/app/src/main/AndroidManifest.xml
4. android/app/build.gradle

(click over image to zoom)

(click over image to zoom)

(click over image to zoom)

Update Android Project Folder structure

Because we renamed our package from com.rnTSgitlabCICDExample to com.jsifiedbrains.rnTSgitlabCICDExample, its better we also update the folder structure under which MainApplication.java file resides to match with the package name.

Currently MainApplication.java file is under:

<<project root>>/android/app/src/main/java/com/rnTSgitlabCICDExample

Create a new folder named jsifiedbrains under <<project root>>/android/app/src/main/java/com/ and move the rnTSgitlabCICDExample folder to this new jsifiedbrains folder.

(This step, instead from Android Studio, I did from VS Code as its more easy to create folder from VS Code)

(click over image to zoom)

Once the package name has been changed in all the 4 files, and folder structure updated as above, build the project again from Android Studio to make sure is not breaking after these changes 👇

(click over image to zoom)

After all these changes, run the app again to make sure both iOS and Android versions are running good:

$ npx react-native run-ios
$ npx react-native run-android

Great, the app is working good. This confirms the changes we made for renaming app’s iOS Bundle Id and Android Package Name, and the folder structure of Android project, all are good and didn’t break anything.

In the next post, we will set up a new Gitlab repository and push this initial app code to it.

←Prev:Initialize new RN app┈ 🏠 ┈ Next: Gitlab repository→