React Native Environment Setup/Work Space

Hey there, I will help you develop your first and foremost React app

React Native: a JavaScript framework developed by Facebook to help you build your app using the React library.

Setting up

1. Download node.js from the official website. The LTS version of node.js recommended

   

2. Download Any Java/JDK (Java development kit). I prefer Java from Oracle

   

3. Download Android Studio from the official website

   

after installing Android Studio. You need to set the path for Android Studio.

We need to do two things in Android Studio, there are

1. SDK manager:

   • Tick the boxes android API 34 tools and android 13 tiramisu 33 in platforms Tab and tap apply.

• Tick the boxes Android SDK build tools, CLI tools, Android emulator, Android SDK platform tools and Google Play Licence library must be ticked in SDK tools tab.

  

1. Virtual device manager:

   • open the virtual device manager and then click create a Device and choose the device and then click next

   • Download the image, preferably Tiramisu 33.

   • Click the play button to run the virtual device.

Windows

• Open settings/press Win key and then type Environment variables > path > new and set path.

Linux

1. To set the path for Android Studio on Linux, you'll need to update the PATH environment variable to include the Android SDK tools and platform-tools directories. Here's how to do it:

   1. Open the terminal and navigate to your home directory using the cd command.

       cd $HOME
      

   2. Open the .bashrc file using a text editor like nano or vim. You can use the following command to open the file with nano:

      Bash Script

       nano .bashrc
      

   3. Add the following lines to the end of the .bashrc file:

      Bash Script

       export ANDROID_HOME=~/Android/Sdk
       export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
      

      Make sure to replace ~/Android/Sdk with the actual path to your Android SDK directory.

   4. Save the .bashrc file and exit the text editor. For nano, press Ctrl+O to save and Ctrl+X to exit.

   5. Reload the .bashrc file to apply the changes using the following command:

      Bash Script

       source ~/.bashrc
      

Now, the Android SDK tools and platform tools should be available in your path to work effectively.

Mac

1. If you're using zsh as your default shell on macOS, you'll need to modify the .zshrc file instead of .bashrc. Here's how to set the path for Android Studio on macOS with zsh:

2. Open the Terminal application.

3. edit the .zshrc file using a text editor like Nano or Vim. You can use the following command to open the file with Vim

     vi ~/.zshrc
   

    export ANDROID_HOME=~/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
   

   1. Make sure to replace ~/Library/Android/sdk with the actual path to your Android SDK directory.

   2. Save the .zshrc file and exit the text editor. For nano, press Ctrl+O to save and Ctrl+X to exit.

   3. Reload the .zshrc file to apply the changes using the following command:

      zsh.

       source .zshrc
      

Code Editor

This is the last and most important step in development. Choose the best code editor that suits your workflow

I prefer Vscode for your React Native development Environment.

1. Install vscode from the official website

2. add a template plugin that helps you in lots of situations that was ES7+ React/Redux/React-Native snippets to download this just search this in the vscode plugin tab

Last words, this is the way I setup my development lab, and it helps you build more robust apps with React Native. For more interesting information about React Native and development, follow me 👍.