Getting started with React Native Web(RNW) with expo

08/20/2025

Learn how to set up a React Native Web project with Expo, run it in the browser, and prepare it for production as a static website.

Getting Started with React Native Web (RNW) using Expo

One of the strengths of Expo is that it allows developers to target not just iOS and Android, but also the web. With React Native for Web (RNW), you can take the same components you use in mobile development and run them in the browser. This means you don’t have to maintain two separate codebases for mobile and web.

Expo websites can either be statically rendered for SEO and performance, or client-rendered for a more app-like feel in the browser. Which approach you choose depends on your needs, but the setup remains simple.


What is React Native for Web?

React Native for Web is a set of component libraries such as <View> and <Text>. These map directly to familiar web primitives like <div>, <p>, and <img>.

For example, a <Text> component in React Native will render a <p> element on the web. This abstraction makes it possible to share most of your code across platforms without worrying about implementation details.

// app/index.js
import { Text } from 'react-native';

export default function Page() {
  return <Text>Home page</Text>;
}

While RNW is not required (you can still use React DOM directly), it is often recommended when building for multiple platforms. It allows for maximum code reuse and keeps the developer experience consistent. It is also worth noting that RNW is mature enough to be used in production, powering entire websites like Twitter.


Why use Expo for Web?

Expo has worked to ensure that all of its libraries support both browser and server rendering environments where relevant. On top of this, Expo CLI optimizes your code for the platform you are targeting. For example, it will automatically remove platform-specific code that is not needed when building for the web.

Some useful features include:

  • Fast Refresh and debugging tools that work across all platforms
  • Support for environment variables
  • Bundling optimized for the web
  • Platform-specific optimizations, like platform shaking for production builds

The goal is to provide a unified developer experience, regardless of whether you are building for mobile or web.


Getting Started

1. Install Web Dependencies

Run the following command to add the required packages for web support:

npx expo install react-dom react-native-web @expo/metro-runtime

If your project does not yet use the expo package, you will need to set it up before continuing.


2. Start the Development Server

With the dependencies in place, you can now run your app in the browser:

npx expo start --web

This launches the development server and opens the app in your default browser.


3. Export for Production

When you are ready to deploy your project as a website, you can export it as a static site:

npx expo export --platform web

This command generates optimized static files that can be deployed to hosting platforms such as Netlify, Vercel, or GitHub Pages.


Looking Ahead: SEO with Expo Web

Setting up React Native for Web with Expo is straightforward. The challenge often comes after setup: making the website SEO-friendly. Out of the box, client-rendered apps do not always perform well in search rankings.

In the next post, we will go deeper into strategies for improving SEO, including static site generation, server-side rendering, and metadata optimization.


References