There are many frameworks available to create a desktop application, and there are several choices for desktop when it comes to cross-platform development. If you want to extend your React Native application with desktop support, React Native Windows is definitely the way to go.

In this article I’m going to introduce React Native Windows, outline its advantages and discuss its most common use cases. I’m also going to share the case scenarios when it’s better to choose React Native Windows over Electron.

What is React Native Windows?

React Native Windows was created by the Microsoft team five years ago and is still actively developed. The goal is to keep its releases parallel to React Native releases done by Facebook.

As the name itself suggests, React Native Windows enables the use of React Native on desktop. The idea behind React Native Windows was to make it exactly the same as React Native when it comes to the environment, tools, architecture, languages and developer experience. If you are a React Native developer who would like to try React Native Windows, nothing should surprise you.

The only thing to bear in mind is that React Native Windows is obviously based on Windows technologies, which means that behind your JavaScript code the UWP (Universal Windows Platform) will be invoked.

Getting started with React Native on Windows 

React Native Windows development is based on JavaScript with a huge support from the community or in the form of tutorials or documentation. In order to develop your first basic app then, all you need to know is JavaScript. Once you become more experienced, you can start doing more advanced things.

Speaking of valuable resources for beginners, I highly recommend a Microsoft tutorial on github. It will guide you through the setup and first steps.

React Native Windows vs. Electron

React Native Windows vs. Electron

The choice between React Native Windows and Electron (or any other framework for cross-platform desktop development) should depend on a given development scenario. In other words, it’s not a question of which framework to choose, but rather when to choose React Native Windows and when to choose Electron. 

Each tool and framework has different pros and cons, which makes it a better or worse choice in a specific development scenario. The key is to know which framework is best at which job.

As for React Native Windows, it’s definitely a good choice when you need:

#Native modules

Although it is possible to implement native modules in Electron, it is much easier on React Native Windows. The latter one offers two different programming languages and native support out-of-the-box – it provides you with the native project ready for implementation in the windows/ directory of your repository.

#Native look and layout

If you are a Windows user, you should already notice some of the fancy layouts, animations and controls used in the Windows interface. When using React Native Windows all this is already available by invoking standard React Native controls and components.

And if something is missing, you aren’t left without any options either. There are plenty of community modules you can use and they provide other features which the Microsoft team actively supports and helps to develop.

#Community and support

Because of the fact that React Native Windows is developed by Microsoft supporting 3rd party libraries, there’s a great React and React Native Windows community. This can prove useful at any stage of your app development process.

Coding languages for React Native Windows  

React Native Windows offers more development languages than Electron, which means that you don’t need much prior knowledge. When implementing an app using React Native Windows the main focus and the majority of code will be in JavaScript. This language is more and more often used by many other frameworks, which makes React Native and React Native Windows very developer-friendly.

If you want to implement a native module or native UI component, React Native Windows also got you covered – you can choose between two native languages: C# and C++ (I’m not going to compare them in this article). But when it comes to native development for React Native Windows app, there are some things you should keep in mind:

  • C++ native module will work for both C# and C++ app, but C# native module can be used only in the C# application. Such limitation is caused by the interactions of the managed/unmanaged languages. On the bright side, architecture of native modules and native UI components looks exactly the same for C# and C++.
  • Native development for React Native Windows and Universal Windows Platform is well documented, but the code examples are written mostly using C#.
  • Many modules already available on the open-source market are implemented in C++/WinRT, which can be a good starting point to gain valuable know-how.

If you want to learn more about the trade-offs of each language, you can check the official React Native Windows documentation on choosing C++ or C# for native code.

Summary

If you plan to extend your cross-platform app to Windows, you should consider React Native Windows. This is especially recommended in certain development scenarios such as implementing native modules or working on a native feel and layout.

When you decide to make your app available on desktop with React Native Windows, what will come in the package is great support and out-of-the-box solutions. React Native Windows has many advantages which can improve your development experience.

Go for more!

If you want to learn more about React Native for Windows, check our podcast episode: React Native Development on Windows | Ep #8. Together with Mike Grabowski, we discuss the technology in detail.