Execute the React Native application on Windows by using the command npx react-native run-windows

I recently created a test application using React Native by running 

npx react-native init Test --template react-native-template-typescript
(https://reactnative.dev/docs/typescript). Everything seemed to be working fine, but I encountered an issue where the TypeScript template could not be found (view log as text | view log as pictures).
Next, I navigated into the project directory with cd Test, and followed the documentation to run 
npx react-native-windows-init --overwrite
as detailed in the documentation. This step was successful, you can check the log here.
However, when attempting to execute npx react-native run-windows as instructed, I received an error message stating 
Build failed with message Building Solution - error code 1. Check your build configuration
(log here or picture)

Actions taken:

  • I tried running the rnw-dependencies.ps1 script both directly on my PC and via 
    Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')
    in an elevated PowerShell session. Although the script resulted in a large error message during the installation of 
    Compilers, build tools, SKDs and Visual Studio
    , after installing all components manually, the script runs without errors. However, the build error still persists.
  • I installed the 
    MSVC v143 - VS 2022 C++-x64/x86-Buildtools (latest)
    component within Visual Studio
  • I also installed the Windows 10 SDK (10.0.19041.0)

My current setup includes:

  • Operating System: Windows 10
  • nvm Version: v1.1.7
  • Node.js Versions Tried: v14.18.1 (current), v17.5.0, v12.18.3 (both unsuccessful)
  • Visual Studio Community Version: 2022 - 17.1.0 (components and workloads are visible here)
  • npx Version: v6.14.15
  • react-native-cli Version: v2.0.1
  • yarn Version: v1.22.15
typescriptwindowsreact-nativedevelopment-environment

Answer №1

After troubleshooting, I discovered that the issue was resolved by downloading and installing Visual Studio 2019 instead of the 2022 version. It seems that the 2022 version is not compatible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Unlock the power of NGXS by leveraging the raw state values

I'm having trouble locating an example in the NGXS documentation that demonstrates how to properly type the state object. Specifically, I am looking for guidance on typing the return value of the snapshot method of Store. For instance: this.store.sn ...

angulartypescriptngxs

How can TypeScript be forced to output a specific data type?

I've created a generic "fetcher" function that is designed to handle different types of entities. However, I'm encountering an issue where TypeScript is inferring the return type based on all possible conditions within the function. Is there a w ...

typescript

Inquiry about how TypeScript handles object property references when passed into functions

As a newcomer to TypeScript, I am exploring the creation of a range slider with dual handles using D3.js. I have developed a simple class for managing the slider objects: export class VerticalRangeSlider{ private sliderContainer: d3.Selection<SVGG ...

javascripttypescriptd3.js

Encountering a 405 Error While Trying to Detect Location in Angular 7

I encountered an error 405 (Method Not Allowed) when trying to detect the location. Service public fetchWeatherDataByCoordinates(coordinates: ICoordinates): void { console.log("problem here") this.selectedLocationId.next(this.currentCoordinates ...

angulartypescript

Object data is not being received by the defaultValue in React Hook Form

I am currently utilizing React Hook Form to facilitate the process of editing/updating data. I retrieve my data from zustand with a value type of any, and then proceed to save it as the defaultValue in React Hook Form. However, when attempting to acquire v ...

typescriptnext.jsprismareact-hook-formzustand

having trouble retrieving 200 status code from Angular server response

Objective: I need to make certain changes to the record locally if the server responds with a 200 code. Problem: I am unable to retrieve the response code or access the 'message' attribute. This is the server response I receive from the HTTP ca ...

javascriptnode.jsangulartypescriptmongodb

The value returned by elementRef.current?.clientHeight is not the correct height of the element

I've encountered a peculiar issue with my code where the reported height of an element does not match its actual size. The element is supposed to be 1465px tall, but it's showing up as 870px. I suspect that this discrepancy might be due to paddin ...

reactjstypescript

Will the async pipe activate onPush change detection in Angular?

I have searched various sources for the question above, but I am finding conflicting answers. For example, on Angular University's website, it is mentioned that change detection is triggered when the async pipe receives a new observable value. However ...

angulartypescriptangular-pipeangular2-changedetection

What is the procedure for setting up the typings folder in AngularJS 1.5 with TypeScript?

I'm currently working on a project using AngularJS 1.5 and TypeScript. I need to install the "angularjs/angular.d.ts" and "angularjs/angular-route.d.ts" files. Despite installing tsd globally, when I run the command "tsd install angular," I receive a ...

angularjstypescriptnpm

Having trouble disabling an ESLint rule for ESLint, TypeScript, Vue, and WebPack Encore?

I've been delving into Webpack Encore and ESLint issues for quite some time now, but unfortunately, I haven't been able to find a solution to my problem. Specifically, I've been trying to change or disable certain TypeScript-ESLint rules, b ...

typescriptvue.jswebpackeslintwebpack-encore

What are the reasons for not being able to successfully install native-base using npm in my react-native project?

npm install native-base --save Error encountered: npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ENETUNREACH: request to https://registry.npmjs.org/react-native-keyboard-aware-scroll-view failed, reason: conne ...

react-nativenpminstallationnative-base

Angular Material Table displaying real-time information

Recently, I've delved into Angular and have been experimenting with creating a dynamic table to showcase data. Currently, I have managed to get it partially working with static data. I drew inspiration from this particular example: https://stackblit ...

angulartypescript

Shattered raw emotion

Does anyone have any insight on how to resolve this error? I've hit a roadblock trying to figure out the issue in the message below. Here is the snippet of code: :label="` ${$t('cadastros.clientes.edit.status')}: ${cliente.status === ...

javascripttypescriptvue.jsvuetify.js

The local types package cannot be built by react-scripts even though tsc has successfully completed the process

I have developed an application with a TypeScript frontend and backend. To streamline the process, I decided to create a shared types module that contains all the necessary types for both components in one centralized location. Rather than going through th ...

typescriptnpmnode-modulescreate-react-appreact-scripts

typescript - add a global library import statement to every script

Recently, I began working on a TypeScript project in Node.js. I am looking to add import 'source-map-support/register'; to all of my .ts files for better visibility of TS source in stack traces. Is there a method to implement this without manuall ...

node.jstypescript

Challenges with rendering items in a FlatList component in React Native

I'm currently working on transferring data from a data.json file to video.js <Image source={{ uri: video.snippet.thumbnails.medium.url }} style={{ height: 200 }} /> and I want this file to be rendered in a flatlist <FlatList showsHorizo ...

javascriptreactjsreact-nativerenderreact-native-flatlist

Using jscodeshift, transform all named import statements to default import statements for MUI V5

I'm in need of assistance with a jscodeshift script to convert all named imports to default imports for Material-UI version 5 using React and Typescript. import { Button, TextField } from '@mui/material'; The desired result should be: impor ...

reactjstypescriptmaterial-uijscodeshiftcodemod

The issue with IONIC/Angular lies in its inability to properly render the JSON data retrieved

I have recently started learning IONIC/Angular and Javascript, although I do have some background in other programming languages. The issue I'm currently facing is related to fetching JSON data from an external API (I've created the API with Stra ...

angulartypescriptionic-framework

Tips for including and excluding personalized Chips from input

Just started learning React/typescript, any assistance would be greatly appreciated Custom Chip (CC.chip) is a specialized Chip UI component that can be utilized as demonstrated below. const [isOpen, setIsOpen] = useState(true); const onClose = Re ...

reactjstypescript

typescript encounters issues with union type while trying to access object properties

I'm puzzled by the errors I'm encountering in my IDE with the following code: I defined some interfaces/types interfaces/types: interface GradientColor { type: string; value: { angle: string | number; colours: string[]; }; } inte ...

typescript