In an exciting partnership between Microsoft and Janea Systems, a whole host of iOS and Android React Native modules have been ported to react-native-windows. Adding these modules to the react-native-windows environment has solved some major technical challenges for Microsoft, its customers, and the open source community.  

It was essential that these customers could port their iOS and Android mobile applications over to a Windows environment. With these modules now available, the development teams can accelerate bringing their features and functions into a desktop setting and delight their customers across multiple platforms. 

The expertise and deep development experience of the Janea Systems team proved essential in overcoming some critical roadblocks and hurdles in producing an impressive array of react-native-windows modules.  

For more information on the react-native-windows ecosystem, new features, and developments, including Janea System's partnership, see the following blogspot: Gallery App, TurboModules, and more community modules · React Native for Windows + macOS (microsoft.github.io) 

What are modules and why are they important? 

Modules are an essential part of the cross-platform development process for building applications and features in React Native, extending the functionality, and making use of native APIs and function calls. 

The modules that were most important for Microsoft and its customers to be ported to react-native-windows are listed below: 

React-native-device-info	React-native-device-info gets hardware and OS-specific information. This function is crucial for optimizing app performance and enabling developers to build Windows apps that adapt to a diverse range of devices.
React-native-sensitive-info	React-native-sensitive-info module can get and set sensitive data. This feature allows developers to effortlessly maintain data integrity and user privacy on Windows apps, ensuring consistent and secure handling of sensitive information.
React-native-sketch-canvas	React-native-sketch-canvas module allows users to draw and sketch on a canvas or image. It has unblocked Microsoft clients in education by enabling pupils and teachers to incorporate digital drawing into their learning environments easily.
React-native-config	React-native-config module allows the addition of build-time configuration values that can be read at run time. It allows developers to manage environment-specific configurations effectively, improving app performance and consistency across various runtime environments.
React-native-permissions	React-native-permissions is used to read and request system permissions. It is vital for a streamlined user experience as it provides developers with an efficient way to request and handle system permissions, ensuring a seamless and secure app experience for end-users.
React-native-print	React-native-print is used to print PDFs. It offers developers the tools needed to simplify document handling for users by integrating printing functionality directly into their applications.
React-native-pdf	React-native-pdf is used to render PDFs. This proves critical for content-heavy applications as it allows developers to provide users with a seamless, efficient document-viewing experience.
React-native-tts	React-native-tts allows Text to Speech using system voices. It enables developers to enhance app interactivity and accessibility significantly, creating more engaging user experiences with text-to-speech functionalities.
React-native-auth0	React-native-auth0 allows single sign-on to OAuth services. It provides a streamlined authentication experience for users, enabling developers to offer secure single sign-on functionalities within their apps.
React-native-gesture-handler	React-native-gesture-handler allows native gesture recognition on touch devices. This facilitates developers in creating more immersive and intuitive app experiences by implementing native gesture recognition in touch-enabled applications.
React-native-linear-gradient	React-native-linear-gradient enables developers to craft visually appealing interfaces by incorporating native linear gradients into app designs.
React-native-track-player	React-native-track-player adds media player functionality. This empowers developers to create rich multimedia applications, providing users with an integrated, high-quality media player experience.
React-native-splash-screen	React-native-splash-screen extends the application splash screen until dismissed. It enhances user experience during app load times by allowing developers to present visually pleasing and custom load sequences.
React-native-art	React-native-art is a vector graphics library. It inspires creativity by offering developers a toolset for integrating vector graphics into their applications, enriching the visual appeal.
React-native-progress-view	React-native-progress-view shows a progress bar. It is an effective tool for providing user feedback, enabling developers to display progress indicators, thus improving user experience.
React-native-screens	React-native-screens offers native screen handling for react-navigation. It optimizes app navigation performance, offering developers a resource-efficient tool for managing multiple screens in react-navigation.

Overview of How to Build a React Native Windows Module 

This particular process of porting existing iOS and Android modules over to Windows involved a steady, incremental process, which can be summarized as follows: 

• Initial analysis - understand what the module does, its dependencies, requirements, and how it's implemented on Android and iOS. 
• Porting the module to Windows - use appropriate UWP APIs to get the same features on Windows, using good practices. Examine the code, compare the JavaScript to the native code, and examine how many classes there are. 
• Testing the module - incrementally test its features as they are developed. 
• Update documentation - add instructions on how to use the module on Windows. 
• Windows example - update the example project to also run on Windows / create a Windows example project. 
• Add tests - add automated testing / CI to test the Windows version of the module. 

Key learnings/takeaways and what to do when developing modules in this way 

This was an excellent endeavor for both Microsoft and the Janea Systems development teams, with a total of sixteen essential React native modules being ported to Windows. From performance to accessibility, porting these modules brought React Native for Windows up to speed with other OSs. This unblocked Microsoft customers and the open source community and ensured devs could create a diverse range of applications. 

As mentioned in the process overview, it's a case of examining the existing iOS and Android react native modules and gauging the complexities of developing a react-native-windows version. It depends on the complexity of the module, how much of the code is native/C++/Java versus how much of it is in JavaScript. For example, when porting modules from mobile to desktop environments, you must be cognizant of the differences because there are cases where dependencies aren't present on desktop. On top of this, there are the added complexities of understanding the existing modules in iOS and Android, which use different languages, e.g., Swift, Objective-C, Java, etc.  

Conclusion 

Here at Janea, we understand the importance of cross-platform development, and that's why interoperability is at the heart of many of the ground breaking projects we work on. Whether you're a developer or not, this project affects millions of Windows users worldwide. We're incredibly proud of unblocking Microsoft customers while allowing the open source community to build with, and on top of, these modules to create outstanding React Native Windows applications without compromise. 

Contact us to learn how Janea can help you with your software engineering needs here.