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

TOAST UI
TOAST UI
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>
</View>
);
}
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": [
"ios",
"android",
"web"
],
...
}
}
cd awesome-expo-web-example
expo start -w
<Image
source={require("./assets/images/expo-icon@2x.png")}
...
/>

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

<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker.register("/service-worker.js");
});
}
</script>

Adding Static Files

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

Publishing the Web Product on Github

git remote add origin https://github.com/dongsik-yoo/awesome-expo-web-example.gitnpm 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

TOAST UI

Written by

TOAST UI

JavaScript UI Library Open Source by http://ui.toast.com

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