# React-Native Enviornment setup (Windows)


# Reference
1. [React Native Doc](https://reactnative.dev/docs/environment-setup)
2. [Chocolatey](https://chocolatey.org/install)
3. [Nodejs](https://nodejs.org/zh-tw/download/)
4. [nvm](https://github.com/coreybutler/nvm-windows)

# Setup

Based on React Native documentation, it's better to use [Chocolatey](https://chocolatey.org/install) as package manager.

### Required packages
1. Chocolatey (not mandatory).
2. [Nodejs](https://nodejs.org/zh-tw/download/) - Latest version.
3. [nvm](https://github.com/coreybutler/nvm-windows) - node.js version control.

It's complicatd to install `Chocolatey`, you can refer to the doc for further instruction.

### Install Android Studio

1. Download [Android Studio](https://developer.android.com/studio)
2. Check the items:
- Android SDK
- Android SDK Platform
- Android Virtual Device

### Install the Android SDK
1. Open Android Studio, click **More Actions**
2. Check the items:
- Android SDK Platform 31
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image.
3. Click **SDK Tools** and the **Show Package Details**, expand the `Android SDK Build-Tools`.

### Config the ANDROID_HOME environment variable.

1. Open the Windows Control Panel.
2. Click on User Accounts, then click User Accounts again
3. Click on Change my environment variables
4. Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:


You can find path by entering `%LOCALAPPDATA%\Android\Sdk` inside the path bar.


5. Open powershell and enter `Get-ChildItem -Path Env:\` and check if `ANDROID_HOME` has been ad

### Add platform-tools to Path

- Open the Windows Control Panel.
- Click on User Accounts, then click User Accounts again
- Click on Change my environment variables
- Select the Path variable.
- Click Edit.
- Click New and add the path to platform-tools to the list.

You can find path by entering `%LOCALAPPDATA%\Android\Sdk\platform-tools` inside the path bar.

## Creating new app
In case you have installed React Native before, it's better to remove it by running `npm uninstall -g react-native-cli @react-native-community/cli`.

Once you have uninstalled it, we can try to build a new app by running `npx react-native init AwesomeProject`.

## Run Android emulator
When everything is done, open powershell and run as admin.

1. CD to `AwesomeProject` and cd to `android`.
2. Run `npx react-native start` to start Metro.
3. Run another command `npx react-native run-android` to start android.

## Fix errors

### `Task :app:installDebug FAILED`

> Reference: Can check this video for more information.
> [Task :app:installDebug FAILED](https://www.youtube.com/watch?v=sO040hgdnO0))

1. Open Android Studio and click `file`.
2. Click `Invalidate Caches...` to clear the chaches for emulator.
3. Try to create emulators.
- Click `Device Manager`.
- Click `Create Device`.
- Select devices and click `Next`.
- Once you have installed, you can run emulator by clicking triangle icon.

### `SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.`

1. Cd to project directory and create `local.properties` file.
2. Past this line (Replace the username of your own):
- MacOS: `sdk.dir = /Users/[USERNAME]/Library/Android/sdk`
- Windows: `sdk.dir = C:\\Users\\USERNAME\\AppData\\Local\\Android\\sdk`