Multi-platform support using React Native - Expo

Created by Mindinventory

React Native for Web is an accessible implementation of React Native’s Components and APIs that is interoperable with React DOM.

Introduction to React Native for Web

React Native for Web is a compatibility layer between React DOM and React Native. It can be used in new and existing apps, web-only and multi-platform apps.

React Native for Web uses React DOM to accurately render React Native compatible JavaScript code in a web browser. This brings several powerful abstractions to web developers including simple JavaScript API styles, built-in layout localization, and a high-level gesture system.

Modern React

React Native for Web is made with modern React APIs including function components and hooks. It builds upon React DOM, making it straightforward for React DOM apps to incrementally adopt the framework. The project aims to provide broad compatibility with React alternatives but will continue to evolve with React as APIs like Concurrent Mode and Server Components are introduced.

Modern Web

React Native for Web makes direct use of native DOM APIs to implement specific features. As the Web platform improves, so does React Native for Web. Although certain APIs in the project have remained unchanged since inception, the implementations have become smaller and faster by migrating to new DOM APIs as they became broadly available in browsers.

Components

React Native for Web provides all the core components you’d expect from React Native. You will mostly work with View, Image, Text, TextInput, and ScrollView. The core components include props for working with interactions, including the advanced gesture responder system.

Styles

React Native for Web components use JavaScript to author styles which are converted to native CSS. The design of this styling system avoids all the problems with CSS at scale and produces highly optimized CSS without the need to learn a domain-specific styling language and without the need for specialized tooling that parses markup to remove unused styles.

Installation Expo CLI

Expo CLI is a command-line app that is the main interface between a developer and Expo tools. Expo CLI also has a web-based GUI that pops up in your web browser when you start your project — you can use the GUI instead of the command line interface if you’re not yet comfortable using a terminal or prefer GUIs, both have similar capabilities. For installation Expo CLI

Getting started: Create a new app

An overview of how to install and use React Native for Web using Expo

Expo is a framework and a platform for universal React applications. Expo for Web uses React Native for Web, provides additional cross-platform APIs, includes web build optimizations, and is compatible with the broader React Native ecosystem.

npx expo-cli init my-app
cd my-app
npm install react-dom react-native-web
npx expo-cli start

Start your project with expo start then press w to start Webpack and open the project in the browser.

Adding web support to Expo projects

All projects after SDK 32 come with web support by default. To add web support to an existing Expo app you can do the following:

• Install the latest version of the Expo CLI: npm i -g expo-cli
• Add web dependencies: expo install react-native-web react-dom
• Ensure your project has at least expo@^33.0.0 installed.
• Start your project with expo start then press w to start Webpack and open the project in the browser.

Tips

• Startup faster in web-only mode by running expo web
• Test protected APIs like Camera and Sharing by using the --https or --no-https flags.

How does it work

You get a highly performant React website with progressive web app features enabled from the start. Because there is no “magical” canvas work going on in the background, you get a fully accessible website with a great lighthouse score right from the start.

Progressive Web Apps

Expo makes it easy to create PWAs by generating web app data from your app config. You can add offline support to fully enable PWA features on your website. Run your app on a variety of different devices and reach a much wider user base with a feature-filled PWA.

• ⭐️ Share Icons: Automatically reuse the App Icon and Splash Screens from your mobile app!
• 💬 Native Features: Use secure features like the Sharing API in your PWA.
• 🌗 Dark Mode: Make your site accessible with the appearance API.

Read more about building a Progressive Web App with Expo Web.

Highly Customizable

You can use Expo for the web with any of your favorite frameworks to create whatever experience your project calls for!

• Next.js: Server Side Render your website and get incredible SEO.
• Gatsby: Prerender your static site.
• Storybook: Create and test beautiful design languages.

Limitations

Developers who plan to use React Native for Web have to worry about the following problems:

• Existing React Native code won’t immediately run on the web just by using React Native for Web. You still have to do a lot of platform detection and code modification.
• If you have an existing React Native app, you either have to re-implement the functionality on your own or simply not support it at all when on the web. An example of this API is the Image Editor.
• Not all components that are built into React Native or Expo work on the web, sometimes required to use another component for web platform only. The same thing is true for libraries, the authors will have to write their own implementation for the web.

Happy Coding!

Reference Link:-

React Native for Web

Developing for Web - Expo Documentation