From Zero to Publish: Expo Web (React Native for Web) Tutorial

Aug 2 · 10 min read

Characteristics (Pros & Cons)

import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"

Not All Features Are Created Equal

Installation and Execution

npm install -g expo-cli
expo init awesome-expo-web-example
"expo": {
"name": "awesome-expo-web-example",
"slug": "awesome-expo-web-example",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": [
cd awesome-expo-web-example
expo start -w

Expo Web Build

Extending the Webpack Config

yarn add -D @expo/webpack-config
const createExpoWebpackConfig = require("@expo/webpack-config");module.exports = function(env, argv) {
env.mode = "development";
const config = createExpoWebpackConfig(env, argv);
return config;

Web Build

expo build:web

Progressive Web App (PWA) Support

if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {

Adding Static Files

ㄴTOAST UI Grid v4.0.png
ㄴother resources.file

Publishing the Web Product on Github

git remote add origin i --save-dev gh-pagesnpx gh-pages -d web-build

Using Storybook to Test on Three Different Platforms

Configuring the Storybook Environment for React Native’s

npx -p @storybook/cli sb init --type react_native
For the sake of Storybook, comment out everything else.
export default from "./storybook";
import React from "react";
import { TouchableHighlight } from "react-native";
export default function Button({ onPress, children }) {
return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;

Testing React Native Web

Running the Product on Three Different Platforms

As We Wait for the Official Release


Written by


JavaScript UI Library Open Source by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade