Use universal expo (ios, android, web) to create your app

In this story, I’d like to share my experience in creating an app with universal expo environment which supports ios, android, and web. Thanks to Evan Bacon for all his hard work for supporting the web in the expo framework.

Recently, I had a concern about starting the new project which mainly depends on the web. I’d like to use react for this but as most of the other devs might feel, I always feel lacking when I start on a web project. Lacking UI framework of my taste, bad experience in using other libraries since they mostly have the separate CSS, no consistent environment with other third-party libraries, too many boilerplates, and more. Because of these reasons, I was very interested in building a web app with a new framework like react-native or flutter.

Since the new framework has significantly fewer boilerplates and has more consistent development experience, I’d like to invest in those industries rather than an environment that feels like a post-war situation (this is just my opinion 😅).

Therefore, before I feel reliable in starting new massive project in expo web, I’d like to confirm that this would work out.

Here is the app I’ve built today. It took me around 2 weeks and has a very light feature. This is just my concept app called Hygiene.

App screenshots

You may realize that this is something to do with what we are facing today, Covid19.

App playing image

Briefly explaining what Hygiene app does

My concept app is somewhat different from apps that exist today. Things like statistic analytics, dashboard, maps, and articles on Covid19 are not what I’ve attempted to build today. I’d like to build an SNS app that cares about each individual’s recognition to behave correctly to finish this terrible virus.

I’ve mainly described 4 categories + 1 category for extra. They are listed below.

1. Washing hands (+3 points)
2. Wearing a mask (+5 points)
3. Staying home (+10 points)
4. Good consumption (+15 points)
5. Extra (+1 point)

For those of you who aren’t aware of what “good consumption” is, this is a term defined in South Korea to cheer up people to keep each other safe from Covid19 by buying offline goods online or any kind of conceptually helpful consumption that may help our market overcome such depression. The siren order in Starbucks maybe one of them because it can minor the epidemic. Also, another good example could be buying food expenses at once in certain restaurants. By doing that, people can not only keep themselves away from each other but it also prevents restaurants from bankruptcy.

If users post feed after selecting one of the categories, they will receive the point and will be ranked inside Hygiene.

List of feeds in Hygiene

Rank tab in Hygiene

What I’ve learned about react-native web in expo

Now, I’ll explain what I’ve learned in building an app with the expo web. I’ve ported the above app to the web app in hygiene.dooboolab.com.

Since Hygiene doesn’t have an email sign-in process, it mostly relies on a social sign in. Previously, it didn’t have an official way to implement this in one codebase. Thanks to Evan Bacon for all his hard work that made this possible in one codebase.

Thanks to awesome work again in https://twitter.com/Baconbrix/status/1256985914749759488

I am always impressed by how the Expo team works. I really wish we have a similar dev team in our country so I can join one 😄.

1. Implementation of the universal social sign in.

I’ve removed `expo-facebook` and migrated to `expo-auth-session`

Now facebook sign in works well in web, ios, and android

2. Tips on horizontal ScrollView inside vertical ScrollView or FlatList when it isn’t working as in mobile on the web.

I wanted to make the picture scrollable horizontally as shown above on the web. However, it didn’t work as expected. Therefore, I’ve tried something others that could make this possible on the web.

When I tried to wrap the horizontal ScrollView inside another View as the above code, I could make the scroll working also on the web.

3. SVG support with react-native-svg-transformer

One of the most concerns about porting the current mobile app to the web was SVG support. I’ve gone through react-native-svg-transformer readme once again and could easily find out that it also considers web support (yes, all react-native devs are moving to the web 🚀).

I’ve posted different behavior I’ve experienced on the web in the expo issue.

When I resize the images, they get cut off in the web

In the current thread, I’ve had to change the SVG. By erasing width and height value in SVG files, I was able to make them work seamlessly with mobile. Also, another tip was that I had to specify both width and height in the web, while I only had to specify width on the web when I’ve erased all values of width and height in SVG files.

4. WebView is empty in react-native-web

I had to use Linking for web while I used to open up new WebView in android and ios since WebView didn’t show anything in web.

5. react-native-share doesn’t do anything on the web.

Currently, I am waiting for this to support also the web.

6. Requesting permission for the photo library should be removed on the web.

Permissions.askAsync(Permissions.CAMERA_ROLL) didn’t do anything on the web, so I could not post images. I’ve changed the code as above and it did work well on the web.

7. Alert component in react-native does nothing on the web.

I used to use Alert.alert when I feel reluctant in making a custom Alert modal. Therefore, I chose to use the system’s alert dialog in most cases with Alert.alert. However, this does nothing on the web currently. I’ve used pure alert function for the web as a workaround.

8. Sometimes, I had to specify an extra min-height value to view component in web while I didn’t have to in mobile.

9. onRefresh isn’t working in web

I might be wrong about this. However, I can’t currently find out the way to make this work.

10. Awesome default PWA

One of the blazing integration in the expo web. It has default PWA integration.

Runs on the desktop!

11. Lastly, I want to list things that worked well although I had a concern before porting to the web.

Animated sample

• Animated works great in web
• react-navigation worked great and also the tab navigation worked great.
• expo/react-native-action-sheet web support was great (no problem!)
• onEndReached functionality in FlatList worked perfectly which I’ve used for pagination.
• The dark mode was recognizable in web as in mobile with expo-appearance. Since expo SDK 37 doesn’t depend on react-native 0.62 or above, I couldn’t use the new dark mode feature in react-native 0.62. I also have a concern whether if this is going to work in web.

Dark mode in `ios`

Overall implementation in web looks as follows. Go check out hygiene.dooboolab.com and this is fully opensource in github.com/hyochan/Hygiene. Note that the code is not perfect tough 😣.

Looks mostly similar to what we have in mobile 🎉

Looking forward to developing our team’s core product with the expo web which has a very complicated UI structure.

Thanks for reading 🔖! I hope my toy project can forward other’s experience in starting a react-native project on the web.

P.S. Looking forward to contributing to react-native web industry. This is really exciting 😃. Also, be aware that the post has been written before the expo web V1 release.