No More Platform Worries: One Codebase, Two Apps (iOS & Android)

No comments

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’re ready to unlock the potential of React Native and bring your app ideas to life.

Step 1: Install Node.js and Watchman

1. Open the Terminal app.

2. Install Node.js and Watchman by running:

brew install node
brew install watchman

Step 2: Install Xcode and Xcode Command Line Tools

1. Download Xcode from the Mac App Store.

2. Open Xcode to agree to the license agreement and install any additional required components.

3. Install the Xcode Command Line Tools by running the following command in the Terminal:

xcode-select --install

4. You may also need to configure the Xcode Command Line Tools to use the newly-installed version by running:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

5. Verify Xcode Command Line Tools

 
xcode-select -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

/Applications/Xcode.app/Contents/Developer

6. Test Xcode Command Line Tools

 
xcodebuild -version

This command should output the Xcode version along with the build version, confirming that xcodebuild and other command-line tools are accessible and functioning correctly.

Step 3 : Install rbenv and ruby-build

1. Open Terminal.

2. Install rbenv and ruby-build plugin using Homebrew:

 
brew install rbenv ruby-build

3. Initialize rbenv by adding it to your bash or zsh profile. For zsh (default on newer macOS versions), add the following line to your ~/.zshrc file. Type vim ~/.zshrc in your terminal and below line at the bottom.

eval "$(rbenv init - zsh)"

4. Restart your Terminal or run the following to apply the changes:

source ~/.zshrc

Step 4: Install Ruby

1. Install a newer version of Ruby. Check available versions with 

rbenv install -l

Based on the output of rbenv install -l, we have several Ruby versions available for installation. It’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, 3.3.0 appears to be the latest stable version of standard Ruby (MRI).

2. Install Ruby 3.3.0: In your Terminal, run the following command:

rbenv install 3.3.0

This process may take some time as it downloads and compiles Ruby.

3. Set Ruby 3.3.0 as the Default Version: Once the installation is complete, set Ruby 3.3.0 as the default version for your user account with:

rbenv global 3.3.0

4. Verify the Installation: Ensure that Ruby 3.3.0 is correctly set as the default version by running:

 
ruby -v

5. Rehash rbenv: It’s a good practice to run rbenv rehash after installing a new Ruby version or adding executables. This updates rbenv‘s shims so that it can properly redirect to the correct Ruby version and its associated gems:

rbenv rehash

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 CocoaPods or any other gems you need for your development work.

Step 5: Install CocoaPods

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. React Native uses it to manage iOS dependencies.

1. Install CocoaPods by running the following command in the Terminal:

sudo gem install cocoapods

Step 6: Create a New React Native Project

  1. Open the Terminal.
  2. Navigate to the directory where you want to create your project.
  3. Run the following command to create a new React Native project:
npx react-native init AwesomeProject

This command creates a new directory called AwesomeProject containing your new React Native project.

4. Above command will ask to setup CocoaPods. choose “Yes”: The setup process will continue by installing the necessary CocoaPods for your project’s iOS part. This step is crucial if you intend to work with or build the iOS app directly from Xcode.

Step 7: Run Your Project on IOS emulator

1. Navigate into your project directory:

cd AwesomeProject

2. To run your project on iOS, use:

npx react-native run-ios

This will open the iOS Simulator and launch your app.

Step 8: Run Your Project on Android Emulator:

1. Install Android Studio by following this article
Get Android Play Store Apps on Your Mac – No Complicated Hacks

2. Configure the ANDROID_HOME environment variable by adding the following lines to your .zshrc file. Type vim ~/.zshrc from your terminal and add below lines at the bottom:

export ANDROID_HOME=/Users/zahir/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

3. Verify that the emulator command is recognized by your terminal by typing:

emulator -list-avds

This command should list the available AVDs without any error.

4. Before running npx react-native run-android, make sure an Android emulator is running. You can start an emulator from Android Studio’s AVD Manager or by running the emulator command in the Terminal with the name of your AVD:

emulator -avd <Your_AVD_Name>

5. Install Java Development Kit (JDK):

You can install OpenJDK using Homebrew, a package manager for macOS, with the following command:

brew install openjdk

6. Creating a Symlink for the JDK:

For the system Java wrappers to find this JDK, symlink it with:

sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

7. Adding OpenJDK to your PATH

Next, we’ll add OpenJDK to your PATH to make its binaries (like java) easily accessible from the terminal. Append the following line to your ~/.zshrc file:

echo 'export PATH="/opt/homebrew/opt/openjdk/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

8. Verifying the Java Installation

 
java -version

Then, verify that JAVA_HOME is set correctly:

echo $JAVA_HOME

If JAVA_HOME is not showing the correct path, you may need to set it manually in your ~/.zshrc file. Add the following line:

export JAVA_HOME=$(/usr/libexec/java_home)

9. Running Your React Native App on Android

With Java installed and configured, try running your React Native app:

 
npx react-native run-android

Frequently Asked Questions (FAQs):

1. How can I check list of iPhone simulators in Mac

A: Open terminal and type:

 
xcrun simctl list

2. How can I activate a Mac simulators which is currently in Shutdown state.

A: From xcrun simctl list will list all the devices . Type xcrun simctl boot {DEVICE_ID}. If you want to activate iPhone 15 whose device id is ‘612CA415-A0C5-4B0E-8DEE-5E3D0CF36348’ type below command to activate:

xcrun simctl boot 612CA415-A0C5-4B0E-8DEE-5E3D0CF36348

3. How can I specify a device by its ID when using the npx react-native run-ios command:

A:

npx react-native run-ios --simulator="iPhone SE (3rd generation)"

4. Is there any command to check all my physical iOS devices:

A:

xcrun xctrace list devices | awk '/== Devices ==/,/== Simulators ==/{if (!/== Simulators ==/) print}'

Above command list your physical device name with its UUID. Run below command to run your react native app on a device.

 
npx react-native run-ios --udid YOUR_DEVICE_UUID

Replace YOUR_DEVICE_UUID with your devices UUID

5. If I have only one iOS device is connected, How can I run app on my connected iOS device

A: If you have only one physical iOS device connected to your Mac, run below command:

npx react-native run-ios --device

6. How can I check my React Native version :

A: Go to your terminal and type below command which will display your react native version

npx npm view react-native version
Tagged with , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *