React Native is a framework developed by Facebook that is used to build the application 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 platforms. To access the applications in the Windows platform, Microsoft developed a Windows extension to React Native. Android For more information about the Windows implementation, click . As exhaustive as this resource may be, many React native 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 here developers Prerequisites Create a . React Native app Make sure / is installed in your machine. It is the package manager for JavaScript and used for fast and reliable dependency management. npm yarn We can run React Native for Windows apps only on Windows 10 devices with Windows version: 10.0.16299.0 or higher. Make sure that Developer Mode is turned on in the Windows Settings app. Install . Visual Studio 2019 Extending support for React Native apps on Windows 1. Create a react-native app with or newer. version 0.61.5 2. If we support react-native-macOS also, then we need to 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 command given below to install the react-native-windows. npx react-native-windows-init -- overwrite 4. The above command will create a windows folder in the project and the display will be as shown below. 5. Go to the root of the reactnative folder in the terminal and execute the below command to run the react native app in the windows platform. npx react-native run-windows or - Open the solution file in the application folder in Visual Studio Using Visual Studio (e.g., react_native_windows_support/windows/react_native_windows_support.sln) 6. Open the Visual Studio Installer and modify the components with the options below In the Workloads tab - Enable the Universal Windows Platform development, Mobile development with C++, Desktop development with C++, and Node.js development support. In the Individual Components tab - Please enable options as mentioned below. 7. Make sure the target platform version is updated as below from the properties of the project. 8. If the react-native localhost server is not getting triggered automatically, then go to the root of the reactnative folder in the terminal and execute the below command to run the react native localhost manually. npm start or yarn start After successful installation, the window app will load like below I have listed some of the unsupported react-native community modules and extensions: As per my observation, I have come up with the below list of unsupported react-native community modules and extensions: model component available in the react-native package. DatePickerAndroid and DatePickerIOS component available in the react-native package. Commonly won't support the react-native packages, which does not have the native module support for windows. Sample Code Repository Detail: https://github.com/IbrahimSulai/react_native_windows_support For migrating the React Native App to support the macOS platform, please refer to my other blog.

Facebook

Microsoft

How to Provide Support for React Native Apps on the Windows Platform

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Provide Support for React Native Apps on the macOS Platform

Cross-Platform vs Native: The 50 Shades of Mobile App Development

A Developer's Dilemma: Flutter vs. React Native

Building a Private Messaging Chat App with React-Native: An Essential Guide

Choosing the Right Development Strategy for Your Android and iOS Apps

Creating a Books Tracker App with .NET MAUI and Supabase

How to Provide Support for React Native Apps on the macOS Platform

Cross-Platform vs Native: The 50 Shades of Mobile App Development

A Developer's Dilemma: Flutter vs. React Native

Building a Private Messaging Chat App with React-Native: An Essential Guide

Choosing the Right Development Strategy for Your Android and iOS Apps

Creating a Books Tracker App with .NET MAUI and Supabase

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps