Every time I get asked about React Native for Web, I’m also reminded that Web and mobile development is growing and changing very dynamically. These two are separate worlds but have a lot in common and cross constantly. Sometimes we are facing the problem of running the app in a different environment (for example a mobile app on a web browser). We can handle Android and iOS devices with React Native, but we actually have to keep another codebase for the web.
So now, what if I tell you there is a remedy for that? What if you can create an app that is platform agnostic and works properly no matter the device?
Thanks to React Native for Web it’s possible!
What is React Native for Web?
React Native for Web is a project that allows developers to use React Native components and APIs to build web applications. Essentially, it extends React Native’s capabilities beyond mobile to the web browser, enabling a shared codebase for building both mobile apps and web apps.
React Native itself is a framework that allows developers to build mobile apps using JavaScript and React. And React Native for Web, was initially created by Nicolas Gallagher, a former Twitter employee. He wanted to create the Twitter Lite PWA and run React Native components and APIs on the web.
Wait, what?
Isn’t it a React DOM job to make things work on the web? Why should we use anything that was originally created for another purpose?
The answer is: that React Native for Web gives us something extra. It allows us to create an application that runs on mobile and the web with just one codebase.
How cool is that?
Want to build an app that works on any device?
How React Native for Web works?
We should consider React Native as a pure UI language. It contains some basic components that define UI primitives.
What are the primitives? It’s a set of building blocks for the UI.
In React Native, all the components we can create are based on primitives like “<View/>” or “<Image/>“. They represent elements that make sense for every visual interface, no matter where it’s run. The core difference between React Native primitives and DOM primitives is the fact that DOM primitives are meant to create some structure of the HTML, and React Native primitives are just describing the UI.
With that knowledge, let’s take a deep dive into the “<Text/>” primitive.
Depending on the mobile platform, React Native is providing us with native functions and views, in this case “TextView” on Android and “UILabel” on iOS.
Knowing that React Native can define some UI primitives, it is possible to transform them to the DOM language by using HTML tags.
This is where React Native for Web comes in, and allows you to render the “<Text/>” as “<span/>” in the browser! It translates React Native components and APIs to their web equivalents. This translation layer allows developers to write platform-agnostic components that look and behave consistently across devices and platforms, no matter, mobile and web.
Why using React Native for Web?
Code Reusability across React Native projects
If you ever worked with projects that share a lot of stuff, you might love one of the core advantages of React Native Web: you can write your code just once, and share it across multiple platforms. Developers can maintain a single codebase for their apps across iOS, Android, and the web (so actually building a cross-platform app). It significantly reduces development time and cost in comparison to building separate web and mobile apps.
Native App Quality Interactions
The other big advantage of the React Native framework for the web is native mobile quality interactions. No matter if you are using it on your personal computer, browser in your smartphone, or native version of the app, you have the support for multiple input modes, like touch, mouse or keyboard. For example, if you create a <Button/> with an onLongPress property, it will be handled on all the platforms.
There are additional libraries available in React Native like Tamagur, developed to streamline design systems specifically for React Native. Tamagui helps bridge the gap between native and web platforms. It facilitates the sharing of code and UI components between React Native and React Native for Web. It offers comprehensive utilities for responsive design and theming, enhancing UI consistency no matter the device.
Accessibility of React Native Web App
Another good news is accessibility support. It includes APIs that help developers to create more accessible apps. The best-supported accessibility features of the web are exposed: accessible, accessibilityLabel, accessibilityLiveRegion, accessibilityRole, and importantForAccessibility. Why should we care about this? To make sure every single user of our app has equal access to it.
It’s also worth mentioning that it supports server-side rendering, and you can integrate it with some popular tools like Next js.
To sum it up, React Native for Web advantages are:
- One codebase to share across platforms and devices – its cost and time-effective solution for cross-platform app development, including web apps. It’s the core of React Native.
- Component-Based Architecture: Like React, React Native for the Web promotes a component-based architecture that makes the code more maintainable and testable.
- Performance: It optimizes performance on the web, making use of React’s efficient rendering mechanisms.
- Accessibility: React Native’s support for accessibility features, makes a web application usable for as many people as possible.
- Developer Experience: Offers a smooth developer experience with hot reloading, which allows developers to see changes immediately without refreshing the page. Also, they can access all React native libraries.
- Native-Quality interactions: All devices have the highest quality interactions, just like in the native app
- RTL support – Application layout can be automatically flipped to support right-to-left languages.
- Server Side Rendering Support – It makes it possible to use React Native components and APIs to build applications that can also run in a web browser. When integrating SSR, the process involves rendering these components to HTML on the server before sending them to the client. This allows for building performant, SEO-friendly, and accessible web applications using React Native.
- Integration with Static Pages – Integrating React Native for the Web with static pages can be a strategic way to enhance existing web apps by adding interactive and dynamic elements without rebuilding the entire site as a single-page application (SPA).
Are there any limitations of using React Native for web?
And unfortunately, the answer is: yes, there are. And they can make you decide that it’s not the technology that fits perfectly to your mobile and web development project.
Why? Because if you know that your project will contain some libraries that rely on native dependencies, they won’t work on the web. And even if you use only libraries that are free of native dependencies, you can’t expect them to work 100%.
You should also keep in mind that not all the React Native APIs are available in the browser. Some of them are still in progress, and some don’t have an equivalent in the browser.
And don’t forget that even if mobile and browser have some things in common, they are still different environments, so you may end up creating a lot of platform-based conditions to handle all the things correctly.
Challenges and Considerations
- Compatibility: Some native modules and third-party libraries designed for iOS or Android might not be fully compatible with the web.
- Performance Optimization: While it is performant, developers may need to optimize for larger datasets or complex animations specifically for web environments.
- User Experience: Design considerations might vary slightly between mobile apps and web apps, requiring adjustments to ensure a good user experience across all platforms.
What does React Native for Web mean for business?
Technically we’ve learned a lot, but is there any impact that it may have on the business side? Why would any CEO, or CTO give a green light to invest in it? What’s the future?
High-quality Web Interface
Building mobile and web using React Native allows you to:
- Build complex apps easier
- Enhance User Experience largely
- Perform better SEO-wise
- Execute the interface the way you truly want it
Write once, render anywhere
Using React Native for web application enables you to:
- Build an app that will work on iOS, Android, and any device simultaneously
- Shorten your MVP time-to-market
- Save (time and money) on development
- Save (time and money) on maintenance
- Build a truly futureproof app
There are even more interesting reasons to use React, and reasons to use React Native that you may find inspirational while choosing your tech stack.
Is it worth using React Native for Web?
It is used by top players on the market like Meta, Twitter and Flipkart and if it fits your project and your requirements as a developer, I think it’s a good way to go. As you can see above, there are some cons of this solution, so the key to success is to recognize if they are not affecting your project.
I think it is a big thing and with the amazing support of Expo, it can save developers a lot of hours of work, and most importantly, save the companies a lot of money.
Still Hesitating if React Native is a Good Choice?
READ MORE
50 Examples of Great React Native Apps in 2021
comments
Squashapps
Posted on
Thank you for the great and informative article!
Comments are closed.