Learners Store

Steps to run basic android app in MacBook .

STEP 1 : Install Android Studio

Android apps require Android Studio to run the app. We can download Android studio from here : https://developer.android.com/studio.

During installation, make sure to install Android SDK, Android Virtual Device (AVD) and Android Emulator. (accept all SDK licenses).

To add Android SDK to PATH, run the following command

nano ~/.zprofile

After that add the following lines.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH

Now save it by using the following command

source ~/.zprofile

STEP 2 : Install Node.js (If it is not installed)

We can use Homebrew (Package manager for mac os) to install node. Run the following command in terminal to install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After that run the following command

brew update

Now install Node.js using Homebrew using the following command

brew install node

the above command will install node, npm and npx. We can check their versions with the following commands

node -v // v24.4.1
npm -v // 11.4.2
npx -v //11.4.2

STEP 3 : Install Java Development Kit (JDK)

React Native for Android needs Java Development Kit. We can install it using Homebrew. Run the following command to install JDK (java 17)

brew install openjdk@17

After installation, link it with the following command

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

Add JDK to shell command using the following command.

nano ~/.zshrc

Now add these lines

export JAVA_HOME="/opt/homebrew/opt/openjdk@17"
export PATH="$JAVA_HOME/bin:$PATH"

Save it and Exit. after that run the following command to apply the changes.

source ~/.zshrc

Verify Java is setup correctly or not by using the following command

java -version

STEP 4 : Create a New React Native App :

Run the following command to create a new React Native App

npx @react-native-community/cli init SampleApp

Now navigate ‘SampleApp’ using the following command

cd SampleApp

Finally run the App using the following command

npx react-native run-android

How to find outdated packages/libraries in the project – ReactJS ?

To find outdated packages / libraries in a project we need to run the following command if we are using npm + package-lock.json

npm outdated

If our project uses yarn + yarn.lock, then we need to run the following command to find outdated packages / libraries in a project.

yarn outdated

“fly” cannot be opened because the developer cannot be verified.

To fix this error we need to allow fly in “System Settings” > “Privacy & Security”.

If you are trying to login using fly then, copy the “fly” file and paste it in your project at root level (same place where package.json is there). Now try to login again with fly command. Now you are able to login.

How to convert first letter of the word to UpperCase in JavaScript ?

We can convert the first letter of the word to uppercase by using chatAt and slice methods as follows.

let word = "hello";

console.log(word.charAt(0).toUpperCase() + word.slice(1));

Output: Hello

Here, charAt(0).toUpperCase will convert the first letter of the word to uppercase and word.slice(1) will return the remaining characters of the word except first letter.

How to call Multiple Apis on the same page or component using createBrowserRouter ?

If we want to call multiple APIs when loading a particular page or component using createBrowserRouter, the best place to do that is in the loader function of the route.

Genarally we use createBrowserRouter as follows.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Dashboard from 'Components/Dashboard';
import dashboardLoader from 'loaders/dashboardLoader';


const App = () => {
     
    const router = createBrowserRouter([
         {
          path: "/dashboard",
          element: <Dashboard />,
          loader: dashboardLoader,
         }
   ])

    return <RouterProvider router={router} />
}

Here in the above example, the best place to call multiple APIs is dashboardLoader. In the similar way we use a loader of any specific page where we will call required number of API calls.