NOTE: I AM WRITING THIS BLOG BASED ON THE ISSUES I FACED BEFORE CREATING A SIMPLE REACT NATIVE DESKTOP APP
SYSTEM REQUIREMENTS
You can run React Native for Windows apps only on:
- All Windows 11 devices
- Windows 10 devices with Windows version: 10.0.16299.0 (aka 1709, aka Redstone 3, aka Fall Creators Update) or higher Some features may not work on all versions. See Windows 10 Compatibility for version support details.
Install the development dependencies
To check or install dependencies, run the script rnw-dependencies.ps1 (.ps1 means it is a powershell file) in an elevated PowerShell window.
Run this command: Start an elevated admin PowerShell window and run:
- Set-ExecutionPolicy Unrestricted -Scope Process -Force;
- iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')
(run one by one)
The above command will turn on developer mode and install Visual Studio, the Chocolatey package manager, and Node.js LTS version. Additionally, it’s great if your computer has a physical memory of 8GB or higher because the Windows build processes typically need above-average physical memory to run.
The above script file recommends having 16GB of physical memory. You can continue with the tutorial if the second execution of the above script gives an output like below.
Install React Native for Windows
Remember to call react-native init from the place you want your project directory to live.
npx react-native init <projectName> --template react-native@^0.68.0
Navigate into this newly created directory
Once your project has been initialized, React Native will have created a new sub directory where all your generated files live.
cd projectName
Install the Windows extension
Lastly, install the React Native for Windows packages.
npx react-native-windows-init --overwrite
The --overwrite flag copies a custom metro.config.js file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the metro.config.js file, please back up your changes, run the command and copy over to take effect.
Running a React Native Windows App
In your React Native Windows project directory, run:
npx react-native run-windows
Did you see any error? if no you are done!!!
if yes you are lucky!!!
just kidding
FIRST ERROR
After my first round of searching, I found out that I had to run a power shell file, too bad i can't find the file again!!
viola!! caught you again
https://github.com/microsoft/react-native-windows/blob/main/vnext/Scripts/rnw-dependencies.ps1
go to the above link create a file in any directory with rnw-deps.ps1
once done, right click on it, and run it with powershell, it takes just a sec.
SECOND ERROR
the error at line 1 char 1 positional argument, while naming my folder structure I named some folders with "DESKTOP APP" with deep searching you will find out a file "windowstoreapputils.ps1" in node modules doesn't like spaces in paths names or should I say, frustrates my life by breaking my code because of path spaces, i was able to pass through this by removing any special characters (e.g - and _ ) and spaces from my path structure.
Thank you.
THIRD ERROR
My code still broke at the last part, i forgot the error but what i did was to run
npm i
npx react-native-windows-init --overwrite
multiple times then at last after a week, react-native run-windows worked fine.
I am opened to any difficulty in setting up react-native desktop app!
how amazing it is to get this running on your system!
Top comments (0)