Blog
BLOG

How to provide support for React Native apps on the Windows platform

Ibrahim Sulaiman
   

React Native is a framework developed by Facebook that is used to build applications on native platforms. It is preferred by most developers, due to its speed, agility, and ability to build hybrid applications in multiple platforms with an interactive user interface (UI).

By default, React Native has built-in components and supportive packages, accessible through both the mobile native iOS and Android platforms. To access applications in the Windows platform, Microsoft developed a Windows extension for React Native.

For more information about the Windows implementation, click here. As exhaustive as this resource may be, many React Native developers have a tough time understanding it. So, here is a step-by-step guide on how to set up a React Native application on the Windows platform.

Prerequisites

  1. Create a React Native app.
  2. Make sure npm/yarn is installed in your machine. It is the package manager for JavaScript and used for fast and reliable dependency management.
  3. We can run React Native for Windows apps only on Windows 10 devices with Windows version: 10.0.16299.0 or higher.
  4. Make sure that Developer Mode is turned on in the Windows Settings app.
  5. Install Visual Studio 2019.

Extending support for the React Native app on Windows

1. Create a react-native app with version 0.61.5 or newer.

2. To support react-native-macos also, migrate the react-native-macos for the version (0.61.5) or newer.

3. Open the terminal and navigate to the React Native project path and execute the following command to install React Native for Windows:

npx react-native-windows-init –overwrite

4. The above command will create a Windows folder in the project:

5. Go to the root of the reactnative folder in the terminal and execute the following command to run the React Native app in the windows platform:

npx react-native run-windows

or

Using Visual Studio, open the solution file in the application folder:

(e.g., react_native_windows_support/windows/react_native_windows_support.sln)

6. Open the Visual Studio Installer and modify the components:

In the Workloads tab, enable Universal Windows Platform development, Mobile development with C++, Desktop development with C++, and Node.js development support.

In the Individual Components tab, enable the following options:

7. Confirm that the target platform version is updated by checking the project properties:

8. If the React Native localhost server is not triggered automatically, then go to the root of the reactnative folder in the terminal and execute either of the following commands to manually run the React Native localhost:

npm start

or

yarn start

After the installation is successful, the Windows app will load as follows:

Unsupported community modules and extensions

Some of the unsupported React Native community modules and extensions are:

  1. Model component available in the React Native package.
  2. DatePickerAndroid and DatePickerIOS components available in the React Native package.

Sample Code Repository Detail:

IbrahimSulai/react_native_windows_support

Supporting the React Native App to windows platform – IbrahimSulai/react_native_windows_support

github.com

For information on how to enable support for React Native apps on the macOS, refer to this blog.

This article also appeared on Hackernoon.

Comment

Your email address will not be published. Required fields are marked *