Running react-native-web using expo in 2020

Since expo sdk version 33, expo supports react-native-web.

In this blog, we’ll see how to set up your react-native-web project using expo.

Installing expo

Install expo-cli if you don’t have it installed already, you can use nvm and yarn as well instead of npm.

After running expo init you’ll be presented with a few options to choose the starter kit from.

You can choose any one of those, but for this blog, we’ll use the first one, which is the blank project in javascript. Now, it will prompt you to enter the project name and the slug. Slug is the URL part that’s needed when you try to publish the app on the expo server.

cd into the project directory and run the expo start --web

If you want to quickly jump and see the code, check this GitHub repo [master branch]

It should launch the webapp in your browser.

expo with react native web

Let’s make some changes in the App.js file and check if hot reloading works.

You should see the browser reflecting the changes automatically. If you’d like to see my hussle with react-native-web setup check this video.

Adding components to react-native-web

Let’s add a few components to our app now.
Create a Header.js file in components folder

And include Header.js in your App.js file.

react-native-web

On the terminal, press i and it will launch the ios simulator or press a and it will launch android emulator, and you should see the app running in the mobile device as well.

react-native-web-expo

If you want to avoid using terminals, Expo also provides you with the browser UI interface which looks like this.

expo in browser

This is the beauty of react-native and react-native-web, you need to write the code once and can run it on multiple platforms. Like react-native-web there are other packages like react-native-windows which lets you run react native apps on the windows phone and PC.

Similarly, react-native-macos let’s your run the app on mac os.

In the next blog, we’ll integrate the navigation library into react-native-web as navigation is an important part of any frontend framework.

How useful was this post?

Click on a star to rate it!

2 thoughts on “Running react-native-web using expo in 2020”

Leave a Comment

Your email address will not be published. Required fields are marked *