We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms. In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!

1. Building for Mobile and Web with Expo
React Advanced London
2022-10-27
Josh Justice
codingitwrong.com/workshops/rnweb
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 1

2. Workshop Web Page
codingitwrong.com/workshops/rnweb
Clone the repo, pull the latest, and install!
Sign in to GitNation Discord to ask questions! #radv-
workshops
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 2

3. react-native-web
One Codebase, Three Platforms
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 3

4. A Real App in the App Store
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 4

5. Surely
A focused todo app giving you only what
you need to get your todos done.
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 5

6. Web/iOS: surelytodo.com
Source: bit.ly/surely-expo
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 6

7. Overview
1. What is React Native Web?
2. Walkthrough: Setting Up an App Skeleton
3. Discussion: When to Use React Native Web
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 7

8. Not an intro to React Native.
An intro to React Native:
reactnative.dev/docs/getting-started
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 8

9. Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 9

10. What is React Native Web?
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 10

11. Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 11

12. Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 12

13. Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 13

14. Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 14

15. React Native for Web
— github.com/necolas/react-native-web
— Can be used in any React Native project
— Recommended way to use it is Expo [link]
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 15

16. Walkthrough
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 16

17. Walkthrough
— Navigation and URLs
— Component library
— Dark mode
— Custom theme
— Responsive design
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 17

18. Tools Used
Expo
React Navigation
React Native
Paper
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 18

19. To the code!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 19

20. Discussion:
When to Use React Native
Web
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 20

21. — What projects might be a good fit for React Native
Web?
— What projects might not be a good fit for it?
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 21

22. My Thoughts on When to Use React Native Web
1. You need both a web and mobile app.
2. It's (largely) the same app on mobile and web.
3. You don't need fine-grained control of HTML.
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 22

23. Conclusion:
On Abstractions
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 23

24. Do More!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 24

25. Do More!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 25

26. Do More!
Do More With Less!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 26

27. Accidental Complexity
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 27

28. Workshop Web Page
codingitwrong.com/workshops/rnweb
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 28

29. Stay in Touch!
— CodingItWrong's Discord Server - the workshop,
React Native, and testing
— Weekly Live Stream - working on two web+native
Expo apps
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 29

30. Questions?
codingitwrong.com/workshops/rnweb
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 30

31. Thank you!
Building for Mobile and Web with Expo - React Advanced London - 2022-10-27 - codingitwrong.com/workshops/rnweb 31