Using React Native For Web

In this article, we will talk about the buzz around React Native for Web and set up a demo project with it, too!

Say we are working on a React Web and React Native project with overlapping functionality. We write some common code that we want to share between them, e.g., custom React Hooks. We don’t want to use the “copy-and-paste” method of sharing code; too error-prone. We want something that behaves like our projects’ other libraries, i.e., behaves like a npm library.

Bottom line up front: There is a possible "React Native Web Singularity", when it starts being a better standalone choice for developing for the mobile web than react-dom. If this speculation comes true, this would be gamechanging.

React-native-web is one of the most amazing ideas I’ve stumbled upon in a while. For UI developers, it makes a longtime dream a reality: the ability to create an application that runs on both phones and browsers with just one codebase.

Let's make our react-native app work in the browser, the right way.

Creating a multi-platform application is even easier with React Native Web, which lets us build and deploy to the web and mobile platforms alike.

In a few minutes, you’ll have a Pokedex app, one that runs on iOS, Android, and on the web.

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re making a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.

There are cases when product has a lot of business logic and want's to share it across web and mobile platforms, especially when the web part uses React and mobile - React Native.

At Nozbe, we share almost all component-level code between React for the web and React Native (both iOS and Android) — without ReactXP, react-native-web, or react-primitives! Let me show you how we did this — from project setup, through shared infrastructure, all the way up to shared components and styling — and how you can achieve the same thing.

Today I'ma run you through how to make a web app with Expo. The steps are really just expo init, expo build:web, netlify deploy. In my usual distracted fashion I walk you through these steps in 12 minutes.

Learn how to do Navigation in React Native Web.

The start of my React Native Web series.

I discuss some of my thoughts on React Native Web.

Don Moro, a Native developer, is being pushed by his company to cross-platform with React Native, he joins the podcast to ask the panel for advice.