{"id":493,"date":"2024-04-29T15:56:08","date_gmt":"2024-04-29T15:56:08","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=493"},"modified":"2024-05-06T15:12:54","modified_gmt":"2024-05-06T15:12:54","slug":"comprehensive-guide-to-creating-an-android-app-bundle-on-macos-for-react-native-apps","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/comprehensive-guide-to-creating-an-android-app-bundle-on-macos-for-react-native-apps\/","title":{"rendered":"Comprehensive Guide to Creating an Android App Bundle on macOS for React Native Apps"},"content":{"rendered":"\n<p>Preparing an Android App Bundle (AAB) on a Mac M1 with macOS Sonoma 14.4 involves a series of important steps. This guide provides a detailed walkthrough for developers using React Native, highlighting the creation and signing of a keystore file.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Steps for Creating an Android App Bundle<\/strong><\/h2>\n\n\n\n<p><strong>1. Install Required Tools:<br><\/strong>Ensure installations of Node.js, Watchman, JDK, and Android Studio are up to date. Set up the Android SDK and necessary environment variables on your Mac.\n\n\n\n<p>Follow the instructions in the article below to set up a React Native codebase on your macOS. It provides a step-by-step guide.\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"H8DU2vtA50\"><a href=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/\">No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/embed\/#?secret=11FLcgZ6Lo#?secret=H8DU2vtA50\" data-secret=\"H8DU2vtA50\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br><strong>2. Generate a Keystore Using Keytool:<br><\/strong>Open the terminal and run:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#keytool%20-genkey%20-v%20-keystore%20my-upload-key.keystore%20-alias%20my-key-alias%20-keyalg%20RSA%20-keysize%202048%20-validity%2010000\">\n                            <button class=\"copy-button\" data-label=\"keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Fill in the required information for the keystore including password, your name, organizational unit, organization name, city, state, and country code. Notably, I have chosen &#8216;Zahir1#&#8217; as the keystore password. This generates a <code>my-upload-key.keystore<\/code> file, which you should then move to your project&#8217;s <code>android\/app\/<\/code> directory.\n\n\n\n<p>3. <strong>Configure Gradle Properties:<\/strong>\n\n\n\n<p>Add your keystore details to <code>gradle.properties<\/code> in your android folder of your project:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore\nMYAPP_UPLOAD_KEY_ALIAS=my-key-alias\nMYAPP_UPLOAD_STORE_PASSWORD=Zahir1#\nMYAPP_UPLOAD_KEY_PASSWORD=Zahir1#<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#MYAPP_UPLOAD_STORE_FILE%3Dmy-upload-key.keystore%0AMYAPP_UPLOAD_KEY_ALIAS%3Dmy-key-alias%0AMYAPP_UPLOAD_STORE_PASSWORD%3DZahir1%23%0AMYAPP_UPLOAD_KEY_PASSWORD%3DZahir1%23\">\n                            <button class=\"copy-button\" data-label=\"MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore\nMYAPP_UPLOAD_KEY_ALIAS=my-key-alias\nMYAPP_UPLOAD_STORE_PASSWORD=Zahir1#\nMYAPP_UPLOAD_KEY_PASSWORD=Zahir1#\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>4. <strong>Set Up <code>android\/app\/build.gradle<\/code>:<\/strong>\n\n\n\n<p>Configure your build script by setting the <code>signingConfigs<\/code> under the android block for the release build:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">android {\n    ...\n    signingConfigs {\n        release {\n            storeFile file(MYAPP_UPLOAD_STORE_FILE)\n            storePassword MYAPP_UPLOAD_STORE_PASSWORD\n            keyAlias MYAPP_UPLOAD_KEY_ALIAS\n            keyPassword MYAPP_UPLOAD_KEY_PASSWORD\n        }\n    }\n    buildTypes {\n        release {\n            signingConfig signingConfigs.release\n            ...\n        }\n    }\n}<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#android%20%7B%0A%20%20%20%20...%0A%20%20%20%20signingConfigs%20%7B%0A%20%20%20%20%20%20%20%20release%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20storeFile%20file%28MYAPP_UPLOAD_STORE_FILE%29%0A%20%20%20%20%20%20%20%20%20%20%20%20storePassword%20MYAPP_UPLOAD_STORE_PASSWORD%0A%20%20%20%20%20%20%20%20%20%20%20%20keyAlias%20MYAPP_UPLOAD_KEY_ALIAS%0A%20%20%20%20%20%20%20%20%20%20%20%20keyPassword%20MYAPP_UPLOAD_KEY_PASSWORD%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20buildTypes%20%7B%0A%20%20%20%20%20%20%20%20release%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20signingConfig%20signingConfigs.release%0A%20%20%20%20%20%20%20%20%20%20%20%20...%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D\">\n                            <button class=\"copy-button\" data-label=\"android {\n    ...\n    signingConfigs {\n        release {\n            storeFile file(MYAPP_UPLOAD_STORE_FILE)\n            storePassword MYAPP_UPLOAD_STORE_PASSWORD\n            keyAlias MYAPP_UPLOAD_KEY_ALIAS\n            keyPassword MYAPP_UPLOAD_KEY_PASSWORD\n        }\n    }\n    buildTypes {\n        release {\n            signingConfig signingConfigs.release\n            ...\n        }\n    }\n}\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>5. <strong>Change version of app:<\/strong>\n\n\n\n<p>Update your apps <code>versionName<\/code> and <code>versionCode<\/code> in android\/app\/build.gradle:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">defaultConfig {\n  applicationId &quot;myappname&quot;\n  minSdkVersion rootProject.ext.minSdkVersion\n  targetSdkVersion rootProject.ext.targetSdkVersion\n  versionCode 1\n  versionName &quot;0.1.0&quot;\n}<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#defaultConfig%20%7B%0A%20%20applicationId%20%22myappname%22%0A%20%20minSdkVersion%20rootProject.ext.minSdkVersion%0A%20%20targetSdkVersion%20rootProject.ext.targetSdkVersion%0A%20%20versionCode%201%0A%20%20versionName%20%220.1.0%22%0A%7D\">\n                            <button class=\"copy-button\" data-label=\"defaultConfig {\n  applicationId &quot;myappname&quot;\n  minSdkVersion rootProject.ext.minSdkVersion\n  targetSdkVersion rootProject.ext.targetSdkVersion\n  versionCode 1\n  versionName &quot;0.1.0&quot;\n}\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>6. <strong>Build the Android App Bundle:<\/strong>\n\n\n\n<p>Navigate to your project\u2019s Android directory:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">cd android\n.\/gradlew clean\n.\/gradlew bundleRelease<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20android%0A.%2Fgradlew%20clean%0A.%2Fgradlew%20bundleRelease\">\n                            <button class=\"copy-button\" data-label=\"cd android\n.\/gradlew clean\n.\/gradlew bundleRelease\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This generates the AAB file in <code>android\/app\/build\/outputs\/bundle\/release\/app-release.aab<\/code>.\n\n\n\n<h2 class=\"wp-block-heading\"><strong>FAQs<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What is a keystore?<\/strong> A keystore is a binary file that holds a set of private keys used to sign your Android app. Signing your app verifies your identity as the developer and secures app updates.<\/li>\n\n\n\n<li><strong>Why choose AAB over APK?<\/strong> An AAB allows for more efficient distribution as it lets Google Play optimize the app&#8217;s APKs for the various device configurations users have, reducing app size and simplifying the release process.<\/li>\n\n\n\n<li><strong>How to securely manage keystore information?<\/strong> Never store passwords in plaintext within the codebase. Use environment variables or secure vault solutions to manage sensitive information securely.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Properly setting up and signing your Android App Bundle is essential for securing your app&#8217;s integrity and facilitating its distribution on the Google Play Store. This guide ensures your React Native app is well-prepared for release, covering everything from environment setup to keystore generation and Gradle configuration.\n","protected":false},"excerpt":{"rendered":"<p>Preparing an Android App Bundle (AAB) on a Mac M1 with macOS Sonoma 14.4 involves a series of important steps. This guide provides a detailed [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[62,17],"class_list":["post-493","post","type-post","status-publish","format-standard","hentry","category-react-native-app","tag-android-app-bundle","tag-mac-m1-m2-m3"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":7,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/493\/revisions"}],"predecessor-version":[{"id":529,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/493\/revisions\/529"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}