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
👆𝘕𝘰𝘵𝘦 𝘢𝘣𝘰𝘷𝘦 𝘵𝘩𝘦 𝘥𝘦𝘧𝘢𝘶𝘭𝘵 𝘨𝘦𝘯𝘦𝘳𝘢𝘵𝘦𝘥 𝘉𝘶𝘯𝘥𝘭𝘦 𝘐𝘥 (𝘰𝘳𝘨.𝘳𝘦𝘢𝘤𝘵.𝘯𝘢𝘵𝘪𝘷𝘦.𝘦𝘹𝘢𝘮𝘱𝘭𝘦.𝘳𝘯𝘛𝘚𝘨𝘪𝘵𝘭𝘢𝘣𝘊𝘐𝘊𝘋𝘌𝘹𝘢𝘮𝘱𝘭𝘦)
𝘢𝘯𝘥 𝘢𝘭𝘴𝘰 𝘯𝘰𝘵𝘦 𝘵𝘩𝘢𝘵 𝘵𝘩𝘦 𝘢𝘱𝘱 𝘷𝘦𝘳𝘴𝘪𝘰𝘯 𝘪𝘴 𝘪𝘯 𝘵𝘩𝘦 𝘧𝘰𝘳𝘮 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
👇
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:
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
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)
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 👇
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.