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.
You may realize that this is something to do with what we are facing today, Covid19.
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.
- Washing hands (+3 points)
- Wearing a mask (+5 points)
- Staying home (+10 points)
- Good consumption (+15 points)
- 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.
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.
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.
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.
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.
11. Lastly, I want to list things that worked well although I had a concern before porting to the web.
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 inFlatList
worked perfectly which I’ve used for pagination.- The dark mode was recognizable in
web
as inmobile
with expo-appearance. Since expo SDK 37 doesn’t depend onreact-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 inweb
.
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.