{"id":287,"date":"2024-03-06T19:29:08","date_gmt":"2024-03-06T19:29:08","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=287"},"modified":"2024-05-01T08:11:58","modified_gmt":"2024-05-01T08:11:58","slug":"react-native-build-ios-android-mac","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/","title":{"rendered":"No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)"},"content":{"rendered":"\n<p>Building mobile apps is about to get a whole lot more exciting! Imagine crafting just one codebase that will magically transform into apps for iPhones and Androids. With your trusty Apple Silicon Mac, you&#8217;re ready to unlock the potential of React Native and bring your app ideas to life.\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Install Node.js and Watchman<\/h2>\n\n\n\n<p>1. Open the Terminal app.\n\n\n\n<p>2. Install Node.js and Watchman by running:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">brew install node\nbrew install watchman<\/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#brew%20install%20node%0Abrew%20install%20watchman\">\n                            <button class=\"copy-button\" data-label=\"brew install node\nbrew install watchman\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Install Xcode and Xcode Command Line Tools<\/h2>\n\n\n\n<p>1. Download Xcode from the Mac App Store.\n\n\n\n<p>2. Open Xcode to agree to the license agreement and install any additional required components.\n\n\n\n<p>3. Install the Xcode Command Line Tools by running the following command in the Terminal:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">xcode-select --install<\/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#xcode-select%20--install\">\n                            <button class=\"copy-button\" data-label=\"xcode-select --install\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>4. You may also need to configure the Xcode Command Line Tools to use the newly-installed version by running:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">sudo xcode-select -s \/Applications\/Xcode.app\/Contents\/Developer<\/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#sudo%20xcode-select%20-s%20%2FApplications%2FXcode.app%2FContents%2FDeveloper\">\n                            <button class=\"copy-button\" data-label=\"sudo xcode-select -s \/Applications\/Xcode.app\/Contents\/Developer\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>5. Verify Xcode Command Line Tools\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">xcode-select -p<\/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#xcode-select%20-p\">\n                            <button class=\"copy-button\" data-label=\"xcode-select -p\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This command prints the path to the active developer directory. If Xcode and its command-line tools are correctly set up, it should return something like \n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\/Applications\/Xcode.app\/Contents\/Developer<\/mark>\n\n\n\n<p>\n\n\n\n<p>6. Test Xcode Command Line Tools\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">xcodebuild -version<\/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#xcodebuild%20-version\">\n                            <button class=\"copy-button\" data-label=\"xcodebuild -version\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This command should output the Xcode version along with the build version, confirming that <code>xcodebuild<\/code> and other command-line tools are accessible and functioning correctly.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3 : Install rbenv and ruby-build<\/h2>\n\n\n\n<p>1. Open Terminal.\n\n\n\n<p>2. Install <code>rbenv<\/code> and <code>ruby-build<\/code> plugin using Homebrew:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">brew install rbenv ruby-build<\/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#brew%20install%20rbenv%20ruby-build\">\n                            <button class=\"copy-button\" data-label=\"brew install rbenv ruby-build\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>3. Initialize <code>rbenv<\/code> by adding it to your <code>bash<\/code> or <code>zsh<\/code> profile. For <code>zsh<\/code> (default on newer macOS versions), add the following line to your <code>~\/.zshrc<\/code> file. Type <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">vim <code>~\/.zshrc<\/code><\/mark> in your terminal and below line at the bottom.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">eval &quot;$(rbenv init - zsh)&quot;<\/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#eval%20%22%24%28rbenv%20init%20-%20zsh%29%22\">\n                            <button class=\"copy-button\" data-label=\"eval &quot;$(rbenv init - zsh)&quot;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>4. Restart your Terminal or run the following to apply the changes:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">source ~\/.zshrc<\/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#source%20~%2F.zshrc\">\n                            <button class=\"copy-button\" data-label=\"source ~\/.zshrc\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Install Ruby<\/h2>\n\n\n\n<p>1. Install a newer version of Ruby.  Check available versions with \n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">rbenv install -l<\/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#rbenv%20install%20-l\">\n                            <button class=\"copy-button\" data-label=\"rbenv install -l\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"818\" height=\"350\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-2.png\" alt=\"\" class=\"wp-image-289\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-2.png 818w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-2-300x128.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-2-768x329.png 768w\" sizes=\"auto, (max-width: 818px) 100vw, 818px\" \/><\/figure>\n\n\n\n<p>Based on the output of <code>rbenv install -l<\/code>, we have several Ruby versions available for installation. It&#8217;s generally a good idea to use the latest stable version unless you have a specific requirement for an older version. As of the versions listed, <code>3.3.0<\/code> appears to be the latest stable version of standard Ruby (MRI).\n\n\n\n<p>2. <strong>Install Ruby 3.3.0<\/strong>: In your Terminal, run the following command:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-10\">rbenv install 3.3.0<\/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#rbenv%20install%203.3.0\">\n                            <button class=\"copy-button\" data-label=\"rbenv install 3.3.0\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This process may take some time as it downloads and compiles Ruby.\n\n\n\n<p>3. <strong>Set Ruby 3.3.0 as the Default Version<\/strong>: Once the installation is complete, set Ruby 3.3.0 as the default version for your user account with:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-11\">rbenv global 3.3.0<\/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#rbenv%20global%203.3.0\">\n                            <button class=\"copy-button\" data-label=\"rbenv global 3.3.0\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>4. <strong>Verify the Installation<\/strong>: Ensure that Ruby 3.3.0 is correctly set as the default version by running:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-12\">ruby -v<\/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#ruby%20-v\">\n                            <button class=\"copy-button\" data-label=\"ruby -v\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>5. <strong>Rehash <code>rbenv<\/code><\/strong>: It&#8217;s a good practice to run <code>rbenv rehash<\/code> after installing a new Ruby version or adding executables. This updates <code>rbenv<\/code>&#8216;s shims so that it can properly redirect to the correct Ruby version and its associated gems:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-13\">rbenv rehash<\/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#rbenv%20rehash\">\n                            <button class=\"copy-button\" data-label=\"rbenv rehash\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>After completing these steps, you should have Ruby 3.3.0 installed and set as the default version on your system. You can now proceed to install <strong>CocoaPods<\/strong> or any other gems you need for your development work.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Install CocoaPods<\/h2>\n\n\n\n<p>CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. React Native uses it to manage iOS dependencies.\n\n\n\n<p>1. Install CocoaPods by running the following command in the Terminal:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-14\">sudo gem install cocoapods<\/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#sudo%20gem%20install%20cocoapods\">\n                            <button class=\"copy-button\" data-label=\"sudo gem install cocoapods\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Create a New React Native Project<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Terminal.<\/li>\n\n\n\n<li>Navigate to the directory where you want to create your project.<\/li>\n\n\n\n<li>Run the following command to create a new React Native project:<\/li>\n<\/ol>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-15\">npx react-native init AwesomeProject<\/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#npx%20react-native%20init%20AwesomeProject\">\n                            <button class=\"copy-button\" data-label=\"npx react-native init AwesomeProject\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This command creates a new directory called <code>AwesomeProject<\/code> containing your new React Native project.\n\n\n\n<p>4. Above command will ask to setup CocoaPods.<strong> choose &#8220;Yes&#8221;<\/strong>: The setup process will continue by installing the necessary CocoaPods for your project&#8217;s iOS part. This step is crucial if you intend to work with or build the iOS app directly from Xcode.\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"447\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-3-1024x447.png\" alt=\"\" class=\"wp-image-290\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-3-1024x447.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-3-300x131.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-3-768x335.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-3-1536x670.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-3-2048x893.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Run Your Project on IOS emulator<\/h2>\n\n\n\n<p>1. Navigate into your project directory:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-16\">cd AwesomeProject<\/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%20AwesomeProject\">\n                            <button class=\"copy-button\" data-label=\"cd AwesomeProject\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>2. To run your project on iOS, use:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-17\">npx react-native run-ios<\/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#npx%20react-native%20run-ios\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-ios\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-4-1024x550.png\" alt=\"\" class=\"wp-image-291\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-4-1024x550.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-4-300x161.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-4-768x412.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-4-1536x825.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-4-2048x1100.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>This will open the iOS Simulator and launch your app.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Run Your Project on Android Emulator: <\/h2>\n\n\n\n<p>1. Install <strong>Android Studio<\/strong> by following this article\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=\"VsPvAoC5Bb\"><a href=\"https:\/\/zahiralam.com\/blog\/get-android-play-store-apps-on-your-mac-no-complicated-hacks\/\">Get Android Play Store Apps on Your Mac \u2013 No Complicated Hacks<\/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;Get Android Play Store Apps on Your Mac \u2013 No Complicated Hacks&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/get-android-play-store-apps-on-your-mac-no-complicated-hacks\/embed\/#?secret=w159uqhjfS#?secret=VsPvAoC5Bb\" data-secret=\"VsPvAoC5Bb\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>2. Configure the <code>ANDROID_HOME<\/code> environment variable by adding the following lines to your .<code>zshrc<\/code> file. Type <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">vim ~\/.zshrc<\/mark> from your terminal and add below lines at the bottom:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-18\">export ANDROID_HOME=\/Users\/zahir\/Library\/Android\/sdk\nexport PATH=$PATH:$ANDROID_HOME\/emulator\nexport PATH=$PATH:$ANDROID_HOME\/platform-tools<\/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#export%20ANDROID_HOME%3D%2FUsers%2Fzahir%2FLibrary%2FAndroid%2Fsdk%0Aexport%20PATH%3D%24PATH%3A%24ANDROID_HOME%2Femulator%0Aexport%20PATH%3D%24PATH%3A%24ANDROID_HOME%2Fplatform-tools\">\n                            <button class=\"copy-button\" data-label=\"export ANDROID_HOME=\/Users\/zahir\/Library\/Android\/sdk\nexport PATH=$PATH:$ANDROID_HOME\/emulator\nexport PATH=$PATH:$ANDROID_HOME\/platform-tools\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>3. <strong>Verify that the <code>emulator<\/code> command is recognized<\/strong> by your terminal by typing:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-19\">emulator -list-avds<\/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#emulator%20-list-avds\">\n                            <button class=\"copy-button\" data-label=\"emulator -list-avds\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This command should list the available AVDs without any error.\n\n\n\n<p>\n\n\n\n<p>4. Before running <code>npx react-native run-android<\/code>, make sure an Android emulator is running. You can start an emulator from Android Studio&#8217;s AVD Manager or by running the <code>emulator<\/code> command in the Terminal with the name of your AVD:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-20\">emulator -avd &lt;Your_AVD_Name&gt;<\/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#emulator%20-avd%20%3CYour_AVD_Name%3E\">\n                            <button class=\"copy-button\" data-label=\"emulator -avd &lt;Your_AVD_Name&gt;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>5. <strong>Install Java Development Kit (JDK): <\/strong>\n\n\n\n<p>You can install OpenJDK using <a href=\"https:\/\/brew.sh\/\">Homebrew<\/a>, a package manager for macOS, with the following command:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-21\">brew install openjdk<\/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#brew%20install%20openjdk\">\n                            <button class=\"copy-button\" data-label=\"brew install openjdk\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-5-1024x585.png\" alt=\"\" class=\"wp-image-293\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-5-1024x585.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-5-300x171.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-5-768x439.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-5.png 1382w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>6. <strong>Creating a Symlink for the JDK:<\/strong>\n\n\n\n<p>For the system Java wrappers to find this JDK, symlink it with:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-22\">sudo ln -sfn \/opt\/homebrew\/opt\/openjdk\/libexec\/openjdk.jdk \/Library\/Java\/JavaVirtualMachines\/openjdk.jdk<\/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#sudo%20ln%20-sfn%20%2Fopt%2Fhomebrew%2Fopt%2Fopenjdk%2Flibexec%2Fopenjdk.jdk%20%2FLibrary%2FJava%2FJavaVirtualMachines%2Fopenjdk.jdk\">\n                            <button class=\"copy-button\" data-label=\"sudo ln -sfn \/opt\/homebrew\/opt\/openjdk\/libexec\/openjdk.jdk \/Library\/Java\/JavaVirtualMachines\/openjdk.jdk\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>7. <strong>Adding OpenJDK to your PATH<\/strong>\n\n\n\n<p>Next, we&#8217;ll add OpenJDK to your <code>PATH<\/code> to make its binaries (like <code>java<\/code>) easily accessible from the terminal. Append the following line to your <code>~\/.zshrc<\/code> file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-23\">echo &#039;export PATH=&quot;\/opt\/homebrew\/opt\/openjdk\/bin:$PATH&quot;&#039; &gt;&gt; ~\/.zshrc\nsource ~\/.zshrc<\/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#echo%20%27export%20PATH%3D%22%2Fopt%2Fhomebrew%2Fopt%2Fopenjdk%2Fbin%3A%24PATH%22%27%20%3E%3E%20~%2F.zshrc%0Asource%20~%2F.zshrc\">\n                            <button class=\"copy-button\" data-label=\"echo &#039;export PATH=&quot;\/opt\/homebrew\/opt\/openjdk\/bin:$PATH&quot;&#039; &gt;&gt; ~\/.zshrc\nsource ~\/.zshrc\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>8. <strong>Verifying the Java Installation<\/strong>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-24\">java -version<\/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#java%20-version\">\n                            <button class=\"copy-button\" data-label=\"java -version\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Then, verify that <code>JAVA_HOME<\/code> is set correctly:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-25\">echo $JAVA_HOME<\/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#echo%20%24JAVA_HOME\">\n                            <button class=\"copy-button\" data-label=\"echo $JAVA_HOME\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>If <code>JAVA_HOME<\/code> is not showing the correct path, you may need to set it manually in your <code>~\/.zshrc<\/code> file. Add the following line:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-26\">export JAVA_HOME=$(\/usr\/libexec\/java_home)<\/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#export%20JAVA_HOME%3D%24%28%2Fusr%2Flibexec%2Fjava_home%29\">\n                            <button class=\"copy-button\" data-label=\"export JAVA_HOME=$(\/usr\/libexec\/java_home)\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>9. <strong>Running Your React Native App on Android<\/strong>\n\n\n\n<p>With Java installed and configured, try running your React Native app:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-27\">npx react-native run-android<\/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#npx%20react-native%20run-android\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-android\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-6-1024x527.png\" alt=\"\" class=\"wp-image-295\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-6-1024x527.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-6-300x154.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-6-768x395.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-6-1536x790.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-6-2048x1053.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs):<\/h2>\n\n\n\n<p>1. How can I check list of iPhone simulators in Mac\n\n\n\n<p>A: Open terminal and type:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-28\">xcrun simctl list<\/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#xcrun%20simctl%20list\">\n                            <button class=\"copy-button\" data-label=\"xcrun simctl list\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>2. How can I activate a Mac simulators which is currently in Shutdown state.\n\n\n\n<p>A: From <code>xcrun simctl list<\/code> will list all the devices . Type xcrun simctl boot {DEVICE_ID}. If you want to activate iPhone 15 whose device id is &#8216;612CA415-A0C5-4B0E-8DEE-5E3D0CF36348&#8217; type below command to activate:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-29\">xcrun simctl boot 612CA415-A0C5-4B0E-8DEE-5E3D0CF36348<\/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#xcrun%20simctl%20boot%20612CA415-A0C5-4B0E-8DEE-5E3D0CF36348\">\n                            <button class=\"copy-button\" data-label=\"xcrun simctl boot 612CA415-A0C5-4B0E-8DEE-5E3D0CF36348\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"158\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-8-1024x158.png\" alt=\"\" class=\"wp-image-372\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-8-1024x158.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-8-300x46.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-8-768x119.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-8-1536x237.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/03\/image-8.png 1800w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>3. How can I specify a device by its ID when using the <code>npx react-native run-ios<\/code> command:\n\n\n\n<p>A:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-30\">npx react-native run-ios --simulator=&quot;iPhone SE (3rd generation)&quot;<\/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#npx%20react-native%20run-ios%20--simulator%3D%22iPhone%20SE%20%283rd%20generation%29%22\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-ios --simulator=&quot;iPhone SE (3rd generation)&quot;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>4. Is there any command to check all my physical iOS devices:\n\n\n\n<p>A:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-31\">xcrun xctrace list devices | awk &#039;\/== Devices ==\/,\/== Simulators ==\/{if (!\/== Simulators ==\/) print}&#039;<\/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#xcrun%20xctrace%20list%20devices%20%7C%20awk%20%27%2F%3D%3D%20Devices%20%3D%3D%2F%2C%2F%3D%3D%20Simulators%20%3D%3D%2F%7Bif%20%28%21%2F%3D%3D%20Simulators%20%3D%3D%2F%29%20print%7D%27\">\n                            <button class=\"copy-button\" data-label=\"xcrun xctrace list devices | awk &#039;\/== Devices ==\/,\/== Simulators ==\/{if (!\/== Simulators ==\/) print}&#039;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"72\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/04\/image-1024x72.png\" alt=\"\" class=\"wp-image-489\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/04\/image-1024x72.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/04\/image-300x21.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/04\/image-768x54.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/04\/image.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Above command list your physical device name with its UUID. Run below command to run your react native app on a device.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-32\">npx react-native run-ios --udid YOUR_DEVICE_UUID<\/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#npx%20react-native%20run-ios%20--udid%20YOUR_DEVICE_UUID\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-ios --udid YOUR_DEVICE_UUID\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Replace YOUR_DEVICE_UUID with your devices UUID\n\n\n\n<p>5. If I have only one iOS device is connected, How can I run app on my connected iOS device \n\n\n\n<p>A: If you have only one physical iOS device connected to your Mac, run below command:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-33\">npx react-native run-ios --device<\/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#npx%20react-native%20run-ios%20--device\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-ios --device\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>6. How can I check my React Native version :\n\n\n\n<p>A: Go to your terminal and type below command which will display your react native version\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-34\">npx npm view react-native version<\/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#npx%20npm%20view%20react-native%20version\">\n                            <button class=\"copy-button\" data-label=\"npx npm view react-native version\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Building mobile apps is about to get a whole lot more exciting! Imagine crafting just one codebase that will magically transform into apps for iPhones [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[50,28,51,17],"class_list":["post-287","post","type-post","status-publish","format-standard","hentry","category-react-native","tag-android-app","tag-apple-silicon","tag-ios-app","tag-mac-m1-m2-m3"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/287","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=287"}],"version-history":[{"count":17,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/287\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}