React Native Windows

Introduction to React-native-windows

React Native Windows is an extension of the React Native framework that enables developers to create native Windows applications using JavaScript and React. It serves as a bridge between the JavaScript code and the native Windows APIs, allowing developers to leverage their existing React Native skills to build cross-platform applications for Windows, Android, and iOS. With React Native Windows, developers can utilize a unified codebase to create visually appealing and responsive user interfaces for Windows applications while also accessing native Windows UI elements and features.

Development Environment Setup

To install the necessary dependencies, execute the provided command within a PowerShell window that has elevated privileges, meaning it is running as an administrator.

Enabling developer mode and executing the specified command will initiate the installation of Visual Studio, the Chocolatey package manager, and the Node.js LTS version. It is advantageous to possess a computer with a minimum of 8GB physical memory, as the Windows build processes generally require a higher-than-average physical memory capacity to function optimally.

The script file mentioned above suggests a recommended physical memory of 16GB. If the subsequent execution of the script produces an output resembling the example provided, you can proceed with the tutorial.

Building React Native Windows App

To begin, initiate a fresh React Native project by executing the provided command. By doing so, a basic React Native application will be automatically generated.

Utilize the subsequent command to activate the Windows backend, as the official React Native package exclusively supports Android and iOS backends.

Now use the given command to run the newly created React Native app as a genuine Windows application. This command will initiate a debug build from the project's current source code.

Additionally, the option --useHermes can be added to utilize the Hermes JavaScript engine instead of the default Chakra.

The initial build process might require a significant amount of time to complete as it compiles numerous C++ source files. If the build process encounters an error, you can rerun the same command with the --logging option to identify and address those errors.

Please consider the following recommendations to address common issues that may arise during the build process:

• In the event of a lengthy build process or encountering compilation errors related to Chakra, it is advisable to utilize the --useHermes option.
• Should the build process encounter an error indicating the absence of the Windows 10 SDK, it can be resolved by installing it through the Visual Studio Installer.
• To overcome a certificate error resulting in a failed build process, you can refer to the provided steps to generate a new certificate for your automatically generated UWP project using Visual Studio.
• Certain modules may encounter problems with paths containing spaces, so it is important to ensure that your project path does not include any spaces.
• Upon the successful completion of the build process, you will observe a UWP version of your React Native application, as demonstrated below.

Deep Diving Inside React Native Windows

The React Native framework comprises essential built-in React components such as View, Text, Image, TextInput, and ScrollView. These components, when utilized with the official React Native runtime, allow for the creation of native user interface elements on both Android and iOS platforms. Originally, the React Native team developed a flexible native rendering module that could be expanded by the developer community to encompass additional platforms beyond the two main ones.

To expand the reach of React Native applications, the react-native-windows project was introduced, enabling the development of Windows applications with native UWP (Universal Windows Platform) graphical user interfaces. These UWP applications can seamlessly function across various Windows platforms, including Windows 10, Windows 10 Mobile, Xbox One system software, and Windows Mixed Reality.

The JavaScript part of the application continues to operate on a JavaScript engine similar to the one used in the original React Native project. Initially, the react-native-windows project employed the Chakra JavaScript engine, which was later replaced with Facebook's Hermes JavaScript engine to enhance performance.

Simple Application Using React-native-windows

Our objective is to develop a straightforward UWP application that displays a welcoming message upon entering your first and last name. To achieve this, incorporate the provided code snippet into your App.js file.

To refresh the present application, utilize React Native Debugger. Upon doing so, you will encounter an interface resembling the one below, designed by your chosen theme configurations.

After entering the necessary information into the text fields, clicking on the OK button will prompt a message box to appear, displaying a friendly greeting.

In this example application, we utilized various core components and APIs of React Native, along with the useState Hook from React, to retrieve the current user inputs. It is evident that we successfully obtained native UWP UI elements through the utilization of React Native components.

Furthermore, the react-native-windows extension enables the implementation of complex layouts by providing support for a syntax that is compatible with Yoga.

Additionally, the React Native developer community has created numerous impressive libraries, and a number of these libraries are compatible with react-native Windows. This means that certain popular React Native libraries can be utilized in Android, iOS, and Windows applications.

To distribute the application, one can open the UWP application source using Visual Studio.