React Native Installation On Windows 11 & Troubleshooting Common Errors

You can also watch the YouTube video:

Installing React Native on Windows 11 & Troubleshooting Common Errors

Installing dependencies

You will need Node, the React Native command line interface, a JDK, and Android Studio.

1. Install Chocolatey

We need Chocolatey package manager to install node and jdk.

Run "Windows PowerShell" as administrator and type the code below:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

When the installation is completed, try:

choco

You should see text like down below:

Chocolatey v2.4.0
Please run 'choco -?' or 'choco <command> -?' for help menu.

Now we can install node and jdk:

choco install -y nodejs-lts microsoft-openjdk17

2. Install Android Studio

Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

• Android SDK
• Android SDK Platform
• Android Virtual Device
• If you are not already using Hyper-V: Performance (Intel ® HAXM) (See here for AMD or Hyper-V)

Then, click "Next" to install all of these components.

3. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 14 (UpsideDownCake) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "More Actions" button and select "SDK Manager".

Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 14 (UpsideDownCake) entry, then make sure the following items are checked:

• Android SDK Platform 34
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the Android SDK Build-Tools entry, then make sure that 34.0.0 is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

4. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

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 your path by typing the code below to your search.

%LOCALAPPDATA%\Android\Sdk

Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

1. Open powershell

2. Copy and paste Get-ChildItem -Path Env:\ into powershell

3. Verify ANDROID_HOME has been added

4. Add platform-tools to Path

5. Open the Windows Control Panel.

6. Click on User Accounts, then click User Accounts again

7. Click on Change my environment variables

8. Select the Path variable.

9. Click Edit.

10. Click New and add the path to platform-tools to the list.

The default location for this folder is:

%LOCALAPPDATA%\Android\Sdk\platform-tools

6. Creating Visual Device

We need API 34 virtual device to work with React Native to avoid possible errors. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the UpsideDownCake API Level 34 image and finish the process.

Now we can create react native app:

Note: If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

Create a new application:

npx @react-native-community/cli@latest init AwesomeProject

Starting our app:

npm start

Opening our app in android device:

npm run android

Possible Errors #1:

React Native Error : java.io.UncheckedIOException: Could not move temporary workspace

Solution:

Open your projects android folder in Android Studio and build your project once there.

Possible Errors #2:

Exclude Gradle from Windows Defender Protection

Solution:

Open "Windows Security" (You can search with start button)

Click "Virus & threat protection"

Click "Manage Settings" under "Virus & threat protection settings"

Click "Add or remove exclusions" under "Exclusions"

Add:

C:\Users[YourUserName].gradle

C:\Users[YourUserName]\AppData\Local\Android\Sdk

C:\Users[YourUserName]\AppData\Local\Google\AndroidStudio2024.2

Make sure the folders are correct for your computer before add.

Possible Errors #3:

Allow Long File Paths in Windows

Press Windows Button + R

Type "gpedit.msc"

Expand "Administrative Templates"

Expand "System"

Click "Filesystem"

Double Click "Enable Win32 long paths"

Make sure its enabled.

Solution:

Possible Errors #4:

Task :app:buildCMakeDebug[arm64-v8a] FAILED

Invalid escape sequence \U

Solution:

Open "/node_modules/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake" And replace the code with the code below.:

# Copyright (c) Meta Platforms, Inc. and affiliates.
#
# This source code is licensed under the MIT license found in the
# LICENSE file in the root directory of this source tree.

# This CMake file takes care of creating everything you need to build and link
# your C++ source code in a React Native Application for Android.
# You just need to call `project(<my_project_name>)` and import this file.
# Specifically this file will:
# - Take care of creating a shared library called as your project
# - Take care of setting the correct compile options
# - Include all the pre-built libraries in your build graph
# - Link your library against those prebuilt libraries so you can access JSI, Fabric, etc.
# - Link your library against any autolinked library.
# - Make sure ccache is used as part of the compilation process, if you have it installed.

cmake_minimum_required(VERSION 3.13)
set(CMAKE_VERBOSE_MAKEFILE on)

include(${CMAKE_CURRENT_LIST_DIR}/folly-flags.cmake)

# We configured the REACT_COMMON_DIR variable as it's commonly used to reference
# shared C++ code in other targets.
set(REACT_COMMON_DIR ${REACT_ANDROID_DIR}/../ReactCommon)

# If you have ccache installed, we're going to honor it.
find_program(CCACHE_FOUND ccache)
if(CCACHE_FOUND)
  set_property(GLOBAL PROPERTY RULE_LAUNCH_COMPILE ccache)
  set_property(GLOBAL PROPERTY RULE_LAUNCH_LINK ccache)
endif(CCACHE_FOUND)

set(BUILD_DIR ${PROJECT_BUILD_DIR})
if(CMAKE_HOST_WIN32)
        string(REPLACE "\\" "/" BUILD_DIR ${BUILD_DIR})
        string(REPLACE "\\" "/" REACT_ANDROID_DIR ${REACT_ANDROID_DIR})
endif()

if (PROJECT_ROOT_DIR)
# This empty `if` is just to silence a CMake warning and make sure the `PROJECT_ROOT_DIR`
# variable is defined if user need to access it.
endif ()

file(GLOB input_SRC CONFIGURE_DEPENDS
        ${REACT_ANDROID_DIR}/cmake-utils/default-app-setup/*.cpp
        ${BUILD_DIR}/generated/autolinking/src/main/jni/*.cpp)

add_library(${CMAKE_PROJECT_NAME} SHARED ${input_SRC})

target_include_directories(${CMAKE_PROJECT_NAME}
        PUBLIC
                ${CMAKE_CURRENT_SOURCE_DIR}
                ${PROJECT_BUILD_DIR}/generated/autolinking/src/main/jni)

target_compile_options(${CMAKE_PROJECT_NAME}
        PRIVATE
                -Wall
                -Werror
                # We suppress cpp #error and #warning to don't fail the build
                # due to use migrating away from
                # #include <react/renderer/graphics/conversions.h>
                # This can be removed for React Native 0.73
                -Wno-error=cpp
                -fexceptions
                -frtti
                -std=c++20
                -DLOG_TAG=\"ReactNative\"
                -DFOLLY_NO_CONFIG=1
)

# Prefab packages from React Native
find_package(ReactAndroid REQUIRED CONFIG)
add_library(jsi ALIAS ReactAndroid::jsi)
add_library(reactnative ALIAS ReactAndroid::reactnative)

find_package(fbjni REQUIRED CONFIG)
add_library(fbjni ALIAS fbjni::fbjni)

target_link_libraries(${CMAKE_PROJECT_NAME}
        fbjni                               # via 3rd party prefab
        jsi                                 # prefab ready
        reactnative                         # prefab ready
)

# We use an interface target to propagate flags to all the generated targets
# such as the folly flags or others.
add_library(common_flags INTERFACE)
target_compile_options(common_flags INTERFACE ${folly_FLAGS})

# If project is on RN CLI v9, then we can use the following lines to link against the autolinked 3rd party libraries.
if(EXISTS ${PROJECT_BUILD_DIR}/generated/autolinking/src/main/jni/Android-autolinking.cmake)
        include(${PROJECT_BUILD_DIR}/generated/autolinking/src/main/jni/Android-autolinking.cmake)
        target_link_libraries(${CMAKE_PROJECT_NAME} ${AUTOLINKED_LIBRARIES})
        foreach(autolinked_library ${AUTOLINKED_LIBRARIES})
            target_link_libraries(${autolinked_library} common_flags)
        endforeach()
endif()

# If project is running codegen at the app level, we want to link and build the generated library.
if(EXISTS ${PROJECT_BUILD_DIR}/generated/source/codegen/jni/CMakeLists.txt)
        add_subdirectory(${PROJECT_BUILD_DIR}/generated/source/codegen/jni/ codegen_app_build)
        get_property(APP_CODEGEN_TARGET DIRECTORY ${PROJECT_BUILD_DIR}/generated/source/codegen/jni/ PROPERTY BUILDSYSTEM_TARGETS)
        target_link_libraries(${CMAKE_PROJECT_NAME} ${APP_CODEGEN_TARGET})
        target_link_libraries(${APP_CODEGEN_TARGET} common_flags)

        # We need to pass the generated header and module provider to the OnLoad.cpp file so
        # local app modules can properly be linked.
        string(REGEX REPLACE "react_codegen_" "" APP_CODEGEN_HEADER "${APP_CODEGEN_TARGET}")
        target_compile_options(${CMAKE_PROJECT_NAME}
                PRIVATE
                -DREACT_NATIVE_APP_CODEGEN_HEADER="${APP_CODEGEN_HEADER}.h"
                -DREACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER="react/renderer/components/${APP_CODEGEN_HEADER}/ComponentDescriptors.h"
                -DREACT_NATIVE_APP_COMPONENT_REGISTRATION=${APP_CODEGEN_HEADER}_registerComponentDescriptorsFromCodegen
                -DREACT_NATIVE_APP_MODULE_PROVIDER=${APP_CODEGEN_HEADER}_ModuleProvider
        )
endif()

# We set REACTNATIVE_MERGED_SO so libraries/apps can selectively decide to depend on either libreactnative.so
# or link against a old prefab target (this is needed for React Native 0.76 on).
set(REACTNATIVE_MERGED_SO true)