How to preview react native app from vscode? - arnabutilities/rbac-frontend GitHub Wiki

To preview a React Native app from Visual Studio Code (VSCode), you need to set up your development environment and use an emulator or physical device. Here’s a step-by-step guide to help you get started:

Prerequisites

1. Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.
2. React Native CLI: Install the React Native CLI.
3. Android Studio (for Android development) or Xcode (for iOS development on macOS).
4. VSCode: Ensure you have Visual Studio Code installed.

Steps to Preview a React Native App from VSCode

1. Install Node.js

• Download and install Node.js from nodejs.org.

2. Install React Native CLI

• Open a terminal or command prompt and run:

  npm install -g react-native-cli
  

3. Create a New React Native Project

• In your terminal or command prompt, run:

  npx react-native init MyReactNativeApp
  cd MyReactNativeApp
  

4. Install VSCode Extensions

• Open Visual Studio Code.
• Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
• Install the following extensions:
  • React Native Tools: This extension provides a development environment for React Native.
  • ESLint: To lint your JavaScript code.

5. Set Up Your Development Environment

For Android Development

1. Install Android Studio:

   • Download and install Android Studio from developer.android.com.
   • During installation, make sure to install the Android SDK, Android SDK Platform, and Android Virtual Device.

2. Configure Environment Variables:

   • Set the ANDROID_HOME environment variable to the Android SDK path.
   • Add the following to your PATH variable:

     %ANDROID_HOME%\tools
     %ANDROID_HOME%\platform-tools
     

3. Create an Android Virtual Device (AVD):

   • Open Android Studio.
   • Go to the AVD Manager and create a new virtual device.

For iOS Development (macOS only)

1. Install Xcode:

   • Download and install Xcode from the Mac App Store.
   • Open Xcode and install any additional components if prompted.

2. Install Xcode Command Line Tools:

   • Open a terminal and run:

     xcode-select --install
     

6. Start the React Native Metro Bundler

• Open VSCode and open your React Native project.
• Open a terminal in VSCode (you can open it from the Terminal menu or use the shortcut Ctrl+`).
• Run the following command to start the Metro bundler:

  npx react-native start
  

7. Run Your React Native App

For Android

• In a new terminal window (or split terminal) in VSCode, run:

  npx react-native run-android
  

• This will build the app and launch it on the Android emulator or a connected Android device.

For iOS (macOS only)

• In a new terminal window (or split terminal) in VSCode, run:

  npx react-native run-ios
  

• This will build the app and launch it on the iOS simulator or a connected iOS device.

Additional Tips

• Debugging: Use the React Native Tools extension for debugging. You can set breakpoints, inspect variables, and more.
• Hot Reloading: Enable hot reloading in the React Native app by shaking the device (or emulator) and selecting "Enable Hot Reloading" from the menu.

By following these steps, you should be able to preview and debug your React Native app directly from Visual Studio Code.