React Native
The State of React Native for Web, Windows, and macOS in 2022
React Native is a cross-platform development framework that supports simultaneous iOS, Android, web, macOS, and Windows development from a single codebase. Here are known bugs and planned improvements for React Native and its libraries.
26 July 2022
by
Shanika Wickramasinghe
Introduction to React Native (RN)
If you’re new to app development, then you might not be aware that Android and iOS applications use different default (or “native”) coding languages: Kotlin for Android, and Swift for iOS. This makes it expensive and time-consuming to develop cross-platform mobile applications because the inherent language and API differences require you to build two completely separate apps. As a result, hybrid native mobile frameworks have become ideal for mobile developers who are developing cross-platform mobile apps.
React Native is one such open-source mobile framework. It was developed by Facebook based on Facebook’s own ReactJS development framework. React Native enables devs to build apps for Android and iOS platforms simultaneously using only one common language. From a technical perspective, React Native consists of special native components such as Text, Input, Modal, and Button, mapping into native platform-specific component versions using a common codebase. This enables React Native to support many other platforms like Windows, Web, and macOS.
React Native is based on JavaScript and the markup language called JXL or JavaScript XML, which resembles XML and uses JavaScript and Native threads written in separate languages. For communication between the two types of threads, it uses a connector called a ‘bridge’ in the middle with JavaScript and Native threads enabling bidirectional communication.
The state of React Native in 2022
React Native History and Maintenance
React Native development was started as a hackathon project from Facebook in 2013 by Jordan Walke, who discovered a method to generate UI components for iOS applications. Therefore, React open-source framework was initially built for iOS only and became available on Github as an open-source project for public use in March 2015.
Then Facebook quickly provided React Native with Android support, enabling developing apps for both platforms. Currently, React Native is one of the biggest projects in GitHub, which has 101k stars and 21.7k forks. Facebook maintains its comprehensive documentation, including a getting started guide to code different usage examples.
Why use React Native?
If you aim to build mobile apps using React Native, you may wonder why you should use React Native over the other mobile development frameworks. Building mobile apps with React Native offers several benefits.
One of the drawbacks of using platform-specific native languages such as Java and Swift is needing to re-deploy the whole application even if there is a small update. React Native solves this problem by enabling developers to only re-deploy the updated code without creating a whole new version of the application.
The other reason you should use React Native is its code is reusable with the capability of cross-platform development without affecting the user experience. If you use native code, you will have to write two separate codebases for each platform and manage separate developers to develop and maintain the two codebases. With React Native, developers can simultaneously write just one codebase for Android and iOS applications, enabling a quicker development cycle.
Developing cross-platform applications in React Native also brings the advantage of cost savings, including costs for developing, testing, deploying, and maintaining two codebases. In addition, its “live reload” feature lets the developer see the effects of the code changes immediately without going through a time-consuming build process.
React Native is continuously evolving. Sometimes users may find some components are not available but to overcome such situations, React Native allows third-party plugins.
Last but not least, React Native is great for developing universal applications because it is a pure UI language. It uses primitives components such as <View>, <Text>, or <Image> to create all other components, and those primitives components can run on any interface.
In summary, the major benefits of using React Native are:
- Ability to develop an app that can run on both iOS and Android using a single codebase
- Cost and time savings
- Third-party integration support
- Building universal applications
Major bugfixes, issues, and planned features for 2022
The React Native team continuously improves the features by fixing major bugs and issues and adding more features for every release. At the beginning of the year 2021, many changes were planned, such as support for:
- react-navigation
- React-viro
- react-native-auth0
- auto-linking,
- C++ turboModules
- Arrow and tab navigation
- structured error types.
In October 2021, React Native announced the last release version React Native 0.66, supporting Android 12 and iOS 15 with some updates and bug fixes. So what are the updates and the fixes that have been introduced with the 0.66 version?
One of the goals of React Native in the second half of 2021 was to make their release process more stable and faster. To realize it, they have made accessing nightly releases by publishing them using a “nightly” tag. In addition, they have improved their testing for individual commits by creating tarballs with each commit and pull requests.
iOS developers were facing numerous challenges due to the poor performance of React Native apps. Hermes was introduced to make the rest of Native more lightweight. Another open-source framework based on JavaScrip enabled React Native to operate on multiple platforms. Its main aim is to improve the app’s performance by reducing memory utilization and reducing interaction time and size of the application.
React Native still has not released what to expect in the rest of 2022. However, some articles indicate that in 2022, they will focus on Native modules and Fabric and introduce new APIs.
3. The state of React Native Web in 2022
What is React Native for Web?
Building applications that also support modern web browsers is immensely helpful for todays’ web developers as clients can use the application on multiple platforms in multiple web browsers. React Native Web is a library for web development that helps bring React Native applications to web browsers by using a single codebase. It acts as the middle layer between the React Native and React DOM, which developers can use in web-only apps and multiple platforms.
React Native web was specifically developed to support React Native web applications on both Android and iOS platforms. As React Native supports cross-platform mobile development, using the web version, developers can use only a single codebase to develop apps that render in both web and mobile without any performance impact.
React Native for the web is based on React DOM, and it consists of the latest React API capabilities such as hooks and all the major components of React Native. Using React DOM, React Native for the web uses modern React Native components and APIs on modern web browsers. Therefore, developers can use native DOM APIs directly for feature development. Also, when the React Native for the web updates, the browser platform also updates with it.
Who maintains React Native Web?
React Native Web was developed and maintained by Nicolas Gallagher and made available to the public in GitHub as an open-source code in 2015, where React Native was also made available to the public from React Native version 0.60 onwards, which means it supports web platforms.
Why should you use React Native for Web?
Building mobile apps with React Native web offers several benefits.
The most important advantage, as mentioned above, is the ability to build applications that support both mobile and web platforms using only a single code base. It will drastically reduce the amount of effort developers have to put into writing separate codebases and will enable quick application deployments.
Another reason why you should use this library is its high-quality interactions. Even if you use a laptop, desktop computer, or mobile device to access web applications, React Native for web supports multiple input modes like keyboard, touch, or mouse.
Another advantage of React Native web is its support for accessibility through accessible HTML and APIs. The components of React Native that provide accessibility support include accessible, accessibilityLabel, importantForAccessibility, accessibility role, and accessibilityLiveRegion.
Another advantage is its reliable styles, such as RTL layouts which supports languages that write and read from left to right by automatically flipping the layout. If you aim to expand your applications to more consumers of different countries, different layouts such as RTL will be beneficial.
Moreover, based on existing React DOM, it enables incremental adoption. It means you do not need to bundle everything but only take what you use. Also, it supports server-side rendering, and enables rendering dynamic components as HTML on the client-side. In addition, it supports integrating third-party tools such as Gatsby to extend your application functionalities.
In summary, the major benefits of using React Native Web are:
- Faster application development that can run on both mobile platforms and web browsers with a single codebase
- The support it provides for high-quality interactions
- Strong accessibility support
- Support for reliable styles, including RTL support
- Enabling incremental adoption of the framework
- Client-side rendering support
- Third-party app integration support
Bug fixes, issues, and planned features for React Native Web in 2022
Brief Recap of bug fixes and changes done in 2021
2021, React Native for Web Community addressed several issues during their three major releases from version 0.15 to 0.17. The 0.15.0 release went live in February, 0.16 in April, and 0.17.0 in June 2021, which includes deprecations, new features, and breaking changes; as in React Native, React Native web is continuously improving its features addressing various limitations, performance issues, and challenges. Especially with native dependencies, it is hard to make your project function similarly on web browsers.
The 0.15 version introduced accessibility improvements and minor bug fixes, in addition to the deprecation of the accessible prop in the minor release. The new accessibility features that were introduced include
- Pressable support for onHoverIn and onHoverOut props.
- Supporting All ARIA (Accessibility Rich Internet Application) properties through accessibility* props.
- Additional accessibilityRole values are mapped to HTML element equivalents.
Some notable breaking changes include
- Linking API Supports opening in New Tab and includes addEventListener methods.
- Use accessibilityHidden instead of importantForAccessibility
- Adding hrefAttrs prop to Text and View components.
- Removing of undocumented attribute data-focusable and disabled prop
The 0.16 release did not include many features and breaking changes than the previous release. It included flow type export as a new feature with bug fixes and updates.
- Update to Animated & VirtualizedList
- Change in Dimensions for Safari.
- Removed inheritance of NativeEventEmitter with EventEmitter and removeSubscription method
Then the final major release, 0.17.0, didn’t have any new features, but there were the following bug fixes and updates for unstable APIs.
- Remove special treatment of elements with accessibilityRole=”menuitem.”
- Remove anchor element inference from View and Text with accessibilityRole=”link.” Remove unstable_createElement element-type inference using href.
- Remove unstable_createElement keyboard shim for onClick..
- Fix Pressable support for keyboard interactions if the element is unmounted during the interaction.
- Remove unnecessary CSS reset for input number spin buttons.
- The ProgressBar & Switch rendering in Windows in High Contrast mode has been fixed.
- Text preserves white-space if numberOfLines={1}.
Bug fixes and changes planned in 2022
According to the milestones of their GitHub page, the following are some of the bug fixes they were working on for 2022.
- Prevent triggering the onFocus event when Pressable with disabled={true}
- Removing default element id from the Animated sets
- Using multiline ellipsis implementation for single line
- Adjusting AppState
As well as some bug fixes, feature requests, and updates open related to the Image component including:
- Rewriting the Image to support modern web features because of the design constraints of exiting the Image component
- Fix for image repeat rendering in macOS Safari and iOS safari
- Fix for visual changes to support both mobile and web
- Fix for image reloading
In addition, there are also some bug fixes, feature requests, and updates open related to the ScrollView component.
- Providing an option to control ScrollView
- Support for content Offset prop
- Support for alwaysBounceHorizontal and alwaysBounceVertical to ScrollView
- Momentum scroll events
- Removing all use of legacy context API
- Fixing shaking effect of ScrollView
4. The state of React Native for Windows and macOS in 2022
What is React Native for Windows + macOS?
In Reality, Windows and macOS are incompatible platforms, and developing applications for both platforms separately can involve many design changes. React Native solves this problem by offering React Native for Windows + macOS framework, enabling developers to build cross-platform desktop applications for Windows and macOS using only a single codebase.
This cross-platform development ability provides React Native support for the Windows SDK and the macOS 10.14 SDK. By only using JavaScript, it enables building applications for all Windows 10 devices, including PCs, tablet devices, Xbox, Surface tablets, and dual screens.
React Native for Windows + macOS History and Maintenance
Facebook supported React Native for both iOS and Android platforms by 2015, and the support for Windows and macOS was integrated by 2020, enabling full cross-platform development. During this development, they have rewritten many components in C++ to improve the performance. The project is made available to the public on the Github repository. Microsoft maintains a comprehensive React documentation that describes APIs, components, React Native-related topics, and React APIs shared between React Native and Reacts DOM.
Who uses React Native for Windows + macOS?
Many top organizations are leveraging the power of using React Native for Windows and macOS. For example, Microsoft applications such as MSOffice and Xbox, Facebook Messenger
Within Microsoft, we have several applications such as MSOffice and Xbox, making a really big bet on React Native. Additionally, enterprise and consumer applications like Axsy, Plex, and Facebook Messenger are also using React Native for Windows and macOS to expand their reach beyond mobile and drive their business forward on desktop.
Why use React Native for Windows + macOS?
Suppose you plan to build mobile apps using React Native for Windows + macOS framework. In that case, you may be thinking about how it becomes more beneficial for you than other mobile development frameworks for Windows and macOS.
As with React Native for the web, the most important benefit is developing apps that can run on Windows and macOS with only a single codebase. Creating a new React Native application will create one project template for Windows and another for an XCode project. The react Native layer exists on top of those separate projects where platform-specific and shared UI components exist.
This reduces the time and cost for developing, testing, deploying, and maintaining two codebases without compromising the application performance on either platform. It also means that this framework supports developing universal apps that do not constrain to one particular platform but apps that are deployable in any platform with ease.
React Native also provides the ‘live reload’ feature, enabling developers to see the changes and offering a web-like developer experience even for desktop applications without consuming the build process.
Another advantage of using this framework is the support you get from the developer community and the community modules you can use in your applications.
In summary, the major benefits of using React Native Windows and macOS are:
- Ability to develop an app that can run on both Windows and macOS platforms using a single codebase
- Cost and time saving
- Live reload for instantly view changes
- Large community support
- Building universal applications
Major bugfixes, issues, and planned features for 2022
The React Native for Windows and macOS team continuously improves the features by fixing major bugs and issues and adding more features for every release. From the last release of December in 2021, so far, the React Native for Windows and macOS team have done several patch releases for React Native for Windows. The latest release version is 0.66.0. The following is the summary of new changes introduced with versions upto the latest version.
Brief Recap of new features, bug fixes, and changes done in 2021
- Optimize JS engine for Hermes to avoid usability impacts with debug builds of Hermes
- Fix for power consumption issue when using timers
- Using a native Redbox UI for better error handling in debug failures
- Windows 10 SDK version updated to 10.0.19041.0 that includes Visual Studio.
- A sampling profiler for profiling Hermes CPU usage
- Improved responsiveness with expensive callbacks:
- support for the togglebutton and header accessibility roles.
- Autolinking support in React Native Windows was extended for all community modules using a heuristic that links NPM dependencies that could be Windows community modules.
- ReactInstanceSettings::NativeLogger property for redirecting the output of the native JavaScript console.
- JSValue XAML conversion helpers
- Handle back events
- Bug fixes and improvements: for fewer crashes, correct behavior, and more quality of life improvements for developers.
- Removed Picker, DatePicker, PickerWindows
- Configuration changes for UseExperimentalNuget
What can be expected in 2022?
According to the current milestones in the React Native for web, Github repository, the following are the summary of possible changes that can introduce in 2022
- Enhancements for Telemetry
- Upgrade to WinUI 2.8
- Standardize Hermes packaging
- Bug fixes for native test running issues, Hermes and Debugger related issues, consistency problem of onMouseLeave behavior, etc
Using Crowdbotics with React Native, React Native for Windows + macOS, and React Native for Web
Having an application builder that allows even non-technical people to develop apps has great value for users who want to start development and technical users who require them to develop an app efficiently. The Crowdbotics App Builder is one such app builder that lets any user build applications in minutes. Crowdbotics App Builder provides a range of prebuilt packages for faster development and deployment.
The RAD stack, which is based on React Native and Django, is the component that runs the app builder applications. Crowdbotics supports all React Native frameworks, including React Native for web and Windows+maOS for building high-quality cross-platform applications.
Conclusion
When it comes to cross-platform web development, react native is one of the top choices of many web developers because it enables developing apps that support mobile platforms and modern web browsers with Windows and macOS platforms. Developers can share one single codebase with other platforms, reducing the pain of maintaining two. React Native frameworks are improving continuously, addressing major bugs and issues found in the frameworks and introducing new enhancements. Many changes have been introduced in all these frameworks and 2021, and we hope to see another set of updates and new features with this exciting framework in 2022.