React Native

 Install React Native Project





Step-by-Step Solution:

Step 1: Install Java Development Kit (JDK)

React Native requires the Java Development Kit (JDK) to build the Android app.
-Download and install the JDK from the official Oracle website or use AdoptOpenJDK:
-After installation, you need to configure the environment variables for Java.

Step 2: Set Up Java Environment Variables

On macOS, you can configure Java environment variables in your .bash_profile or .zshrc (depending on your shell).
Open your terminal and open your shell profile:

For bash:
nano ~/.bash_profile

For zsh (default on newer macOS versions):
nano ~/.zshrc

Add the following lines to set the Java environment variables (adjust the path to where JDK is installed):

export ANDROID_HOME=/Users/ionut/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$ANDROID_HOME/cmdline-tools/latest/bin:$PATH

Save the file and close the editor. Then, apply the changes:

For bash:
source ~/.bash_profile
For zsh:
source ~/.zshrc

Verify Java installation by running the following command:
java -version

Step 3: Install Android Studio and Set Up Android SDK

-Download and install Android Studio. This will install Android SDK, Android Emulator, and other necessary tools for React Native development.
-After installing Android Studio:
  • Open Android Studio.
  • Go to Preferences → Appearance & Behavior → System Settings → Android SDK.
  • Make sure you have the SDK Platform, Android SDK Tools, and Android SDK Build Tools installed.
  • Under the SDK Tools tab, make sure the following are installed:
    • Android Emulator
    • Android SDK Platform-Tools
    • Android SDK Build-Tools
-Set up Android Virtual Device (AVD) for the emulator:
  • Go to Tools → AVD Manager.
  • Click Create Virtual Device, select a device, and follow the instructions to create an emulator.
  • Once created, you can launch the emulator from here.

Set up ADB:

  • ADB (Android Debug Bridge) is necessary to run Android apps on your device or emulator. After installing Android Studio and the Android SDK, ADB should be available in your terminal. You can check this by running:
adb --version

Step 4: Verify the Environment Setup

After installing Java and Android Studio, you should run the React Native Doctor tool to verify that everything is set up correctly:

npx react-native doctor


Step 5: Run Your React Native Project. (Yeey!)

Recap of Actions:

  1. Install Java Development Kit (JDK) and configure your environment variables.
  2. Install Android Studio and set up the necessary SDKs and Android Emulator.
  3. Run npx react-native doctor to verify the setup.
  4. Run the app using npx react-native run-android.

Use the New Command to Create a Project
-npx @react-native-community/cli init youAppName
This will initialize your new React Native project using the recommended new tooling.

Continue With Project Setup

After this, the setup process should proceed normally. You can follow the rest of the steps:

Navigate to the project folder:
-cd youAppName

Run the app:

lLaunch the Metro bundler (packager) by using the following command in the terminal:

npx react-native start

For Android:

npx react-native run-android

For iOS (macOS only):
npx react-native run-ios












Comments

Post a Comment

Popular posts from this blog

Clone GitHub repository to SourceTree

Image
To clone a GitHub repository to SourceTree , follow these steps: Step 1: Copy the Repository URL Go to the GitHub (or any Git hosting platform) repository page. Click the green "Code" button. Copy the HTTPS URL (or SSH URL if you have SSH set up). Step 2: Open SourceTree Open SourceTree on your computer. Step 3: Clone the Repository Click on "Clone" from the top menu. In the "Source URL" field, paste the URL you copied. Choose a "Destination Path" (the folder where you want the repo to be saved). Click "Clone" .  
Read more

Commands for setting up and running a development environment

- yarn nx reset: (Resets the Nx cache, which can help resolve issues with stale builds); - yarn cache clean: (Clears Yarn’s cache to ensure that dependencies are freshly installed) - rm -rf node_modules: (Deletes the node_modules and .yarn directories to remove all installed dependencies and Yarn’s internal files) - yarn install: (Installs the project's dependencies from package.json); - yarn db:docker: (Likely starts a database using Docker (e.g., PostgreSQL, MySQL, or MongoDB); - yarn db:up: (Likely brings up the database container if it's using Docker Compose) - yarn db:dev-migrate: (Runs database migrations for the development environment) - yarn start:dev: (Starts the development server)
Read more